【 Chapter 01. 컨텍스트(Context) 】
"왜 함수 선언문에서 this는 전역변수를 가리킬까?"에 대한 해답을 찾기에 앞서,
자바 스크립트를 하다가 컨텍스트(Context)라는 말을 들어보신 적이 있나요?
아마 들어보신 분도 계실테고, 이 블로그를 통해 처음 알게된 분들도 계실겁니다.
자바 스크립트에서 컨텍스트(Context)라는 말은 쉽게 "코드의 실행 환경"을 뜻합니다!
이 말이 어려운 분들도 있을 것 같아, 제가 더 쉽게 예를 들어 설명 해볼게요😊
예를 들어 우리가 자바 스크립트 코드를 작성했다고 가정해봅시다.
그러면 이 완성된 코드를 사용하기위해 우리는 무엇을 하나요? (실행!! 속닥속닥..)
맞습니다, 완성된 코드를 가지고 "실행"을 하게 됩니다.
이때 자바 스크트뿐만 아니라 다른 프로그래밍 언어들에서는 코드를 실행 하기 위해 "환경"이라는 것을 사용하게 됩니다. 그래서 자바 스크립트로 짠 "코드를 실행하기 위한 환경"을 우린 컨텍스트(Context)라고 약속하고, 부르게 된겁니다.
【 Chapter 02. 전역 컨텍스트(Global Context) & 함수 컨텍스트(Function Context) 】
이번에 이어서 배워볼 내용은 전역 컨텍스트(Global Context)와 함수 컨텍스트(Function Context)입니다.
우리가 자바 스크립트에서 처음 코드를 실행할 때 가장 먼저 생성되는 컨텍스트(Context)가 있습니다. 바로 전역 컨텍스트(Global Context)입니다!
그럼 함수 컨텍스트(Function Context)는 무엇일까요?
함수 컨텍스트는 단어 그대로 "함수 코드를 실행하기 위한 환경"이라는 뜻입니다!
🤗지금까지 우리는 컨텍스를 시작으로 전역 컨텍스트와 함수 컨텍스트까지 간단하게 알아 보았습니다. 그러면 여기서 멈추지 말고 더 들어가 볼까요??
【 Chapter 03. 컨텍스트(Context) 작동 순서 】
Chapter 03에서 배워볼 내용은 컨텍스트의 작동 원리입니다.
정확히는 전역 컨텍스트(Global Context)와 함수 컨텍스트(Function Context)의 작동 순서에 대해서 알아볼 겁니다!
우리는 방금 전 전역 컨텍스트(Global Context)가 가장 먼저 생성된다는 것을 알았습니다. 그러면 함수 컨텍스트(Function Context)는 언제 생성될까요??
(함수를 호출했다고 가정하고 한 번 알아봅시다!)
일단 제일 먼저 자바 스크립트에서 코드를 짭니다.
코드가 완성되면, 이를 사용하기 위해 실행을 합니다.
이때, 자바 스크립트에서 처음 코드를 실행할 때 가장 먼저 생성되는 컨텍스트인 전역 컨텍스트(Global Context)가 생성이 되게 됩니다.
전역 컨텍스트 생성이 완료되면, 함수 호출이 있는지 확인합니다.
함수 호출이 있기 때문에 함수 컨텍스트(Function Context)가 생성이 됩니다. (함수 호출마다 컨텍스트가 생성됨.)
컨텍스트 생성시 그 안에는 변수객체(arguments, variable), scope chain(Context안의 변수들 체크), this가 같이 생성이 되게 됩니다.
컨텍스트 생성이 완료되면 함수가 실행되게 됩니다.
함수 실행이 마무리 되면, 해당 컨텍스트는 사라지게 됩니다.
▶ (참고) 컨텍스트(Context)는 환경을 만드는 것뿐만 아니라 변수 or 함수도 관리합니다!
【 Chapter 04. this 】
( 자 이제 마지막으로 this까지 배우면, 우리는 이 글의 주제인 "Why does this refer to the global variable in the function declaration?"에 대한 해답을 찾을 수 있게 됩니다. 조금만 힘내봅시다!)
자바 스크립트에서 this를 사용하는 이유가 무엇일까요?
바로 "function을 class처럼 사용하기 위해서" 입니다.
this는 calling object를 값으로 가지는 특징이 있습니다.
* calling object = 메서드(함수)가 속해있는 객체
즉, 쉽게 말하면 "this는 나 자신을 가리키는" 특징이 있습니다.
【 Chapter 05. Solution(해결) 】
이제 "왜 함수 선언문에서 this는 전역변수를 가리킬까?"에 대한 해답을 찾으러 가봅시다!
우리는 방금전 this는 나 자신을 가리키는 특징이 있다는 것을 알았습니다!
그렇다면 아까 배운 컨텍스트(Context)개념이랑 연결해서 더 확장해서 생각해봅시다.
this가 나 자신을 가리킨다라는 말은 어떻게 보면 나의 실행 컨텍스트(실행을 위한 공간)를 가리킨다는 말과 통용됨을 우리는 알 수 있습니다. 때문에 this는 함수 컨텍스트를 가리키게 됩니다.(이게 당연한거고요 😊!)
하지만, 결과는 전역 컨텍스트의 전역 객체(변수)를 가리키게 됩니다. (엥?? 어떻게 된걸까요??)
그 이유는 바로 우리가 따로 this를 설정해주지 않았기 때문입니다.
이 말이 어려운 분들이 있을 것 같아 다시 쉽게 설명해 볼게요!
Chapter03에서 컨텍스트를 생성할 때 변수객체(arguments, variable), scope chain, this가 함께 생성된다고 배웠었습니다. 그런데 이때 작동 순서를 다시 체크해보게 되면 제일 먼저 전역 컨텍스트(Global Context)가 생성이 되게 됩니다.
전역 컨텍스트를 생성하는 중에는 당연히 변수객체(arguments, variable), scope chain, this가 함께 생성이 되고요..!
후에 전역 컨텍스트 생성이 완료가 되면 함수 컨텍스트(Function Context)가 뒤를 이어 자연스레 생성이 되게 됩니다. (함수 컨텍스트도 컨텍스트이기 때문에 생성 중에 변수객체(arguments, variable), scope chain, this가 생성됩니다!)
이때 this만 따로 가져와서 다시 보게 되면, this는 전역 컨텍스트에 1개, 함수 컨텍스트에 1개가 각각 생성된 것을 알 수 있습니다!
여기서 이제 문제가 발생하게 됩니다.
함수 컨텍스트 내에 this를, 함수 내 변수를 가리키도록 지정하지 않게 돼버립니다.
그러면 this는 자연스레 함수 컨텍스트보다 먼저 생성된 전역 컨텍스트 내의 this 값을 똑같이 가리키도록 지정이 되어버립니다.
결국 정리하면, 함수 컨텍스트 내에 this를 함수 내 변수를 가리키도록 지정하지 않으면, 상위 컨텍스트에 해당하는 전역 컨텍스트 내 this가 가리키는 전역 객체(변수)를 가리키게 돼버립니다.
때문에 함수 선언문에서 this가 전역 변수를 가리키게 되는 것입니다.
【 Chapter 06. Finish 】
교수님을 통해 생긴 호기심을 토대로 어제, 오늘 열심히 찾아서 블로그에 작성해보았는데요! 오늘 이 블로그를 통해 궁금하셨던 모든 분들이 해결되셨기를 바라며 글을 마무리 지어봅니다!
참고로 아래 링크는 제가 참고한 블로그들인데요! 조금 더 자세히 알아보고 싶으신 분들은 참고하시길 바랍니다!
오늘도 즐거운 코딩하세요!😍
링크 1) https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work (출처 : stackoverflow)
링크 2) https://blog.naver.com/z1004man/222003944348 (출처 : 타오르는지천사)
링크 3) https://velog.io/@jgam/Execution-Context%EB%9E%80 (출처 : 콜라제로)
링크 4) https://goddaehee.tistory.com/228 (출처 : 갓대희의 작은 공간)
ps) 제가 잘못 이해한 부분이 있을 수 있으니, 잘못된 부분은 댓글에 남겨주시면 감사하겠습니다😊
[ Thinking or Problem ]
- JavaScript를 시작한지 얼마 안돼서 이해하는데 오래 걸렸다😭..!
[ Solution ]
- JavaScript 내 컨텍스트의 작동 순서와 함수 내 this를 사용했을때 왜 전역 객체(변수)를 출력하는지에 대해 알게 되어 좋았다!
