화살표 함수는 언제 쓰고, 왜 쓸까?

1. 코드의 간결성을 위해

2. 콜백함수 this에 값을 참조시킬 때 (this 값에 lexical scope를 참조시킬 때)

3. map 사용할 때 this를 넘겨주어 코드를 더 쉽게 작성 가능

화살표 함수 vs 일반 함수

• 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.
• 중복된 매개변수 이름을 선언할 수 없다.
• 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

자바스크립트에서 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정된다.

즉, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 결정된다.

반면, 화살표 함수에서는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.(화살표 함수와 일반 함수의 가장 큰 차이점은 this라는 소리!!!)

일반 함수와 달리 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라고 한다.

this를 바인딩할 때 화살표 함수를 쓰는 이유?

let obj = {
  myVar: 'foo',
  
  myFunc: function() { 
    console.log(this.myVar)   
 
    setTimeout(function() {
      console.log(this.myVar)
    }, 1000)
  }
}
obj.myFunc() // foo ... then... undefined

상단의 콜백함수는 undefined를 출력하고 있다.
콜백함수(setTimeout) 내부의 this는 전역 객체 window를 가리킨다.
myVar 프로퍼티는 window가 아니라 obj의 프로퍼티이기 때문에 오류가 발생한 것이다.

이를 해결하기 위한 3가지 방법(화살표 함수 포함)

1. this를 변수에 할당

let obj = {
  myVar: 'foo',
  
  myFunc: function() { 
    let self = this
    console.log(this.myVar)  
  
    setTimeout(function() {
      console.log(self.myVar)
    }, 1000)
  }
}
obj.myFunc() // foo ... then... foo

2. bind,call,apply를 활용

let obj = {
  myVar: 'foo',
  
  myFunc: function() { 
    console.log(this.myVar)  
  
    setTimeout(function() {
      console.log(this.myVar)
    }.bind(this), 1000)
  }
}
obj.myFunc() // foo ... then... foo

3. 화살표 함수 사용

let obj = {
  myVar: 'foo',
  
  myFunc: function() { 
    console.log(this.myVar)  
  
    setTimeout(() => {
      console.log(this.myVar)
    }, 1000)
  }
}
obj.myFunc() // foo ... then... foo

정리

콜백함수 내부의 this문제를 화살표 함수를 쓰면 편리하게 해결 가능!

출처: https://hsp0418.tistory.com/148, https://tooo1.tistory.com/561