화살표 함수(arrow function)

화살표 함수란?

일반 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선안할 수 있다. 

 

화살표 함수와 일반 함수의 차이

1. this

일반함수

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 떄 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 

 

화살표함수

화살표 함수는 함수를 선언할 떄 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

 

2. 생성자 함수로 사용가능 여부

일반함수는 생성자 함수로 사용할 수 있으나 화살표 함수는 prototype 프로퍼티를 가지고 있지 않기 때문에 사용할 수 없다.

 

3. arguments 사용 가능 여부

일반 함수 에서는 함수가 실행 될때 암묵적으로 arguments변수가 전달되어 사용되지만 화살표 함수에서는 arguments변수가 전달되지 않는다.

일반함수

function fun() {
  console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

fun(1, 2, 3);

화살표 함수 

const arrFun = () => {
  console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};

fun(1, 2, 3);