화살표 함수는 ES6에서 새로 추가되었다. 기존 함수 표현식과 비교하면 간단하게 사용 가능하다.
function fun() { // 일반함수
...
}
const arrFun = () => { // 화살표 함수
...
};
우선 바인딩이란, 함수 호출과 실제 함수를 연결하는 방법이다.
함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩이다.
바인딩은 정적 바인딩(static binding)과 동적 바인딩(dynamic binding)으로 구분할 수 있다.
정적 - 실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지.
동적 - 실행 시간에 이루어지거나 실행 시간에 변경됨.
자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.
일반 함수는 선언할 때 this에 바인딩할 객체가 동적으로 결정된다.
일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.(Lexical this)
또한, call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.
function fun() {
this.name = "하이";
return {
name: "바이",
speak: function () {
console.log(this.name);
},
};
}
function arrFun() {
this.name = "하이";
return {
name: "바이";
speak: () => {
console.log(this.name);
},
};
}
const fun1 = new fun();
fun1.speak(); // 바이
const fun2 = new arrFun();
fun2.speak(); // 하이
일반 함수는 자신이 종속된 객체를 this로 가리키고 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
일반 함수는 생성자 함수로 사용할 수 있다.
화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.
function fun() {
this.num = 1234;
}
const arrFun = () => {
this.num = 1234;
};
const funA = new fun();
console.log(funA.num); // 1234
const funB = new arrFun(); // Error
일반 함수에서는 한수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용 가능
화살표 함수에서는 arguments 변수가 전달되지 않는다.
function fun() {
console.log(arguments); // Arguments(3) [[1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
fun(1, 2, 3);
일반 함수는 arguments 변수가 전달되어 [1, 2, 3]이 찍히지만
const arrFun = () => {
console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};
fun(1, 2, 3);