Arrow Function, function() 의 this 차이 예제 코드

화살표 함수 사용시 일반 function 선언문과 this 사용시 차이를 알고 있어야 한다.

항상 헷갈리는 부분이다. 그래서 간단하게라도 참고용 예제 코드를 작성하였다.

 

화살표 함수(Arrow Function)

const obj = {
  prefix: 'hello~ ',
  arr: ['sherlock', 'mina', 'lily'],
  test() {
    this.arr.forEach(value => {
      console.log(this.prefix, value); // 상위 this를 가리킨다.
    });
  }
};

// > obj.test();
// hello~  sherlock
// hello~  mina
// hello~  lily

화살표 함수의 this 는 상위 this 를 가리킨다. (obj 를 가리킨다.)

 

일반 함수(Function)

const obj = {
  prefix: 'hello~ ',
  arr: ['sherlock', 'mina', 'lily'],
  test() {
    this.arr.forEach(function(value) {
      console.log(this.prefix, value); // window or global 를 가리킨다.
    });
  }
}

// > obj.test();
// undefined "sherlock"
// undefined "mina"
// undefined "lily"

기존 일반함수에서는 obj 를 가리키지 않고 window 또는 node js 에서는 global 를 가리킨다.