호이스팅
호이스팅이란 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유한 특징이다.
변수, 함수, 클래스 등 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.
모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문이다.
console.log(hoisting); // undefined
var hoisting // 변수 선언문위의 코드가 참조 에러가 발생하지 않고 undefined가 출력되는 이유는 호이스팅 때문이다. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
함수 호이스팅
함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.
함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.
TDZ란?
TDZ(Temporal Dead Zone) 란 직역하자면 일시적인 사각지대란 뜻이다.
이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone)라 한다.
스코프
스코프는 식별자가 유효한 범위를 말한다.
모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 어떤 위치에서 선언됐냐에 따라 다른 코드가 이 식별자를 참조할 수 있을지 없을지 유효 범위가 결정된다.
var a = 'global';
function foo(){
var a ='local';
console.log(a); // 1번
}
foo();
console.log(a); // 2번위의 예제에서 global값을 가진 변수 a는 가장 바깥 영역에 선언되어 어디서든 a변수를 참조할 수 있다.
하지만 foo함수 안에 선언된 a변수는 함수 내에서만 참조할 수 있다.
두 개의 a변수는 식별자 이름 즉, 변수 이름은 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수이다.
let b = 1;
function hi () {
const a = 1;
let b = 100;
b++;
console.log(a,b);
}
//console.log(a);
console.log(b);
hi();
console.log(b);위 예제도 마찬가지로 변수 밖에서 a변수를 참조하려면 참조에러가 발생한다.
그리고 전역에 선언된 b변수와 함수 내부의 b변수는 스코프가 다른 별개의 변수이다.
스코프 체인
스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.
예를들어 a함수 내부에 b함수가 있다고 하면 b함수의 상위 스코프는 a함수이고 a함수의 상위 스코프는 전역 스코프이다.
자바스크립트 엔진은 변수를 참조할 때 변수를 참조하는 코드의 스코프에서 시작해서 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있다.
실행 컨텍스트
실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
동일한 환경에 있는 코드들을 실행할 때 필요한 정보들을 모아 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 여기서 '동일한 환경', 즉 하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역공간, eval()함수, 함수 등이 있다. 자동으로 생성되는 전역공간과 eval을 제외하면 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐이다.
콜스택
콜스택은 현재 어떤 함수가 동작하고 있는 지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는 지 등을 제어한다.
- 스크립트가 함수를 호출하면 인터프리터는 이를 콜 스택에 추가한 다음 함수를 수행하기 시작합니다.
- 해당 함수에 의해 호출되는 모든 함수는 콜 스택에 추가되고 호출이 도달하는 위치에서 실행합니다.
- 메인 함수가 끝나면 인터프리터는 스택을 제거하고 메인 코드 목록에서 중단된 실행을 다시 시작합니다.
- 스택이 할당된 공간보다 많은 공간을 차지하면 "stack overflow" 에러가 발생합니다.
🧐 생각
하나 하나 나만의 글로 예제들과 함께 다시 포스팅해야겠다.
현재 읽으면 이해 가지만 아직 완벽하게 설명하지는 못하겠다. 그렇다는 건 제대로 알고 있지 못하다는거...
📘참고
- TDZ(Temporal Dead Zone) 란?
- 코어자바스크립트
- 모던 자바스크립드 Deep Dive
- MDN
