러닝 자바스크립트 스터디 자료 - CHAPTER 6. 함수

함수(function)는 하나의 단위로 실행되는 문의 집합, 일종의 부속프로그램으로 볼 수도 있다.
함수를 호출 할 때는 이름 다음에 괄호를 쓴다.

반환값

함수 바디 안에 return키워드를 사용하면 함수를 즉시 종료하고 값을 반환한다.
return을 명시적으로 호출하지 안으면 반환값은 undefined가 됩니다.
함수는 어떤 타입의 값이라도 반환 할 수 있습니다.

호출과 참조

자바스크립트에서는 함수도 객체 따라서 다른개체와 마찬가지로 넘기거나 할당 할 수 있다.

  • 함수 식별자 뒤에 괄호를 쓰면 자바스크립트는 함수를 호출한다. 그리고 함수를 호출한 표현식은 반환값이 된다.
  • 괄호를 쓰지않으면 다른 값과 마찬가지로 함수를 참조하는 것이며, 그 함수 는 실행되지 않는다.

함수를 변수에 할당하면 다른 이름으로 함수를 호출 할 수 있다.
함수를 객체 프로퍼티에 할당 할 수도 있다. 배열 요소로 할당 할 수도 있다.

함수와 매개변수

함수를 호출하면서 정보를 전달 할때는 함수 매겨변수를 이용한다.
매개변수는 함수가 호출되기 전에는 존재하지 않는다는 점을 제외하면 일반적인 변수나 마찬가지이다.

1
2
3
function avg(a,b){
return(a+b)/2
}

이 함수 선언에서 a와b를 정해진 매개변수를 한 개 전달하든 같은 함수를 호출 하는 것이다.
다시 말해 어떤 함수를 그 함수에서 정해진 매개변수 숫자와 관계없이 몇 개의 매개 변수를 전달해도 됩니다.
정해진 매개변수에 값을 제공하지 않으면 암묵적을 undefined가 할당됩니다.

매개변수 해체

매개변수도 해체 할 수 있다. 해체 할당과 마찬가지로 프로퍼티 이름은 반드시 유효한 식별자여야 하고,
들어오는 객체에 해당 프로퍼티가 없는 변수는 undefined를 할당받습니다.
확산 연산자를 써서 남는 매개변수를 이용 할 수 있습니다.
함수를 선언 할 때 확산 연산자는 반드시 마지막 매개변수여야 합니다.
확산 연산자 뒤에 다른 매개변수가 있으면 값 중 어디까지를 확산 매개변수에 할당 해야 하는지 판단 할 수 없어 에러를 일으킨다.

매개변수 기본값

ES6에서 추가, 일반적으로 매개변수에 값을 제공하지 않으면 undefined가 값으로 할당됩니다.

1
2
3
4
5
6
7
8
function f(a,b= "default", c=3){
return `${a} - ${b} - ${c}`;
}

f(5,6,7); // "5 - 6 - 7"
f(5,6); // "5 - 6 - 3"
f(5); // "5 -default -3"
f(); // "undefined - default - 3"

객체의 프로퍼티인 함수

객체의 프로퍼티인 함수를 메서드라고 불러서 일반적인 함수와 구별합니다.
ES6에서는 간편하게 메서드를 추가 할 수 있는 문법이 생겼다.

1
2
3
4
5
6
7
8
9
10
const o = {
name: 'Wallace', // 원시 값 프로퍼티
bark: function() { return 'Woof!'; } // 함수 프로퍼티(메서드)
}

// ES6
const o = {
name: 'Wallace', // 원시 값 프로퍼티
bark() { return 'Woof!'; } // 함수 프로퍼티(메서드)
}

this키워드

함수 바디 안에는 특별한 읽기 전용값이 this가 있다.
일반적으로 this는 객체의 프로퍼티인 함수에서 의미가 있다.
this는 함수를 어떻게 선언했느냐가 아니라 어떻게 호촐했느냐에 따라 달라진다는 것을 이해해야 한다.
중첩된 함수 안에서 this를 사용하려다 보면 혼랑을 야기한다. 이러한 문제해결을 위해 다른 변수에 this를 할당해서 사용한다.
ES6에서는 화살표함수를 써도 이 문제를 해결 할 수 있다.

