[JS] 화살표함수(Arrow Function)와 this

 

 

this

 

 

this는 Javascript에서 함수의 실행 컨텍스트 내에서 참조하는 객체를 나타내는 키워드이다. 호출방식에 따라 동적으로 결정될 수 도 있고, 정적으로 결정해 놓을 수도 있다. 개발자가 의도한 대로 사용하기 위해 화살표함수, 메서드 등을 활용할 수 있다.

this를 올바르게 이해하고 작성하면 코드의 가독성을 높일 수 있고 버그를 줄일 수 있다.

 

 

일반함수(function)에서의 this

 

 

화살표 함수 이전에는 함수를 정의할 때, function 키워드를 사용하며 작성한다. 일반함수에서의 this값은 호출하는 방법에 따라 동적으로 결정된다.

 

 

 

1. 메서드로 호출되는 경우 : 메소드 내에서 'this'는 해당 메서드를 호출한 객체를 가리킨다.

const obj = {
    myMethod: function() {
        console.log(this);
    }
};

obj.myMethod(); // obj 객체

 

 

  2. 일반함수로 호출되는 경우 : 일반 함수 내에서 this는 전역객체(window)를 가리킬 수 있다. (use strict 모드를 사용하면 undefined라고 한다.)

function myFunction() {
    console.log(this);
}

myFunction(); // 전역 객체(window)

 

 

  3. 생성자 함수로 호출된느 경우 : 생성자 함수로 호출될 때, this는 새로 생성되는 객체를 가리킨다.

function MyClass() {
    console.log(this);
}

const instance = new MyClass(); // MyClass 인스턴스

 

 

  4. apply(), call(), bind() 등 메서드로 this를 명시적으로 지정할 수 있다.

function myFunction() {
    console.log(this);
}

const contextObj = { name: "Context Object" };

myFunction.call(contextObj); // contextObj 객체

 

 

화살표 함수(Arrow Function)

 

 

화살표 함수는 함수를 더 간결하게 정의할 수 있게 만들어졌다. 기존 함수와 다르게 자신만의 'this'를 갖지 않는다는 것이 특징이다. 기존 함수 내부 스코프에서 this는 함수를 호출하는 방법에 따라 결정된다. 호출하는 방법에 따라 결정된다는 말은 호출되는 시점에 따라 동적으로 결정될 수 있다는 말과 같다. 일반함수 내에서 this는 호출한 객체나 전역객체(window)를 가리킬 수 있다. 이로 인해 this가 의도와 다르게 동작할 수 있다.

 

 

const obj = {
  value: 42,
  getValue: function() {
    setTimeout(() => {
      console.log(this.value); // 'this'는 obj 객체를 가리킨다.
    }, 1000);
  }
};

obj.getValue();

위와 같이 화살표 함수를 사용하면 this를 자신만의 컨텍스트를 가지지 않는다. 외부 스코프의 this를 상속받기 때문이다. 화살표 함수를 사용하면 this는 정적으로 obj를 가리키도록 결정된다. 함수를 선언한 시점의 상위 스코프의 'this'를 가리키기 때문에 obj객체를 가리키게 되는 것이다.

따라서 화살표 함수를 사용하면 함수 내에서 this를 사용할 때와 외부함수 또는 메소드에서 this를 사용할때 동일한 값을 가지게 되어 혼란을 줄일 수 있다.