[KUIT] 실행 컨텍스트와 this, 클로저, 호이스팅

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.

---

이번 주부터 저희는 JavaScript에 대해서 배우게 됩니다! 강의 도중에 실행 컨텍스트라는 개념에 대해서 배우게 되는데요. 이와 관련해서 좋은 글을 발견해서 같이 공유하려 합니다.

글 링크 : https://velog.io/@hyumapr/JavaScript-Sean103024

JavaScript의 핵심 원리 탐구: 실행 컨텍스트관점으로 보는 클로저, this, 그리고 호이스팅

 

 

어제 쓰여진 따끈따끈한 글인데요.

이 글에서는 this 바인딩, 클로저, 호이스팅이 무엇인지 알려주고 이 개념들과 실행 컨텍스트의 연관성에 대하여 설명해줍니다.

 

 

링크 들어가시기 전에 글에 대한 이해를 돕기 위하여 각각의 개념에 대해 짧은 설명도 남겨 놓겠습니다. (물론 위 링크에서도 각 개념에 대해 알려주니 바로 들어가서 읽으셔도 좋습니다!)

 

---

실행 컨텍스트

→ 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 됩니다.

 

(출처: https://blog.gamguma.dev/post/2022/04/js_execution_context)

JS Execution Context (실행 컨텍스트) 란? | 감구마 개발블로그

 

---

this

→ 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻함.

→ 선언이 아닌 호출에 따라 달라진다는 뜻!

1. 단독으로 쓴 this → global object
2. 함수 안에서 쓴 this → window(함수의 주인에게 바인딩) -> strict mode에서는 undefined! (use strict를 썼을 때)
3. 메서드 안에서 쓴 this → 해당 메서드를 호출한 객체
4. 이벤트 핸들러안에서 this → 이벤트를 받는 HTML
5. 생성자 → 생성자 함수가 생성하는 객체
6. 명시적 바인딩을 한 this → apply()와 call() 메서드 활용
7. 화살표 함수에서 쓴 this → 전역 컨텍스트에서 실행되더라도 this를 새로 정의하지 않고, 바로 바깥 함수나 클래스의 this를 활용

출처: https://nykim.work/71

[JS] 자바스크립트에서의 this

(왠만하면 위 링크로 들어가서 한 번 읽어보시는 것을 추천합니다! JavaScript에서 this에 대해서 쉽게 알 수 있습니다. 너무 좋은 글…)

---

클로저

함수가 선언될(생성될) 그 당시에 주변의 환경과 함께 갇히는 것

→ 함수가 속한 렉시컬 스코프(Lexical Environment)를 기억하여, 함수가 렉시컬 스코프 밖에서 실행될 때도 이 스코프에 접근할 수 있게 해주는 기능

 

렉시컬 스코프: 함수가 선언이 되는 위치에 따라서 상위 스코프가 결정되는 스코프

 

더 쉬운 설명 → 내부함수는 외부함수의 지역변수에 접근할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는 것

 

출처: https://blacklobster.tistory.com/7

쉬운 설명! 사례와 함께 보는 자바스크립트의 클로저(Closure)란?

(위 링크도 들어가서 한 번 읽어보시는 것을 추천합니다)

 

---

호이스팅

인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상

(출처: https://developer.mozilla.org/ko/docs/Glossary/Hoisting)

 

더 쉬운 설명: 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상

 

자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.

 

→ 코드 실행 전 이미 변수선언/함수선언 이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다

 

var 키워드로 선언된 변수와는 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생

→ let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 *일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문!

 

출처: https://hanamon.kr/javascript-호이스팅이란-hoisting/

(위 링크 들어갔더니 호이스팅이 이해가 됐어요! 위 링크도 읽어보시는 거 추천…)

 

---

 

자바스크립트는 정말 파면 팔 수록 알아야될 게 더 많은 것 같아요 ㅎㅎ

남은 주말 잘 보내시고 워크북, 미션 파이팅해주세요!