ES6에서 도입된 화살표 함수(arrow function) 내부에서 사용되는 this에 대해 정리하는 글이다.
화살표 함수는 함수선언문으로 정의할 수 없고 함수표현식으로 정의해야 한다.
일반적인 사용법은 아래와 같다.
const add = (x, y) => {return x + y};
add(2, 3); // 51) 매개변수가 한 개 인경우 소괄호()를 생략할 수 있다.
2) 매개변수가 없는 경우 소괄호()를 생략할 수 없다.
3) 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호{}를 생략할 수 있다.
-> 이때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 return을 작성하지 않아도 암묵적으로 return 한다.
4) 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호()로 감싸주어야 한다.
-> 객체리터럴을 소괄호()로 감싸지 않으면 객체 리터럴의 중괄호{}를 함수몸체를 감싸는 중괄호{}로 잘못해석한다.
const abc = (x, y) => ({x, y});
abc(1, 'test'); //{x: 1, y: 'test'}
//위 표현은 다음과 동일
const abc = (x, y) => {return {x, y};};5) 즉시실행함수(IIFE)로 사용 가능
const person = (name => ({
sayHi(){return `my name is ${name}`;}// sayHi:function(){return `my name is ${name}`;} 도 가능
}))('KiHoon');
person.sayHi() //'my name is KiHoon'->sayHi() 함수의 경우 객체리터럴을 반환하기 때문에 중괄호 이전에 소괄호로 감싸고 매개변수가 name 1개이기 때문에 소괄호를 생략. 즉시실행함수는 소괄호(())로 함수를 감싸서 실행하는 문법을 사용한다.
6) 고차함수의 인수로 사용가능
[1, 2, 3].map(v => v * 2);// -> [2, 4, 6]지금까지 화살표함수의 기본적인 사용법에 대해 알아보았다.
지금부터는 화살표함수와 일반함수의 차이점을 알아보려 한다. 그 중에서도 일반함수와 구별되는 가장 큰 특징은 바로 this다.
일반함수에서 호출되는 모든 함수 내부의 this는 전역 객체를 가리킨다.
const person = {
username : "ki hoon",
age : "22",
sayHi() {
console.log(`Hi, my name is ${this.username} and ${this.age} years old.`);
getInfo = function() {
return `Hi, my name is ${this.username} and ${this.age} years old.`
};
console.log(getInfo());
}
};
person.sayHi(); /* Hi, my name is ki hoon and 22 years old.
Hi, my name is undefined and undefined years old.*/위 코드를 보면 username, age 라는 프로퍼티와 sayHi 라는 메소드가 있는데 매소드 내의 첫번째 출력문에서의 this는 person을 가르키기 때문에 username과 age를 정상적으로 출력하지만 sayHi 내부의 getInfo 함수는 메소드가 아닌 일반함수로 this가 전역객체인 window를 가르키기 때문에 username과 age가 undefined로 출력되는 것을 확인할 수 있다.
이와 같은 문제를 해결하기 위해서 화살표 함수를 사용할 수 있다.
const person = {
username : "ki hoon",
age : "22",
sayHi() {
console.log(`Hi, my name is ${this.username} and ${this.age} years old.`);
getInfo = () => {
return `Hi, my name is ${this.username} and ${this.age} years old.`
};
console.log(getInfo());
}
};
person.sayHi(); /* Hi, my name is ki hoon and 22 years old.
Hi, my name is ki hoon and 22 years old.*/위와 같이 화살표 함수를 사용하면 정상적으로 출력이 되는 것을 확인할 수 있다. 화살표 함수는 함수자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this는 상위 스코프의 this를 참조하여 가리키는 것을 확인할 수 있다.
