함수를 나타내는 새로운 방식, Arrow function

이전 영상에서는 exports로 모듈 외부에 공개했던 각각의 것들을, 하나의 객체로 모아서 module.exports로 모듈 외부에 공개하는 법을 배웠습니다. 그러니까 원래의 이런 코드를

이렇게 바꿨는데요.

그런데 함수 부분을 보면 원래

function add(a, b) { return a + b; }

이런 식으로 써있던 것이

(a, b) ⇒ { return a + b; }

이렇게 바뀐 것을 볼 수 있습니다. 이게 뭘까요? 이건 Arrow Function이라고 하는데요. Arrow Function은 함수를 나타내는 또다른 방식입니다. 바로 다음 영상의 내용을 보기 전에 Arrow Function에 대해 짚고 넘어가겠습니다.

여러분, 자바스크립트에서는 보통 함수를 이런 식으로 표현하죠?

function add(a, b) {
  return a + b;
}

이런 식으로 함수를 선언하는 형태를 Function Declaration(함수 선언식)이라고 하고,

const add = function(a, b) {
  return a + b;
};

이런 식으로 함수를 나타내는 형태를 Function Expression(함수 표현식)이라고 합니다.

이 두 가지가 자바스크립트에서 전통적으로 사용하는 함수 표현 방법인데요.

그런데 Function Expression(함수 표현식)의 경우, 이런 식으로 표현하는 것도 가능합니다.

const add = (a, b) => { 
  return a + b;
};

이런 식으로 작성된 함수를 Arrow Function(화살표 함수)이라고 하는데요.

지금 여기서 왼쪽의 const add 부분은 단지 함수의 이름일 뿐이고, 그 오른쪽을 자세히 봐야합니다.

(a, b) => {
  return a + b;
}

이 부분을 자세히 살펴봅시다. 지금 인자들이 괄호 안에 쓰여 있고 그 옆에 화살표(⇒)가 있죠? 화살표를 영어로는 Arrow라고 합니다. 화살표가 함수의 몸체(바디, body) { return a + b; }를 가리키고 있는데요. 이런 식으로 나타낸 함수를 Arrow Function이라고 합니다. 이 Arrow Function은 자바스크립트의 최근 문법 ES6에서 새롭게 도입된 표기법인데요.

기존에 함수를 나타내던 방식들과 Arrow Function은 하나의 함수를 나타낸다는 점에서는 동일하지만 기능상의 미세한 차이가 있기는 합니다. 일단 그런 부분은 나중에 자바스크립트 중고급 토픽에서 배우도록 하고, 여기서는 일단 Arrow Function 형식으로도 함수를 나타낼 수 있다는 점만 잘 기억합시다.

특히, 다른 함수의 인자로 들어가는 함수를 이 Arrow Function으로 나타내는 경우가 많은데요. 잠깐 아래 코드를 보세요.

const arr = [1, 2, 3, 4, 5];

function getSquare(x) {
  return x * x;
}

const newArr = arr.map(getSquare);
console.log(newArr);

지금

1부터 5까지의 원소가 든 arr라는 배열
인자로 받은 수의 제곱을 구해주는 getSquare라는 함수

가 있습니다. 그리고 세 번째 줄에 있는 map이라는 함수는

(1) 배열의 각 원소를, 인자로 받은 함수에 넣고 실행해서
(2) 리턴되는 값을 각각 새 원소로 교체해주는 함수인데요.

지금 map 함수에 getSquare 함수를 인자로 주었기 때문에
새로운 배열 newArr의 값을 출력해보면 [1, 4, 9, 16, 25]가 출력됩니다. 별로 어렵지 않죠?
map 함수에 대해서 더 자세히 알고 싶은 분은 이 링크를 참조하세요.

그런데 방금처럼 getSquare라는 함수를 별도로 선언하지 않고 이렇게 쓸 수도 있습니다.

const arr = [1, 2, 3, 4, 5];

const newArr = arr.map(function(x) {
  return x * x;
});

console.log(newArr);

map 함수에 인자로 들어간 함수를 보면 아예 이름이 없고, 그 내용은 getSqure 함수의 바디에 있던 내용과 같다는 걸 알 수 있습니다. 이렇게 이름이 없는 함수를 Anonymous Function(익명 함수)이라고 하는데요. 보통 함수에 함수를 인자로 넣을 때는 이렇게 Anonymous Function을 넣을 때가 많습니다. 그런데 이때 Anonymous Function을 Arrow Function 형태로 나타낼 수도 있습니다.

이런 식으로 말이죠.

const arr = [1, 2, 3, 4, 5];

const newArr = arr.map((x) => {
    return x * x;
});

console.log(newArr);

Arrow Function을 넣어도 코드는 동일하게 잘 작동합니다.

방금 본 것처럼 함수의 인자로 들어가는 함수는 Anonymous Function을 쓸 때가 많고 이때, 전통적인 형식의 함수를 써도 되고, Arrow Function을 써도 됩니다. 그런데 자바스크립트를 어떤 식으로 쓰면 좋을지에 관한 여러 회사들의 코드 스타일 가이드(code style guide)를 보면 Anonymous Function의 경우, Arrow Function을 쓰는 것을 권장하는 경우가 많습니다. 이 점을 잘 기억해두세요. 이렇게 함수의 인자로, Arrow Function을 넣는 것은 나중 영상에서도 아래 이미지처럼 등장하니까 그때 낯설게 느끼지 않도록 꼭 기억해두세요!

일단 'Node.js 기본기' 토픽에서는

전통적인 형식의 함수
Arrow Function

이 두 가지를 혼용해서 사용하도록 하겠습니다. 아직 초보 단계인 여러분은 어느 코드를 봐도 잘 해석할 수 있어야 하기 때문이죠. 여러분이 회사에서 일을 할 때는 Arrow Function이 아닌 형태로 작성된 오래된 코드(legacy code)를 보게 될 확률도 높습니다. 따라서 여러분이 두 가지 다 익숙하게 느낄 수 있도록, 두 가지를 혼용할게요. 나중에 여러분이 자바스크립트 코드를 읽는 것에 어느 정도 익숙해지기 전까지는 두 가지를 섞어서 사용할 테니까, 앞으로 매 영상의 내용을 보면서 제가 어떤 형태로 함수를 표현하고 있는지 잘 살펴보세요.