2023.04.10 TIL - 화살표 함수와 this 바인딩

[Problem]

JavaScript에서 함수를 선언할 땐 function이란 키워드를 쓴다. ES6가 도입되면서 함수를 선언하는 새로운 문법인 화살표 함수가 적용되었다. 화살표 함수는 (=>)을 이용해서 함수를 선언한다.

const ex1 = function () {
    console.log('기본 함수 선언')
}

const ex2 = () => console.log('화살표 함수를 이용한 함수 선언')

ex1()   // '기본 함수 선언' 출력
ex2()   // '화살표 함수를 이용한 함수 선언' 출력

화살표 함수를 구글링하고 학습하면서 한 개의 궁금증이 생겼다. 왜 화살표 함수는 보통 함수에서 사용하는 this 바인딩이 불가능 할까?

 

[Try]

화살표 함수에서 this를 적용이 안 되는 것을 먼저 생각하기 보다 this와 화살표 함수의 정확한 내용을 파악을 하는게 중요하다 생각했다.

 

<this란?>

일단 모든 'function'이라는 키워드로 생성된 함수는 this를 적용할 수 있다. this의 값은 this가 사용된 함수가 어떤 방식으로 호출되었는지가 중요하다. 선언된 부분만을 보고 this가 무엇을 가리키는 지는 알기 어렵다.

 

@ 전역 범위(Global context)

==> JavaScript에서 일반적으로 this를 홀출한다면, this는 window라는 전역 객체를 가르킨다.

console.log(this)		// {}

Window 객체라는 것은, 현재 실행되고 있는 JavaScript의 모든 변수, 함수, 객체, DOM 등을 포함하고 있는 객체이다.

 

@ 함수 범위(Function)

==> this를 함수 내에서 호출한다면 현재 실행되고 있는 코드의 문맥(Context)에 따라 this가 달라진다. 

  ① 단순 함수 호출 - 함수를 선언한 후 호출하는 경우, this는 Window 객체, 함수 안에서 함수를 선언하더라도 this는 연전히 Window다.

  ② 객체의 메소드(Method) - 객체(Object)나 클래스 내부에 선언된 메소드 함수. 함수를 어떤 객체의 메소드로 호출하면 this의 값은 그 객체를 사용. 함수를 객체 외부에서 선언하고 객체 안에서 호출하는 경우, this는 해당 객체의 this를 참조한다.  객체의 함수를 외부에서 호출할 때 this는 Window가 된다. 

여기서 메소드에서 내부 함수를 선언하는 경우 this는 Window객체를 가르키고 있다. 내부 함수는 메소드가 아니기 때문에, 단순 함수 호출 규칙에 따라 Window를 가르키고 있다.

 

<화살표 함수(Arrow function)>

화살표 함수는 ES6에서 새로 추가된 함수를 축약해서 사용할 수 있는 문법

But 함수를 축약해서 사용하는 것 뿐만이 아니라 this를 외부 스코프에서 정적으로 바인딩된 문맥(Lexical context)를 가진다. 즉, 소스코드가 작성된 그 문맥의 실행 컨텍스트나 호출 컨텍스트에 의해 결정된다. 컨텍스트는 자바스크립트 코드를 실행하기 위한 변수, 함수 등의 정보를 담고 있는 환경이다. 따라서 Lexical context는 함수가 실행된 위치가 아닌, 정의(defined)된 위치에서의 컨텍스트를 참조한다. 

 

[Solution]

위에 화살표 함수와 this의 개념을 정리하면 함수를 선언(function() {})하면, 일반적인 함수는 함수가 실행될 때 자체적으로 this를 할당하게 된다. 이렇게 된 함수는 메소드 함수이므로 this가 메소드를 포함하는 객체로 바인딩된다. But 화살표 함수는 this가 없기 때문에, 부모 스코프의 this를 바인딩한다. 즉, Window객체를 의미한다. 따라서 메소드로 화살표 함수를 쓰게 될 경우 this를 이용한 부모 객체에 접근은 불가능하다.

 

[Conclusion]

JavaScript는 다른 언어와 다르게 함수 내부에서 this를 사용하는 경우에 따라 값이 바뀔 수있다. 따라서 this를 사용할 때 this를 어느 객체에서 사용하고 있는지를 판단하는 게 중요하다 생각된다. 쉽게 판단하기 어려울 경우 필요한 위치 앞에서 콘솔을 통해 알아보는 방법이 제일 쉬운 방법으로 보인다.

현재 내용을 정리하자면 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this는 언제나 상위 스코프의 this를 가르킨다. 따라서 따로 this를 바인딩할 수 없는 것이다.