일반 함수와 화살표 함수 차이

this 바인딩 차이
여기서 바인딩은 함수 내부의 this 키워드가 어떤 객체를 참조할지 결정하는 것인데, JS에서 this의 값은 함수가 어떻게 호출되었는지에 따라 달라짐

일반 함수에선 자신만의 this를 가지고, this의 값은 함수가 어떻게 호출되었는지에 따라 결정

화살표함수에선 자신만의 this가 없고, 화살표 함수 내의 this는 함수가 정의된 곳의 외부 범위에 상속됨

// 일반 함수 예제
const person = {
  name: '홍길동',
  sayNameWithTimeout: function() {
    setTimeout(function() {
      console.log(this.name); // undefined (this는 window 객체를 가리킴)
    }, 100);
  }
};

// 화살표 함수 예제
const person2 = {
  name: '홍길동',
  sayNameWithTimeout: function() {
    setTimeout(() => {
      console.log(this.name); // '홍길동' (this는 person2 객체를 가리킴)
    }, 100);
  }
};

일반 함수에서 this는 전역 객체인 window를 가리켜서 undefined 화살표 함수는 바로 위 객체를 가리켜서 홍길동을 가리킴

// ES6+ 코드
const obj = {
  value: 42,
  getValue: function() {
    return () => this.value;
  }
};

// 바벨로 트랜스파일된 ES5 코드
"use strict";

var obj = {
  value: 42,
  getValue: function getValue() {
    var _this = this;
    return function() {
      return _this.value;
    };
  }
};

그리고 트랜스파일 예시를 보면 일반 함수에서는 _this라는 변수를 따로 추가적으로 생성해서 외부의 스코프의 this를 저장하는 방식을 택했다.