fat arrow ‘=>’는 익명 함수를 정의하는 데 사용됩니다. function으로 정의된 함수와 비교할 때 이 함수의 동작에는 두 가지 중요한 차이점이 있습니다.

첫째, this 키워드에 대한 바인딩은 바깥과 fat arrow 함수 내부가 동일합니다. 이것은 function으로 선언된 함수와 다르며, 호출할 때 this를 다른 객체에 바인드 할 수 있습니다. this 바인딩을 유지 관리하면 매핑과 같은 작업에 매우 편리합니다: ‘this.items.map(x => this.doSomethingWith(x))’

둘째, fat arrow 함수에는 정의된 인수가 없습니다. 당신은 spread 구문을 사용하여 같은 것을 얻을 수 있습니다: ‘(…args) => doSomething(args[0], args[1])’

fat arrow 함수 구문은 약간 다를 수 있습니다. 함수가 정확히 하나의 매개 변수를 사용하면 괄호를 생략할 수 있습니다. ‘x => Math.pow(x, 2)’. 여러개의 인수는 괄호가 필요합니다. ‘(x, y) => Math.pow(x, y)’. 함수 본문이 중괄호로 싸여 있지 않으면(이전 문장에서와 같이) 함수 본문은 표현식으로 실행되고 함수의 반환 값은 표현식의 값입니다. 함수 본문은 중괄호로 묶어 블록으로 만들 수 있습니다. 이 경우 반환할 값이 필요하면 명시적으로 값을 반환해야 합니다. 함수 중괄호에 여러 줄의 코드를 포함할 수 있으므로 중괄호를 사용하고 버전을 더 자주 묶을 수 있습니다.

[ fat arrow 함수 ]

1
2
3
4
5
6
7
8
9
10
11
12
const foo = () => 'bar'

const baz = (x) => {
  return x + 1
}

const squareSum = (...args) => {
  const squared = args.map(x => Math.pow(x, 2))
  return squared.reduce((prev, curr) => prev + curr)
}

this.items.map(x => this.doSomethingWith(x))

[ 바벨로 컴파일된 코드 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var _this = this;

var foo = function foo() {
  return 'bar';
};

var baz = function baz(x) {
  return x + 1;
};

var squareSum = function squareSum() {
  for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  var squared = args.map(function (x) {
    return Math.pow(x, 2);
  });
  return squared.reduce(function (prev, curr) {
    return prev + curr;
  });
};

this.items.map(function (x) {
  return _this.doSomethingWith(x);
});