여러개의 화살표 함수 (⇒)

화살표 함수는 ES6에서 도입된 문법으로 함수를 좀 더 간결하고 직관적으로 작성할 수 있어서 자주 사용하고 있다. 자주 사용하고 있었지만, 화살표 함수는 항상 하나만 사용했었는데 이번에 화살표 함수를 여러개 중첩으로 사용하는 코드를 처음 보게 되어서 한 번 정리해두려고 한다!

함수 표현 (function expression)

전통적인 함수 (function)

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

화살표 함수 (arrow function)

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

화살표 함수의 특징 (화살표 함수와 전통적인 함수의 차이점)

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없다.
• new.target키워드가 없다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
• 생성자(Constructor)로 사용할 수 없다.

여러개의 화살표 함수

2개의 화살표 함수

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

• 처음 봤을 때는 뭐지 싶게 생겼는데, 아래처럼 전통적인 함수 방식으로 풀어서 쓰면 이해하기 쉽다!

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

화살표 함수 사용법

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

add(2)(3); // 5

const add2 = add(2);
add2(3); // 5

🤔  왜 굳이 화살표 함수 여러개를 쓸까….?

• 위 예시를 보고 처음 든 생각은 왜 굳이 화살표 함수를 여러개 쓸까였다.

• 예를 들어서, a와 b를 더하는 add 함수를 만들기 위해서 아래처럼 a와 b 두 개의 인자를 한 번에 받으면 되는 것이 아닌가 그런 생각이 들었기 때문이다.

  const add = (a, b) => {
    return a + b;
  };
  
  add(2, 3); // 5
  

• 근데 생각하다보니까 이 경우는 여러개의 화살표 함수의 설명 예시를 워낙 간단한 예시로 만들었기 때문인 것 같다. 예를 들어서 a와 b 두 개의 인자를 한번에 받는 경우 add 함수를 쓸 때부터 a와 b 두 개의 인자를 모두 알고 있어야 한다. 하지만 두 개의 화살표 함수를 사용한다면 첫 번째 (외부) 함수 호출이 두 번째 (내부) 함수를 반환하기 때문에 add 함수를 호출할 때 첫번째 인자 a를 넣어서 리턴된 값을 이용할 수 있다.

• 아래 예시를 다시 살펴보면 add2는 첫번째 함수를 호출해서 두번째 함수를 반환한다. 따라서 add2에 두번째 인자를 넣어주게 되면 add2를 만들때 넣었던 첫 번째 인자 a인 2와 add2에 사용된 두번째 인자 b인 3이 합쳐져서 5라는 결과가 나오는 것이다.

  const add = (a) => (b) => {
    return a + b;
  };
  
  const add2 = add(2);
  add2(3); // 5
  

Ref.

• 화살표 함수 - JavaScript

• 자바스크립트에서 화살표가 2번 연속으로 나오는 경우는 어떻게 해석해야하나요?

• 자바 스크립트에서 여러 개의 화살표 기능은 무엇을 의미합니까?