((실행 컨텍스트)) 실행 컨텍스트, 호이스팅, 스코프

🎯 실행 컨텍스트

유튜브 보고 정리한 포스팅 >>참고<<

 

🎯 호이스팅

• 모든 "선언"들이 소스코드 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징
• 변수의 생성은 선언/초기화/할당 3단계로 이루어지는데, 여기서 선언 부분만 끌어올리는 것이 호이스팅

TDZ(Temporal Dead Zone)?

• TDZ는 선언 단계부터 초기화 시작 전까지의 구간을 말한다.
• var는 선언과 동시에 초기화가 이뤄지기 때문에 오류없이 실행된다.
• let과 const는 선언과 초기화 단계가 따로 진행되기 때문에 (실행 컨텍스트에 변수를 등록하긴 했지만) 메모리가 할당되지 않아 접근할 수 없고 이로 인해 참조 에러를 일으킨다.
• 즉, let과 const는 TDZ의 영향을 받기 때문에 호이스팅이 일어났을 때 참조할 메모리가 없어서 참조에러가 발생한다.
• 함수에서 함수 선언식은 호이스팅의 영향을 받지만, 함수 표현식은 호이스팅 영향을 받지 않는다.
• 함수 선언식은 함수 전체를 호이스팅하지만, 함수 표현식은 선언부만 호이스팅되기 때문이다.

// 함수 선언식
sayHello();    // hello 찍힘 => 호이스팅

function sayHello() {
	console.log('hello');
}

// 함수 표현식
sayHello();

let sayHello = function () {
	console.log('hello');
}

// 호이스팅 적용
let sayHello;  // 선언부만 호이스팅

sayHello();   // TypeError: sayHello is not a function

function () {
	console.log('hello');
}

 

🎯 스코프

• 변수가 유효한 (살아있는) 범위
• 스코프가 없다면 코드 전체에 절대 충돌하지 않는 변수 이름을 딱 하나만 써야한다.

Global Scope

• 코드 어디에서나 참조가 가능하다.
• var로 선언한 변수는 전역 객체에 속한다.
  • 브라우저의 전역 객체는 window, Node.js에서는 global이다.

var a = '안녕';

console.log(a);        // 안녕
console.log(window.a); // 안녕

Local Scope

• 자바스크립트는 다른 언어와 달리 스코프의 범위가 '함수 단위'다.
• 오로지 함수에 의해서만 스코프가 생성된다.

if (true) {
  var x = 5;
}

console.log(x);  // 5

if문 안에 있지만, 함수 블록이 아닌 일반 블록으로 인식되어 밖에서도 접근이 가능한 이유다.

(function () {
  var x = 5;
})();

console.log(x);  // Uncaught ReferenceError: x is not defined

오로지 함수만 local scope를 생성한다.

🔥 let, const로 변수를 선언할때의 스코프는 블록 ({ })단위인걸 명심하자.

{ 
  let x = 1; 
}

console.log(x); // Uncaught ReferenceError: x is not defined