[JavaScript] 실행 컨텍스트

실행컨텍스트

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

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

 

이때 콜스택은 FILO(First In Last Out)구조이기 때문에 순서를 보장, 콜스택에 내부에 쌓인 실행컨텍스트의 정보를통해 환경을 보장한다.

 

실행컨텍스트의 구성

VariableEnvironment(V.E) 

현재 컨텍스트내의 식별자들의 정보 + 외부환경정보 선언시점의 LexicalEnvironment의 스냅샷으로, 변경사항 반영 X

environmentRecord : 내부 식별자 정보 저장

outerEnvironmentReference : 외부 환경정보 저장

LexicalEnvironment(L.E)

V.E와 내부 구성은 동일하지만 변경사항이 실시간으로 적용된다 => 최신상태저장

 

environmentRecord

현재 컨텍스트와 관련된 식별자와 식별자에 바인딩된 값이 기록되는 공간, 실행컨텍스트의 내부전체를 처음부터 끝까지 확인하며 순서대로 수집한다.

 

호이스팅

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

코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분한다.

 

변수 호이스팅(var, let, const)

let, const, class를 이용한 선언문에는 호이스팅이 발생하지 않는 것 처럼 동작.

왜 이런 현상이 발생할까?

=> var은 선언과 함께 undefined로 초기화되어 메모리에 저장한다. 반면에, let, const는 초기화 되지 않은 상태로 선언만 되기 때문, 결론 let,const도 호이스팅이 일어나끼 때문에 선언문위에 호출을 하면 에러가 발생한다.

 

Temporal Dead Zone(TDZ)

TDZ는 스코프의 시작부터 초기화구간

 

먼저 Javascript의 변수 생성단계(선언, 초기화, 할당)를 알아야한다.

선언단계 - 변수를 실행컨텍스트의 변수객체에 등록하는 단계를 의미한다, 이 변수느 스코프가 참조하는 대상.

초기화단계 - 실행 컨텍스트에 존재하는 변수 객체에 선언단계의 변수를 위한 메모리를 만드는 단계(undefined)

할당단계 - 사용자가 undefined로 초기화된 메모리에 다른값을 할당하는 단계

 

var과 let/const의 차이점.

var => 선언즉시 초기화(undefined) => 선언즉시 메모리에 undefined를 할당한다. (TDZ구간에서 undefined)

let, const => 선언단계와 초기화단계가 분리되어있다. 즉, 선언즉시 초기화가 되지 않는다(TDZ 구간에서 메모리가 할당이 안된다.)

위의 이유 때문에 호출이 선언보다 위에 존재 하면 var은 undefined를 호출하지만 let/const는 오류를 발생시킨다.

 

함수 선언문/함수 표현식

함수 선언문

 

함수 선언문은 함수의 정의문만 존재하고 별도의 할당문이 존재하지 않는다.

함수 선언문은 함수 전체가 호이스팅된다. => 이로인해 사용자의 의도와 다르게 함수가 적용될수있다.(ex중복함수)

 

함수 표현식

정의한 function은 별도의 변수에 할당한다.

함수 표현식은 선언부만 호이스팅된다.

 

스코프, 스코프 체인

스코프

 

스코프는 식별자의 유효범위이다.

스코프가 필요한 이유는 두가지가 존재한다.

1. 의도치않은 변수 값의 변조를 방지한다.

- 특히 외부 API 라이브러리와 연동하여 사용할 때 같은 변수명끼리 충돌이 생기는 것을 방지한다.

2. 효율적인 메모리관리

- 코드블럭안의 참조값들은 코드가 실행될때만 메모리에 할당 되는것이 효율적이다.

 

함수레벨 스코프

var로 선언된 변수와 함수는 함수내부만 스코프로 인정한다. 다른 코드블럭의 변수와 함수는 전역변수, 전역함수로 간주한다.

 

블록레벨 스코프

let, const 함수레벨 스코프와 달리 조건문을 포함한 모든 실행블럭을 스코프로 간주한다.

 

스코프체인

해당 레벨에 참조값이 있다면 참조하고 없다면 상위레벨 스코프로 찾아나가는 현상이다.

 

렉시컬스코프

자바스크립트는 렉시컬스코프 기준에 따른다 렉시컬스코프는 함수가 호출한 곳이 아닌 선언한 곳이 기준이 되는 것 이다.