[TIL] 2020-09-10

호이스팅

ES2015 이후에 표준 명세된 용어이다.

자바스크립트 실행 컨텍스트가 어떻게 동작하는가에 대한 일반적인 생각

호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 알지만, 실제로는 그렇지 않는다.

변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한

위치와 정확히 일치한 곳에 있습니다.

자바스크립트는 초기화가 아닌 선언만 끌어올립니다. (hoist)

자바스크립트 엔진은 인터프리팅 직전에 컴파일레이션이라는 과정을 거쳐갑니다. 컴파일레이션 코드 생성 과정에서 사전에 변수를 생성하고 메모리에 저장하는 동작을 하게되는데 이때 블록 안에서 호출할려던 전역변수와 같은 이름의 지역변수가 있다면 , undefined를 값으로 갖는 변수로 저장됩니다.

변수나 함수 선언은 맨위에서 선언되는 것처럼 보이고 할당은 원래위치에서 이루어지기 때문에 할당 이전의 변수는 undefined만 출력하게 되고 이를 호이스팅이라고 부릅니다.

참고.

https://usage.tistory.com/51

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

Temporal Dead Zone(TDZ)

var 와 let/const 선언에 대한 범위의 차이중 하나는 let/const가 TDZ에 의해 제약을 받는다는 것이다.

즉, 변수가 초기화되기 전에 액세스 하려고 하면, var처럼 undefined를 반화하지 않고, ReferenceError가 발생한다. 이는 코드를 예측가능하고 잠재적 버그를 쉽게 찾아낼 수 있도록 한다.

let /const 선언은 실행중인 실행 컨텍스트의 어휘적 환경(lexical Environment)으로 번위가 지정된 변수를 정의한다.

즉, 실행될때 선언된다

값이 해당 초기화 구문 어휘적 바인딩이 실행될 때 값을 할당받는다.

초기화 구문이 없으면, 변수에 undefined가 할당된다.

let x; // 이는 let x = undefined; 와 같다.

let/const 선언 변수는 호이스팅되지 않는 것이 아니다. 스코프에 진입할 때 변수가 만들어지고 TDZ(Temporal Dead Zone)가 생성되지만, 코드 실행이 변수가 실제 위치한 곳에 도달할 떄까지 액세스할 수 없는 것이다.

참고.

https://medium.com/korbit-engineering/let과-const는-호이스팅-될까-72fcf2fac365

자바스크립트 개요

자바스크립트는 일반적으로 스크립트 언어로써, 인터프린터 언어로 분류되곤 하는데 실은 컴파일 언어라고 합니다.

자바스크립트의 컴파일레이션은 코드가 실행되기 직전에 순식간에 일어나고, Just in time(JIT)이라고 합니다.

컴파일레이션 3단계

1. 토크나이징 / 렉싱 : 코드의 의미있는 조각(token)으로 만드는 과정

   ex> var a =2 —> var, a, =, 2

2. 파싱 : 문법 구조를 반영하여 중첩 원소를 갖는 트리형태로 바꾸는 과정. 파싱의 결과로 만들어진 트리를 AST(추상 구문 트리)라 부름

3. 코드 생성 : AST를 실행코드(즉, 기계어)로 바꾸는 과정

   ※ lgnition : AST를 해석하고 최적화하는 인터프리터

   ※ TurboFan : 최적화 담당 컴파일러

   ㄴ> Hidden Class : 비슷한 것들끼리 분류해놓고 가져다 쓰는 것

   ㄴ> lnline Caching : 필드 오프셋을 캐싱하여 사용

   • 성능을 빠르게 하려면 딴거 다필요없고 루프를 노려라!

엔진, 컴파일러, 스코프의 이해

코드의 해석(컴파일) 관점에서, 코드의 실행으로 관점을 옮겨 보면 엔진, 컴파일러, 스코프가 상호작용하게 됩니다.

엔진 : 컴파일레이션 시작부터 끝까지 모든 과정과 프로그램 실행을 책임짐 (런타임 환경을 실질적으로 엔진이 담당하고 있다고 볼 수 있겠습니다.)

컴파일러 : 파싱, 코드 생성 등 (컴파일레이션)

스코프 : 선언된 변수 목록을 작성하고 유지

LHS와 RHS

컴파일러가 생성한 코드를 실행할 때, 엔진은 변수가 a가 생성된 적 있는지 스코프에서 검색합니다.

이 과정에서 LHS 검색, RHS 검색을 통해 스코프를 탐색하는, LHS는 사실상 할당의 느낌(값의 할당 탐색) 이고, **RHS는 변수 혹은 어떤 참조가 사용될 떄, 어딘가 있는 값을 탐색하는 행위(참조값 탐색)**로 볼 수 있습니다.

※ var는 함수스코프 let / const는 블록스코프

메모리 힙 과 콜-스택

메모리 힙 : 정보를 저장하는 공간 (메모리 할당이 발생하는 공간)

ㄴ> 할당(Allocate) - 읽기, 쓰기(Use) - 해체(Release)

콜-스택 : 실행 중인 코드를 트래킹하는 공간

ㄴ> 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간