실행컨텍스트-클로저-호이스팅

2023-05-16

실행 컨텍스트

실행 컨텍스트는 자바스크립트가 실행될 수 있는 환경 정보를 모아놓은 객체이다

아래 후술할 실행 컨텍스트의 생성 조건을 만족하면 콜스택에 쌓이게 되며

후입선출(LIFO) 방식으로 컨텍스트를 수행 한다

이 실행 컨텍스트를 이해 함으로써 자바스크립트의 scope와 클로저, 호이스팅에 대해 이해 할 수 있게 된다.

종류

전역 컨텍스트

자바스크립트 코드가 최초로 실행될 때 생성되는 컨텍스트로

컨텍스트 객체 안에는 전역 변수, 함수에 관한 정보와

this의 관한 정보

그리고 scope chain(전역 컨텍스트이기에 전역 변수를 가르키는) 에 관한 정보가 들어가게 된다

이중 this의 경우 특별한 설정을 해주지 않는 이상 무조건 window를 가르키게 되는데

함수와 같은경우도 마찬가지여서 함수안에서의 this 또한 window를 가르킨다

전역 컨텍스트 생성후 코드를 실행한다

함수 컨텍스트

함수 컨텍스트는 함수가 실행되었을때 생성된다

변수는 지역변수를 가르키며

scope chain은 자기 자신의 변수를 시작으로 전역까지의 scope chain을 가지고있다

이 scope chain은 함수가 실행된곳 기준이 아닌 함수가 선언된곳을 기준으로 scope chain이 만들어진다 이러한 scope 정의 방식을 lexical scope 라 한다

함수 컨텍스트 또한 콜스텍에 쌓이게 되기에 함수 실행이 완료되면 늦게 실행된 순서(LFIO)대로 콜스택을 빠져 나오게 된다

호이스팅

전역 컨텍스트는 코드가 실행되기 전에 먼저 만들어지며 그 안에 함수,변수에 관한 정보를 담고있다따라서 자바스크립트 엔진은 코드가 실행되기 전에 이미 변수에 대한 정보를 가지고 있다는 의미이며 그렇기에 이러한 기능을 hoisting(끌어 올리다)라는 의미를 부여하게 된것이다

let, const의 경우 호이스팅될때 var와 달리 undefined로 미리 정의 되지않는다

클로저

MDN에서는 클로저를 이렇게 정의한다 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

간단히 말하면 부모 함수의 변수에 접근 할 수 있는 자식 함수 라고 생각하면 된다

다음의 코드를 보자

위 코드는 전역 → foo → bar 순으로 컨텍스트가 생성되며

scope chain은 함수가 선언될때 정해기지에

foo의 scope chain은 자기자신 → 전역 순서대로 형성되고

bar 함수의 scope chain은 자기자신→foo→전역 순서대로 형성된다

그렇기에 bar 함수는 foo 함수의 변수 name에 접근할 수 있게 되는것이며

이와 같은 형태를 한 것을 클로저라고 부른다