함수 표현식과 익명함수

익명 함수에서는 함수에 식별자가 주어지지 않습니다.
함수 표현식은 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다.
함수 표현식은 식별자에 할당 할 수도 있고 즉시 호출 할 수도 있다. 함수 표현식은 함수 이름을 생략 할 수 있다는 점을 제외하면 함수 선언과 문법적으로 완전히 같다.

함수 표현식
1
2
3
4
5
6
7
8
// 기명함수
const f = function name(){
// ...
}
// 익명함수
const f = function(){
// ...
}

일반적인 함수 선언과 마찬가지로 f()로 함수를 호출 할 수 있다.
차이점은 먼저 함수 표현식으로 익명함수를 만들고 그 함수를 변수에 할당했다는 것이다.

익명함수는 어디든 쓸 수 있다.
다른 함수나 메서드의 매개변수로 넘길 수도 있고, 객체의 함수 프로퍼티가 될 수도 있다.
-재귀함수

컨택스트의 차이

함수선언이 표현식으로 사용됐다면 그건 함수 표현식, 표현식으로 사용되지 않았다면 함수 선언

화살표 표기법

funtion이라는 단어와 중괄호 숫자를 줄이려고 고안된 단축문법

  • 화살표 함수의 세가지 단축문법
  1. function을 생략해도 됩니다.
  2. 함수에 매개변수가 단 하나 뿐이라면 괄호()도 생략 할 수 있습니다.
  3. 함수 바디가 표현식 하나라면 중괄호와 return문도 생략 할 수 있습니다.

화살표 함수는 항상 익명입니다. 변수에 할당 할수는 있지만 이름 붙은 함수를 만들 수는 없다.

1
2
3
4
5
6
7
8
9
10
11
const f1 = function() { return "hello!"; }
// 또는
const f1 = () => "hello!";

const f2 = function(name) { return `Hello, ${name}!`; }
// 또는
const f2 = name => `Hello, $(name)!`;

const f3 = function(a,b) { return a + b; }
// 또는
const f3 = (a,b) => a + b;

화살표표기법은 단순한 단축문법에 그치는 것이 아니라 함수형 프로그래밍을 자바스크립트에 도입하는 중요한 열쇠이다.
또 다른 차이는 객체 생성자로 사용 할 수 없고, arguments 변수도 사용 할 수 없다.

call, apply, bind

자바스크립트에서는 일반적인 방법 외에도, 함수를 어디서, 어떻게 호출 했느냐와 상관없이
this가 무엇인지 지정 할 수 있습니다.
call 메서드는 모든 함수에서 사용 할 수 있으며, this를 특정 값으로 지정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
const bruce = { name: "Bruce" };
const madeline = { name : "Madeline" };

// 이 함수는 어떤 객체에도 연결되지 않았지만 this를 사용합니다.
function greet(){
return `Hello, I'm ${this.name}!`;
}

greet(); // "Hello, I'm undefined!" - this는 어디에도 묶이지 않았습니다.
greet.call(bruce); // "Hello, I'm Bruce!" - this는 bruce 입니다.
greet.call(madeline); // "Hello, I'm Madeline!" - this는 madeline 입니다.

함수를 호출하면서 call를 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용 할 수 있다.
call의 첫번째 매개변수는 this로 사용할 값이고, 매개변수가 더 있으면 그 매개변수는 호출하는 함수로 전달된다.

apply는 함수 매개변수처리 방법만 제외하고 call과 같습니다.
call은 함수와 마찬가지로 매개변수를 직접 받지만 apply는 매개변수를 배열로 받습니다.

apply는 배열 요소를 함수 매개변수로 사용해야 할 때 유용하다.
ES6의 확장연산자(…)를 사용해도 apply와 같은 결과를 얻을 수 있다.

bind를 사용하면 함수의 함수의 this값을 영구히 바꿀 수 있다. bind에 매개변수를 넘기면 항상 그 매개변수를 받으면서 호출되는 새 함수를 만드는 효과가 있다.

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×