안녕하세요 hp입니다 :)
오늘은 자바스크립트의 호이스팅에 대해서 공부해보겠습니다.
📚 개념
호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 개념만 봐서는 이해가 어려울 수 있으니 아래 예시를 통해 살펴보겠습니다.
⚒️ var 호이스팅
console.log(name); //undefined
var name;자바스크립트 코드는 인터프리터에 의해서 한줄씩 실행하게 됩니다. 따라서 console이 먼저 찍히고 그 다음에 var name 변수가 선언됩니다. 우리가 예상하기로는 console을 찍은 시점에서 name을 모르기 때문에reference error를 발생할것으로 예상되지만 에러가 발생하지 않고 undefined의 값이 할당됩니다.
이는 자바스크립트 엔진의 동작 방식 때문인데요. 자바스크립트 엔진은 모든 선언문 ( 변수 , 함수 )등을 소스코드에서 먼저 찾아서 실행시키고 그 과정이 끝난 후에 나머지 코드를 순차적으로 실행합니다.
즉, 모든 선언문이 코드가 어디있던 코드의 가장 최상단의 끌어 올려진 것처럼 동작하는 것을 말합니다.
반면에 다음 예제는 선언 없이 초기화만 존재합니다. 따라서 호이스팅도 없고 , 변수를 읽으려는 시도에서는 reference error가 발생합니다.
console.log(name); // reference error
name = "HP"; // 초기화⚒️ let, const 호이스팅
var 키워드와 달리 let,const는 호이스팅이 작동하지 않는것처럼 동작합니다. 아래의 예시를 통해 살펴보겠습니다.
console.log(name); // reference error
let name;이는 var와 let/const가 동작하는 방식이 다른 이유 때문인데요. var의 경우에는 자바스크립트 엔진에 의해 선언 + 초기화가 동시에 진행되는 반면 let/const 키워드로 선언한 변수는 선언과 초기화 단계가 분리되어 진행됩니다.
즉, let/const의 초기화 단계는 변수 선언문에서 초기화 단계가 실행됩니다.
console.log(name); // error
let name; // 초기화 단계 실행
console.log(name); // undefiend
name = "HP";
console.log(name); // HP
이처럼 let/const는 스코프의 시작 시점부터 초기화 단계까지 일시적으로 변수를 참조할 수 없는 일시적 사각지대(TDZ)에 빠지게 됩니다.
끝까지 읽어주셔서 감사합니다. 😁
📌 참고
