this[0]

this, 이것

 

JS에서 this는 중요하다. 그리고 복잡하다. 지금까지 공부한 것을 정리하기 위해 글을 쓰지만, 아직 모르는 부분이 많은 것 같다. 

 

우선 this를 쉽게 정리하면 "나를 불러온 객체가 이것이다"를 의미한다. 그러니까 this는 누가, 어떤 상황에서 불렀느냐에 따라 달라지는데 이때문에 헛갈리기 시작한다.

 

상황에 따라 달라진다는 것을 다음 두 상황에서 확인할 수 있다. 

① 브라우저에서 this를 출력했을때와 ② node에서 this 출력했을때를 비교해보자.

 

① 브라우저에서 this를 출력했을때 v.s. ② node.js에서 this를 출력했을 때

 

위에서 보듯, 브라우저에서 출력한 this는 window라는 객체를 보여주고, node로 실행한 this는 빈 객체인 {}를 반환했다. 어떤 상황이냐에 따라 달라진다는 것은, 누가 나를 불러냈냐에 따라 다른데, 전역문맥이 다르기 때문이다. 전역 문맥은 또 실행 문맥(Excution Context)에 대해서 정리할 때 자세히 다뤄 볼 예정이고, 지금은 궁금하다면 여기를 살펴보면 좋다. 

 

그럼, 어떤 함수 안에서 this를 출력하게 하고, 함수를 호출한다면?

 

이번에는 node 전역 문맥에 대한 정보가 출력이 되었다. 사실 원래 node도 처음에 this로 호출했을 때 나왔어야 하는데, 그냥 this로는 나오지 않았던 전역 객체가 함수로 출력했을 때 나온 것. 그러니까 브라우저의 전역객체인 window처럼 node.js의 전역객체가 출력된 것이다. (이렇게 브라우저나 인터프리터에 따라 다른 전역객체를 통일하려고 globalThis라고 통일해서 쓴다고 한다.)

 

객체에 담아서 함수를 호출하면?

 

 

호출한 객체를 반환해준다. 그러니까 console.log(this)를 수행하는 함수 someFunction은 어디서 호출되느냐에 따라 this가 달라진다는 뜻. 전역에서의 this는 전역 객체, 위 예시에서 obj에서 호출한 this는 obj를 반환한다.

 

객체에 객체에 객체에서 this를 부르면 어떻게 될까?

 

 

예상할 수 있듯, 결국 호출한 그 객체를 가리킨다. 화살표가 복잡하네...

 

어떤 상황이냐, 누가 불러왔냐에 따라 달라지는 this. 지금까지 이해한 바를 정리했고,

조금 더 복잡한 상황에서 this가 어떻게 바뀌는지에 대해 다른 글로 정리해봐야겠다.