[ES6] function 함수와 화살표 함수의 차이 - JavaScript

function으로 만들어진 함수의 this는 자신이 포함된 객체를 가리킨다.

function BlackDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이';
    bark: function() {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const blackDog = new BlackDog();
blackDog.bark(); // 검둥이 : 멍멍

json 객체가 상위 객체로 있기 때문이다.

화살표 함수의 경우는 이렇다 :

function WhiteDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이';
    bark: () => {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const whiteDog = new WhiteDog();
whiteDog.bark(); // 흰둥이 : 멍멍

new로 생성된 최상위의 인스턴스(new로 생성된)를 this로써 가리키기 때문이다.

 

썸넬

 

23.11.30

이게 어디서 주로 이용되는지를 살펴보았는데, 주로 React코드 Event를 만들 때 function + .bind(this)를 쓰기 보다는 화살표 함수를 이용해서 간결한 코딩을 하는데 이용되는 듯 하다.