[Javascript] 자바스크립트에서의 This

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다.

 

https://medium.com/@mrando.via/que-es-this-en-javascript-8cf67daaa16d

 

Q. Explain how 'this' works in JavaScript.

 

A.

자바스크립트에서 사용되는 this는 확실히 자바와 같은 다른 OOP 언어들과는 다른 감이 있습니다. 일반적인 OOP 언어와는 다르게 자바스크립트의 this는 해당 this가 어떤 맥락(Context)에서 호출되었는지에 따라 바인딩되는 대상이 다릅니다. 그리고 이것은 자바스크립트 인터프리터가 자바스크립트 코드를 실행시키면서 만드는 실행 컨텍스트(Execution Context)와 밀접한 관련이 있습니다.

 

 

자바스크립트의 실행컨텍스트는 특정한 함수가 호출될 때 해당 함수가 실행되는 환경을 객체 형태로 저장합니다. 이때 저장하는 것이 VO (Variable Object), SC (Scope Chain), This 입니다. 

 

 

스코프 체인은 해당 함수가 어떤 환경에서 실행되었는지에 대한 정보를 리스트의 형태로 저장하고 있습니다. 따라서  똑같은 함수를 실행해도 어떤 환경에서 호출되었는지에 따라 해당 함수의 실행컨텍스트에 존재하는 스코프 체인은 다릅니다. 

 

해당 함수에서 This를 호출하면, 자바스크립트는 우선 그 함수의 Scope 내에 this가 참조하는 값이 있는지를 확인합니다. 해당 Scope내에 값이 존재하면 그 값을 사용하고, 그렇지 않으면 scope chain이 참조하는 다음 리스트의 컨텍스트로 넘어가서 (부모 환경) this가 참조하는 값이 있는지를 확인합니다. 이렇게 scope chain을 따라가면서 값을 찾고, 값이 없으면 undefined를 반환합니다. this는 이렇게 바인딩됩니다.  

 

 

Q. Can you give an example of one of the ways that working with this has changed in ES6?

A.

 

ES6문법 중 눈여겨 볼만한 변화는 arrow function(화살표 함수)의 등장입니다. 화살표 함수는 일반적인 함수와 비슷하지만 클로저의 기능을 같이 수행하고 있습니다. 화살표 함수가 갖틑 중요한 특징중의 하나는, 생성시에 함수가 참조하는 this의 값을 고정해준다는 것입니다.

 

따라서 다음과 같은 두 함수 선언은 비슷해 보이지만 큰 차이점을 갖습니다. 

foo함수는 해당 함수가 실행되는 상황에 따라 참조하는 this값에 차이가 있지만, bar는 어디서 실행되든지 생성되는 바로 그 순간에 this값이 고정됩니다. 

function foo() {
  doSomething();  
}

const bar = () => {
  doSomethingElse();
}