화살표 함수(Arrow function)

화살표 함수 란?

화살표 함수는 function 키워드 대신 화살표를 사용해서 보다 간략하게 함수를 선언할 수 있는 방법이다.

화살표 함수 특징

익명 함수

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

const arrowFun = x => x * x;
console.log(arrowFun (10)); // 100

🎈일반 함수와 다르게 동작하는 this🎈

화살표 함수의 this는 일반 함수의 this와 다른 방식으로 동작한다. 일반 함수는 함수 호출 방식에 따라서 this가 동적으로 결정된다. 하지만 화살표 함수의 this는 함수 선언시 정적으로 결정되며 상위 스코프의 this를 가르킨다.

const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi undefined

일반 함수라면 this는 함수를 호출한 person 객체가 바인딩 되었겠지만, 화살표 함수이므로 상위 스코프인 window 에 바인딩된다.