ES6 화살표 함수 사용 이유

기존 함수

const arrow = function() {
	...
};

 

화살표 함수

const arrow = () => {
	... 
};

 

위 비교만으로도 왜 화살표 함수가 ES6에 추가되어 많은 개발자에게 사용되는지 알 수 있다.

 

function이 =>로 변경되었다.

바꿔 말하면 타이핑 8이 타이핑 2로 변경되었다.

 

함수는 가장 많이 사용하는 기능인데, 이를 1/4로 줄인 것만으로도 개발자들에게 환호받을만하다.

 

이뿐만이 아니다. 조건에 한해 return 생략까지 가능해졌다.

조건 : return이 한 줄인 경우

let sum = (a, b) => a + b;

// vs

let sum = function(a, b) {
    return a + b;
};

 

그러면 이쯤에서 화살표 함수에 대해 한번 정리해보자.

 

 

화살표 함수

화살표 함수는 function 키워드 대신 화살표 =>를 사용해 함수를 간략히 정의한다.

const arrow = (x,y) => { ... };

 

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

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.
2. 중복된 매개변수 이름을 선언할 수 없다.
3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

 

화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 바로 this다.

=> 화살표 함수의 this는 일반 함수의 this와 다르게 동작한다.

 

일반 함수로서 호출되는 모든 함수 내부의 this는 전역 객체를 가리킨다.

화살표는 함수 자체의 this 바인딩을 갖지 않으며, 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 참조한다. 그렇기에 화살표 함수는 콜백 함수의 this와 외부 함수의 this 간 불일치 문제를 해결할 수 있다.

 

정리하자면 콜백 함수 내부의 this문제를 화살표 함수를 사용하면 편하게 해결할 수 있다.

 

 

참고 자료

https://tooo1.tistory.com/561