화살표 함수 표현식

• 화살표 함수는 this, arguments를 가리키는 자체 바인딩을 가지고 있지 않다.
  => 따라서, 메소드로 사용해서는 안된다.
  
• 매개 변수 내 나머지 매개변수(rest parameter), 기본 매개변수(default parameter), 구조 분해 할당(destructuring)이 지원되며, 항상 괄호 안에 넣어야 한다.

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({a, b} = {a: 10, b: 20}) => expression

---

익명 함수와의 차이점

익명 함수와 화살표 함수는 함수의 이름을 생략할 수 있는 것을 보아 비슷해 보이지만, 여러가지 차이점이 존재한다.

1. 생략해서 작성 할 수 있다

• 익명 함수에서는 꼭 작성해야 했던 function, {}, () 와 같은 것들이 화살표 함수에서는 특정 상황에서 생략이 가능하다.

// 기존의 익명 함수
(function (a) {
	return a + 100;
});

// 1. "function"이라는 단어를 제거하고 인자와 여는 대괄호 사이에 화살표를 배치합니다.
(a) => {
	return a + 100;
};

// 2. 중괄호와 "return"이라는 단어를 제거하면 반환이 암시됩니다.
(a) => a + 100;

// 3. 매개변수의 괄호를 제거합니다.
a => a + 100;

• 괄호는 함수가 하나의 매개변수만을 가지고 있을 때만 생략이 가능하다.

// 기존의 익명 함수
(function (a, b) {
  return a + b + 100;
});

// 화살표 함수
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// 기존의 익명 함수 (매개변수가 없음)
(function () {
  return a + b + 100;
});

// 화살표 함수 (매개변수가 없음)
() => a + b + 100;

• 중괄호는 함수가 직접 표현식을 반환하는 경우에만 생략할 수 있다.
• 본문에 추가로 처리하는 구문이 있는 경우 중괄호가 필요하며 return 문도 마찬가지이다.
• 만약 중괄호를 사용하였는데 return 문을 사용하지 않으면 return 이 없는 것으로 간주되어 undefined 가 반환된다.
• 화살표 함수는 무엇을 언제 반환할지 추측할 수 없다.

// 기존의 익명 함수
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// 화살표 함수
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

---

2. 화살표 함수는 기본적으로 선언 시 이름이 없다.

• 화살표 함수는 본질적으로 이름과 연관되지 않는다.
• 만약 화살표 함수가 스스로를 호출해야 하는 경우, 명명된 함수 표현식을 대신 사용하면 된다.
• 화살표 함수를 변수에 할당하여 이름을 지정할 수도 있다.

// 기존 함수
function bob(a) {
  return a + 100;
}

// 화살표 함수
const bob2 = (a) => a + 100;

---

3. 함수 내부

• 화살표 함수는 표현식 혹은 일반적인 블록 형태의 본문을 가질 수 있다.
• 표현식을 본문으로 사용 할 경우, 암시적 반환값이 되는 단일 표현식만 지정된다.
• 블록 본문에서는 명시적인 return 문을 사용해야 한다.

const func = (x) => x * x;
// 암시적으로 x * x을 return 값으로 반환한다.

const func2 = (x, y) => {
  return x + y;
};
// 블록 본문으로 작성하였기 때문에 return 문을 사용하여 명확하게 x + y 가 return 값임을 명시한다.

---

4. 메소드로 사용될 수 없다.

• 화살표 함수는 non-method function으로 사용되어야 한다.
• 왜냐하면 메소드는 자체적인 this를 가지고 있지 않기 때문이다.

아래 코드 예시를 보면, b 프로퍼티는 this를 사용했음에도 자체적인 this를 가지고 있지 않아 현재 객체를 가리킬 수 없다.

'use strict';

const obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c() {
    console.log(this.i, this);
  }
};

obj.b(); // logs undefined, Window { /* … */ } (or the global object)
obj.c(); // logs 10, Object { /* … */ }

---

5. 자체 arguments 객체를 가지고 있지 않다.

function foo(n) {
  	// 화살표 함수는 arguments 객체를 가지고 있지 않아, 함수 foo의 명시적 인수를 바인딩 한다.
  	// 따라서, arguments[0]의 값은 n이다.
	const f = () => arguments[0] + n;
	return f();
}

console.log(foo(3)); // 6

나머지 매개변수는 arguments 객체의 좋은 대안이 될 수 있다.

function foo(n) {
	const f = (...args) => args[0] + n;
  	// args = [10], n = 1
	return f(10);
}

foo(1); // 11

---

우선순위

• 화살표 함수 내에 있는 화살표는 연산자가 아니지만, 화살표 함수는 우선 순위를 가지고 있다.
• => 는 대부분의 연산자보다 낮은 우선순위를 갖고 있기 때문에, 괄호를 이용해 에러를 방지해야 한다.

let callback;

// 만약 이렇게 코드를 작성한다면 에러가 발생한다.
// =>의 연산자 우선순위는 ||보다 낮기 때문에, callback || () 연산을 먼저 진행하려고 하기 때문이다.
callback = callback || () => {};

// 괄호를 이용한 grouping은 가장 높은 우선순위를 가지고 있기 때문에, 화살표 함수가 먼저 실행되고 콜백함수와의 연산이 진행되게 된다.
callback = callback || (() => {});

---

📚 참고자료
MDN 화살표 함수 표현식
MDN this