일반 함수와 화살표 함수의 this

#JavaScript, ES6 

 

프로젝트를 하다보면, 가끔 예상하는 this의 값과 전혀 다른 값을 불러오는 경우가 있다. 

예를 들면, window를 바라보게 this를 썼는데 특정 객체나 함수를 본다던가, 

특정 객체나 함수를 바라보도록 this를 썼는데 window를 바라본다던가의 문제로 헤맬 때가 있었다. 

 

this를 어디서 부르는지의 차이도 있지만, 일반 함수와 화살표 함수의 this는 다르기 때문에 이를 정리하고자 한다.

 

function func() {
  return console.log(this);
}

const obg = {
  text: "1234",
  testFunc: func,
};

 

우선 일반 함수를 작성해봤다. 이 상태에서 obg.testFunc() 을 실행하면 나오는 this는 어디일까? 

 

위 코드에서는 호출한 주체를 바라보게된다. 결과는 아래와 같다.

 

func() 만 호출하게 된다면, this는 windows를 보게된다.

 

조금 더 이해가 쉽도록 중첩을 해보면 어떨까? 

 

const obg = {
  text: "1234",
  testFunc: func,
  nestFunc: {
    text: '2345',
    testNest: function tert() {
      console.log(this);
    },
  }
};

 

obg.nestFunc.testNest(); 을 호출하면, 마찬가지로 호출의 주체인 nestFunc이 this가 된다.

 

 

 

이제 화살표 함수를 테스트해보자. 

const arrowFunc = () => {
  return console.log(this);
}

const obg = {
  text: "1234",
  testFunc: arrowFunc,
  nestFunc: {
    text: '2345',
    testNest: () => {
      console.log(this);
    },
  }
};

 

obg.testFunc() 과 obg.nestFunc.testNest() 을 했을 때 결과가 어떻게 나올까? 

 

 

둘 다 window를 본다. 분명 화살표 차이만 있고 같은 function이라고 생각할 수 있는 코드인데, 

결과가 다르다. 

 

MDN 문서를 보면 아래와 같이 작성되어있다.

 

화살표 함수는 전역 컨텍스트에서 실행될 때 this를 새로 정의하지 않습니다. 대신 코드에서 바로 바깥의 함수(혹은 class)의 this값이 사용됩니다. 이것은 this를 클로저 값으로 처리하는 것과 같습니다. .

 

 

화살표 함수는 메서드로 사용하면 좋지 않다고 한다. 그 이유는 위의 예제와 같이, 자신의 this를 가지고 있지 않기 때문에, 예상과 다른 결과가 나오게 된다. 

 

그렇다면, 언제 화살표 함수를 써야 좋을까? 다음 공부 내용은 적절한 화살표 함수의 사용 환경이다.