[JavaScript/ES6] Arrow(화살표) 함수 - this편

안녕하세요, JERRY입니다.

 

구문 편을 포스팅 한 이후 열 흘이 지났네요. Arrow 함수의 경우엔 시리즈이기 때문에 서둘러서 포스팅했어야 했는데 어떤 이유가 있어도 전부 핑계겠지요.

 

이전 포스팅(https://bejerry.tistory.com/25)의 마지막에서 화살표 함수의 경우 this, arguments, super 또는 new.target을 바인딩하지 않는다고 말씀드렸었습니다. 이 부분에 대해서 엄청 상세히 포스팅하려고 했었는데 zerocho님께서 실행 컨텍스트를 알면 this 같은 것들은 이해가 된다고 하셔서 추후 실행 컨텍스트에 대해서 포스팅을 해서 그때 this를 상세히 다루기로 하고 현재 포스팅 중인 arrow 함수에서는 this가 어떻게 바인딩이 되지 않는지 간략히 소개만 드리려고 합니다.

 

자, 그럼 this 편을 시작해볼까요?

예제는 mdn에서 참고하였습니다.

 

바인딩되지 않는 this

function Person() {
  // 여기서의 'this'는 Person의 인스턴스로 정의합니다.
  this.age = 0;
  console.log(this); // 결과 : Person()
  
  setInterval(function growUp() {
    // growUp() 함수는 'this'를 전역 객체로 정의하고,
    // 이 'this'는 Person() 생성자의 'this'와 다름.
    this.age++;
    console.log(this === window); // 1초마다 true가 나옴.
  }, 1000);
}

var p = new Person();

 

이 코드의 결과를 아래의 사진으로 같이 확인해보실까요?

 

Person( ) 생성자의 this는 Person이라고 log에 나오고, growUp( ) 함수의 this는 window와 같다고 나온다. 그리고 age의 값은 계속 '0'이다.

 

Person( ) 생성자의 'this'와 growUp( ) 함수의 'this'가 다른 것을 알 수 있습니다. 그렇다면 Person( ) 생성자의 this가 growUp( ) 함수에 전달되게 할 수 있는 방법은 무엇이 있을까요? arrow 함수가 있지만, 그전에 변수에 할당하는 방법을 알려드리겠습니다. (mdn에서도 친절하게 소개되어 있습니다.)

 

위에 작성된 소스와 바로 아래의 소스를 비교해보세요. this를 that 변수에 담고 that을 growUp( ) 함수에서 사용했습니다.

function Person() {
  // (비전역) 변수에 할당하여 해결
  var that = this;
  that.age = 0;
  
  setInterval(function growUp() {
    that.age++;
  }, 1000);
}

var p = new Person();

 

 

이 소스의 결과도 한 번 아래의 캡처로 확인해보실까요?

 

console.log( )로 that과 this를 출력하면 둘 다 같은 Person 객체가 나온다. 그리고 age의 값은 1초마다 증감연산자(++)로 인하여 1씩 증가한다.

 

이제 생각했던 대로 1초마다 age의 값은 증감 연산자(++)로 인해 1씩 증가하고 있습니다. arrow 함수의 'this'는 새로 정의하지 않습니다. 이게 무슨 말일까? 제일 위에 작성했던 소스를 잠깐 보고 오죠. growUp( ) 함수에서의 this는 Person( ) 생성자의 this와는 달랐습니다. 'arrow 함수에서 this를 새로 정의하지 않는다'라는 말은 코드에서 바로 바깥의 함수(혹은 class)의 this값을 사용한다는 의미입니다.

 

함께 코드를 보실까요?

 

function Person() {
  this.age = 0;
  
  setInterval(() => {
    // this가 Person 객체를 참조한다.
    this.age++;
  }, 1000);
}

var p = new Person();

 

코드의 양이 줄어서 좋긴 하지만 this가 참조하는 것을 잘 고려해서 사용해야 합니다. 위의 소스의 결과를 아래의 사진으로 같이 보실까요?

 

arrow 함수 안에 this는 Person을 참조하고 있다.

 

 

이렇게 기존 function 표현식에서의 this와 arrow(화살표) 함수에서의 this가 어떻게 다르진에 대해 알아보았습니다.

 

지금까지 ES6 카테고리는 ECMAScript 6 라는 도서의 목차 순서대로 포스팅을 했습니다. 원래 그렇게 계획을 했었는데 공부하는 속도와 포스팅 속도가 맞지 않고 React 공부에 지장이 있어서, Arrow(화살표) 함수 시리즈(?)까지만 도서의 목차대로 포스팅을 하고 이후로는 React를 공부하며 필요하거나 자주 쓰이는 ES6 문법만 추려서 ES6 카테고리에 포스팅하겠습니다.

 

'필요하다', '자주 쓰인다'의 기준은 개인적인 견해가 담기겠지만 현업자들이 말한 '필요하다', '자주 쓰인다'를 기준으로 삼으려 노력할 것 입니다. 현업자라고 한다면 현재 본업으로 개발도 하면서 강의도 하고 계시는 분들도 있고, 제 주위 사람들도 있겠습니다. 확실히 일하면서 공부한다는 건 체력도 체력이지만 마인드가 항상 일정하지 않으니 언제는 불 붙어서하고 언제는 휴식이 필요해서 안하네요. 매일같이 반성합니다.

 

그럼 다음 포스팅에서 만나요 :)