Arrow Function(화살표함수)

최근들어 Front-End 작업을 하는데, Arrow Function이 상당히 많이 보이기 시작했다.

깊게 공부하기 귀찮아서 어느정도 자체 해석하면서 넘어가려고 하다, 이 정도 사용률이라면 제대로 알고 넘어가야 할것 같아 공부를 하기로 하였다.

// 함수 표현식

function () {}



// 화살표 함수 표현식

() => {}

 

 

먼저 Arrow Function는 ES6 문법이며, let, const만큼 많이 사용되고 있다고 한다.

Arrow Function 공식 문서는 다음과 같다. 나는 내가 이해할 정도로만 짧고 명료하게 공부하고 넘어갈 것이기 때문에 구체적인 내용을 보고 싶다면 링크를 참고하는것을 추천한다. Arrow Function Expression

화살표 함수

Arrow Function 특징

- 구문이 짧다

- this, argument, super 등을 바인딩 하지 않음  <- 이게 무슨말인가....

- 항상 익명임

- 메소드 함수가 아닌 곳에 가장 적당함. 그래서 생성자로 사용할 수 없음   <- 이게 무슨말인가....

 

바인딩 하지 않는다?

이 개념을 이해하려면, 일반 함수에서 this가 어떻게 바인딩 되는지를 알아야 한다.

이 글에서는 그냥 일반함수, 화살표함수의 this가 어떻게 다른지만 비교하고 넘어갈 것이기 때문에 구체적인 내용이 필요하다면 구글링 추천한다.

		일반함수의 this	화살표 함수의 this
this 객체가 결정되는 시점		동적 바인딩을 통해 결정됨(어떻게 호출하냐에 따라 많이 달라짐)	정적으로 결정됨
this가 가르키는 것	생성자 함수 혹은 객체의 메소드	해당 함수를 가르킴	언제나 Arrow Function의 상위 스코프를 가르킴
	위를 제외한 모든 함수 (내부함수, 콜백포함)	전역 객체인 window를 가르킴

여기서 주목해야 하는 부분은, 일반함수의 this가 생성자, 객체메소드를 제외한 모든 함수의 경우 전역 객체를 가르킨다는 점을 주목해야 한다. 일반함수에서는 이렇게 전역 객체를 가르키는것을 회피하기 위해 .bind(this)를 이용하거나 this객체를 메소드 내에서 새로운 객체에 담아 사용하거나 하는 방법들을 사용하고 있다. 

그러나 화살표 함수의 경우 항상 상위 스코프를 가르키기 때문에 (동적, 커스텀) 바인딩 하지 않는다 라는 말이 생겨난 것 같다.(나의 생각)

 

메소드 함수가 아닌 곳에 가장 적당하다는 것은?

위 this가 바인딩하는 개념과 이어진다. 아래의 경우에 따른 this가 가르키는 객체를 생각해 본다면 왜 저 말이 나왔는지 이해가 될것이다.

- 메소드 정의, 프로토 타입에 ArrowFunction 생성하는 경우 => 메소드를 소유한 객체가 아닌 상위 컨텍스트인 window를 this가 가르키게 됨

- 생성자 함수로 사용할 경우 => Arrow Function은 prototype을 갖고있지 않다 <- 이건 또 무슨말..

- addEventListener 함수의 콜백 함수 => window를 this가 가르키게 됨

사용법

// case 1. 
// before 
setTimeout(function(){
	console.log("test");
}, 1000);

// after
setTimeout(()=>{ 
	console.log("test"); 
}, 1000);

// case 2.
// before
let arr = [1,2,3].map(function(value, index, object){
	return value*3;
});

// after
let arr = [1,2,3].map((value) => (value*3));

 

매개변수 지정법

매개변수 없을 때	() => {...}
매개변수 1개 일 때	x => {...}
매개변수 여러개 일 때	(x,y) => {...}

함수 정의 지정법

함수 정의가 한줄로 끝나는 경우(리턴, 중괄호 생략 가능)	x => x*3
한줄로 끝나지 않는 경우	x => { return x*5; }