화살표 함수(arrow function)

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다.

 

ES6에 추가된 화살표 함수는 function 키워드 대신 =>(fat arrow) 연산자를 써서 표현합니다. 화살표 함수의 가장 큰 특징은 this의 바인딩 방법입니다.

화살표 함수의 렉시컬 스코프를 살펴봅시다

function foo(){
	//화살표 함수를 반환한다
	return (a) => {
		console.log(this.a);
	}
}

var obj1 = {
	a:2
}
var obj2 = {
	a:3
}
var bar = foo.call(obj1);
bar.call(obj2);

foo()의 리턴문에서 생성된 화살표 함수는 foo() 호출 당시의 렉시컬 스코프로 this를 포착합니다. foo()는 obj1에 this가 바인딩 되므로 bar의 this 역시 obj1로 바인딩됩니다. 화살표 함수의 렉시컬 바인등은 절대로 오버라이드 할 수 없습니다. 그래서 bar.call(obj2) 의 결과도 3이 아니라 2가 찍힙니다.

화살표 함수는 이벤트 처리기나 타이머 등의 콜백에 가장 널리 쓰입니다. 

화살표 함수가 등장하기 전의 코드와 화살표 함수를 사용한 코드를 살펴 보겠습니다

 

function foo() {
  var self = this;
  setTimeout(function () {
    console.log(self.a);
  }, 100);
}
var obj = {
  a: 2,
};
foo.call(obj);

self = this로 this가 호출된 시점의 렉시컬 스코프를 기억하기 위해 일반 변수에 할당하는 방법입니다. 이렇게 하면 타이머 함수 내에서 this를 사용하다가 undefined를 출력하지 않고 self를 사용해 우리가 원하는 값을 확인할 수 있겠지요.

function foo() {
  var self = this;
  setTimeout(function () {
    console.log(self.a);
  }, 100);
}
var obj = {
  a: 2,
};
foo.call(obj);

동일한 역할을 하는 코드인데 화살표함수를 사용하는 방법입니다. 위에서 설명한 대로 호출 당시의 this를 포착하기 때문에 편리합니다. 저도 화살표함수가 내부적으로 어떻게 설계되어서 이런 동작을 할 수 있는지는 잘 모르지만.. 언젠가 스펙을 뒤져서라도 알아봐야겠지요.

 

정리

ES6 화살표 함수는 표준 바인딩 규칙을 무시하고 렉시컬 스코프로 this를 바인딩합니다. 즉, enclosing scope로부터 어떤 값이든 this 바인딩을 상속합니다. 이는 ES6 이전 시절 self = this 구문을 대체한 장치입니다.

 

참고 및 출처

You Don't Know JS [카일 심슨]