dic: 호이스팅(hoisting)

무질서한 var와 질서있는 let, const with chatGPT

 

자바스크립트에서 호이스팅(hoisting)은 변수와 함수 선언이 코드 실행 전 스코프의 최상단으로 끌어올려지는 동작을 말합니다.

이로 인해 코드 상에서 변수나 함수를 실제 선언 위치보다 아펭서 사용할 수 있는것처럼 보입니다.

하지만, 호이스팅에 따라 다르게 동작하는 부분이 있어서 정확히 이해하는것이 중요합니다.

 

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

var: 함수 스코프 내에서 호이스팅 됩니다. 선언과 초기화가 동시에 이루어지지 않기 때문에, 선언된 변수는 스코프 상단으로 이동하되, undefinned로 초기화됩니다.

console.log(a); //undefined
var a = 5;
console.log(a);// 5

 

 let과 const: 호이스팅은 되지만, TDZ(Temple Dead Zone, 임시 사각지대)에 위치하게 되어 실제 선언 전에는 접근할 수 없습니다. 

초기화 하기전에는 참조할 수 없어 에러가 발생합니다.

console.log(b); //ReferenceError
let b = 10;
console.log(b); //10

 

2.함수 호이스팅

함수 선언 방식(function): 함수 선언문은 전체 스코프의 최상단으로 끌어올려지며, 선언 전에 호출이 가능합니다.

sayHello(); //"Hello"
function sayHello(){
	console.log("hello");
}

 

 함수 표현신(const, let과 functoin 결합): 함수 표현식은 변수 호이스팅 규칙을 따르므로, 선언전에 호출할 수 없습니다.

greet(); //ReferenceError
const greet = function(){
	console.log("Hi");
}

 

요약

• var는 undefined로 초기화되어 선언 위치보다 앞에서 접근할 수 있으나, let과 const는 TDZ에 의해 선언 전 접근 시 에러가 발생합니다.
• 함수 선언은 호이스팅 되어 선언 전 호출 가능하지만, 함수 표현식은 선언 후에만 호출 가능합니다

호이스팅을 이해하면 코드의 실행 흐름을 파악하는 데 큰 도움이 됩니다.