Arrow

Arrow함수란 화살표 함수라고 부릅니다

 

아래의 예를 보시면 금방 차이점을 느끼실 겁니다

차이점이 바로 보이시나요?

function 이라는 구문이 =>로 대체되어 사용되었습니다

즉 화살표 함수라는 것은 => 이것을 뜻하게 됩니다

 

애로우함수를 더 짧게 사용하는 방법

리턴값이 하나의 값인 경우

위 예시처럼 return 과 {}괄호를 생략 한 채로 리턴값이 넘어가는 결과가 나옵니다

 

return값이 객체인 경우

 

단일값을 넘겨줄 경우 {}을 생략했지만 객체표시 {}를 사용하고 객체를 ()대괄호로 묶어줘야 합니다

 

개인적 으로 생략을 많이 하는 코딩은 좋아하지 않지만 실무에서 생략한 코드를 만나기 전에 아시면 도움이 되실 거라고 생각합니다

 

화살표 함수를 사용하는 장점

다시 배우기 복잡하고 귀찮은데 화살표 함수를 사용하지 않고 기본 funciton함수를 사용하면 안되나?

라고 생각하실수 있으실 겁니다 

하지만 장점을 알고 나면 화살표 함수를 사용하시게 되실거라고 생각합니다

 

this바인딩

다들 es6전에서 함수의 현 위치에서 this는 어디인가 라는 것 때문에 고생을 많이 하셨을 거라고 생각됩니다

화살표함수의 this는 정적으로 바인딩 되어 항상 상위 스코프의 this를 가르키게 됩니다

 

위 예시는 test객체의 a에 대하여 로그를 출력 한 결과입니다

"항상 상위 스코프의 this를 가르킨다"를 기억하신다면 바로 알수 있습니다

하나씩 살펴보겠습니다

test.a의 결과는 es5문법으로 변수안의 title을 찾아서 출력한 모습입니다

test.b의 결과가 undefined인 것은 b가 화살표함수임으로 test객체의 상위인 window를 참조하기 때문에 undefined가 된 모습 입니다

test객체에서 화살표함수로 title을 찾기 위해서는 c와 같이 es5의 함수 내에서 사용해야 title을 찾을 수 있습니다