화살표 함수

화살표 함수가 기존 function 과 다른 점:

1. 사용 용도: 주로 함수를 parameter 로 전달할 때
2. 왜 사용 용도가 다르냐?: this keyword 가 가르키는 대상이 다르다.

예시

function Black_White_dog() {
  this.name = 'WhiteDog'
  return {
    name: 'BlackDog',
    blackbark: function() {	// 일반 함수
      console.log(this.name + '멍멍!');
    },
  	whitebark: () => { // 화살표 함수
      console.log(this.name + '멍멍!');
    }
  }
const dog = new Black_White_dog();
dog.blackbark(); // BlackDog 멍멍!
dog.whitebark(); // WhiteDog 멍멍!

//<리액트를 다루는 기술 p.089>

Black_White_dog 의 return type 은 아래와 같이 구성된 object이다.

{name: string, 
blackbark: regular function, 
whitebark: arrow function}

원래 프로그래밍 언어대로 처리하면 XXbark member function 내에서 쓰인 this keyword는 return object, 즉 자신이 종속된 객체를 가르켜야 함. 그런데 화살표 함수는 이걸 무시한다. 화살표 함수에서의 this 는 무조건 생성자 함수로 생성된 instance를 가르킨다.

화살표 함수 표현식 MDN

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
}

---

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