자바스크립트의 화살표 함수 도입

원문: http://wesbos.com/arrow-functions/

ES6는 화살표 함수를 도입했다.

화살표 함수는 3가지 장점이 있는데 첫째로, 간결한 문법을 가졌다. 둘째, 명시적인 반환을 하며 한 줄로 멋지게 작성할 수 있게 해준다. 셋째, 다른 함수 내부에서 화살표 함수를 사용할 때 this를 재차 바인드 하지 않는다. 세 번째 장점은 클릭 핸들러와 비슷한 여러 가지의 구현을 정말 편리하게 해준다.

자, 이제 여러 예제를 살펴보면서 나아가 ES6의 화살표 함수도 한번 사용해 보자.

여기 names라는 배열이 있다:

const names = ['Wes', 'Kaid', 'Lux'];

이 배열의 각 요소 끝에 Bos라는 이름을 붙이고 싶다면,

일반적으로 이렇게 사용했을 것이다:

const fullNames = names.map(function(name){
  return `${name} Bos`;
});

console.log(fullNames); // Wes Bos, Kait Bos, Lux Bos

여기 사용된 억음 부호( `, backtick)는 템플릿 문자이다. 템플릿이 무엇인지 몰라도 걱정할 필요는 없다. 추후 다른 장에서 살펴볼 예정이다.

어쨌든, 이 결과는 Wes Bos, Kait Bos, Lux Bos를 가진 배열을 반환하는데, 배열을 받아서 어떤 요소든지 끝에 "Bos" 를 붙여준다.

괜찮은 코드처럼 보이지만, 이게 화살표 함수는 아니다. 그렇다면 이것을 어떻게 다시 작성할 수 있을지 보자.

화살표 함수로 변경하기

맨 처음 화살표 함수로 할 일은 function예약어를 지우고 굵은 화살표 즉, =>로 바꾸는 일이다:

const fullNames2 = names.map((name) => {
 return `${name} Bos`;
});

console.log(fullNames2); // Wes Bos, Kait Bos, Lux Bos

만약 다른 프로그래밍 언어를 사용하다 왔다면, 한 번쯤 보았을 것이지만, 자바 스크립트에서의 굵은 화살표는 처음 볼 것이다.

이 함수는 function과 같은 동작을 한다. console.log를 통해 차이가 없다는 것을 확인할 수 있다.

인자가 하나일 경우 괄호 지우기

좀 더 나아가서 한 개의 인자만 함수에 넘겨질 때, 괄호 없이 사용할 수 있다.

const fullNames3 = names.map(name => {
 return `${name} Bos`;
});

console.log(fullNames3); // Wes Bos, Kait Bos, Lux Bos

이것은 코딩 스타일에 대한 선택의 문제다. 어떤 개발자들은 한 개 이상의 인자에 대해서 모두 괄호로 묶는 것을 선호할 수 있지만, 대부분 콜백함수인 경우 괄호 없이 사용하는 게 더 깔끔하고 멋진 문법이 된다.

화살표 함수의 암시적 반환

화살표 함수로 바꾸려면 어떤 것을 더 해볼 수 있을까? 암시적 반환이라는 것을 한번 해보자.

잠깐, 명시적 반환은 무엇일까?

명시적 반환은 반환하려는 것을 직접 작성하는 것을 일컫는다. 하지만 한 줄로 쓰인 자바스크립트의 많은 콜백 함수들은 그저 무엇인가를 직접 반환한다. 우리는 그런 거대한 행의 함수 모두가 필요하지 않다.

그래서 - 화살표 함수의 목적은 무엇인가를 반환하는 것이고, 그러므로 return 예약어가 필요하지 않다. 이전에 수정했던 3줄짜리 함수는 암시적 반환을 통해 한 줄짜리 함수로 바꿀 수 있다.

const fullNames4 = names.map(name => `${name} Bos`);

console.log(fullNames4);  // Wes Bos, Kait Bos, Lux Bos

지금까지 세 가지를 해보았다.

1. return문 지우기
2. 한 줄로 작성하기
3. 중괄호 지우기

만약 중괄호를 지웠다면 암시적 반환이 된 것이고, 구체적인 것 필요 없이 ${name} Bos를 반환하는 것만 알면 된다.

그리고 우리의 가정이 맞다면, console.log를 통해 같은 결과를 확인할 수 있다.

인자 없이 화살표 함수 사용하기

마지막으로, 아무 인자 없이 사용하는 경우를 살펴볼 것이다. (물론 위의 예제들은 인자가 필요했다) 하지만, 인자가 필요 없다면 그냥 빈 괄호를 넘기면 된다.

만약 그저 Cool Bos를 반환한다면, 모든 요소는 결국 Cool Bos가 될 것이다.

const fullNames5 = names.map(() => `Cool Bos`);

console.log(fullNames5); // Cool Bos, Cool Bos, Cool Bos

()를 다른 모양으로 사용할 수도 있는데, 개발자들이 _를 사용하는 것을 보았을 것이다.

names.map(_ => `Cool Bos`);

이것은 사용 후 버리는 변수(throwaway variable)라고 부르는데 그 이유가 실제로 _를 생성하지만 사용하지 않기 때문이다. 이것은 _라서 버리는 변수가 된 것이 아니다. 이와 같은 방식으로 선언 후, 사용하지 않는다면 어떤 변수든지 사용 후 버리는 변수가 될 수 있다.

names.map(x => `Cool Bos`);
names.map(WESBOS => `Cool Bos`);
names.map(_ya___Yayayayay => `Cool Bos`);
names.map(do_yaget_the_point => `Cool Bos`);

선택은 여러분의 몫이지만 필자는 인자가 없는 경우 _=>보다 () =>를 사용하는 것을 권한다.

화살표 함수는 항상 익명함수다

아직 자바스크립트는 변하고 있고 추후 버전에서 바뀔 수 있지만, 현재까지의 화살표 함수가 일반함수와 다른 점으로는 항상 익명함수라는 것이다.

기명 함수는 다음과 같다:

function sayMyName(name) {
  alert(`Hello ${name}`);
}

기명 함수의 장점은 stack trace를 확인할 때 드러난다. 에러가 발생했을 때 어디서 문제가 일어났는지 확인하려면 두 가지 방법이 있다. 첫 번째로, 행 번호를 따라가서 문제가 되는 부분을 확인할 수 있지만 크게 도움이 되진 않는다. 둘째는 발생한 함수의 이름을 확인하는 것이다. 쉽게 에러 위치를 파악하려면 호출된 함수의 실제 이름이 필요하다.

만약 화살표 함수를 사용한다면 이름을 붙일 수 없다. 모든 화살표 함수는 이름을 가지고 있지 않다.

하지만 변수에 할당한다면 가능하다:

const sayMyName = (name) => {alert(`Hello ${name}!`)}

sayMyName('Wes');

여기서 한가지 알아둬야 할 게 있다. 익명 함수는 우리에게 좋은 stack trace를 제공하지 못한다. 만약 당신이 그런 단점에 개의치 않는다면 지금 바로 화살표 함수를 사용해보자.