호이스팅

물론 아는 개념이긴 했지만 이게 뭐에요?? 라고 했을 때 설명 잘 못할 것 같음.. 요즘 느끼는건데 나 그냥 설명 못함 예전에 영어학원 알바 어캐했는지 모르겠당. 그래도 조금씩 나아지려고 노력해야지..

호이스팅(Hoisting) 은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언이 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징입니다. 이 때문에 코드의 선언된 위치보다 상단에서 변수에 접근할 수 있는 것처럼 보일 수 있습니다.

한편, 호이스팅은 값 할당까지 끌어올리지는 않습니다. 예를 들어 var로 선언된 변수는 선언과 초기화는 끌어올려지지만 값 할당은 끌어올려지지 않기 때문에, 값 할당이 이뤄지기 전까지는 undefined로 평가됩니다. 예시는 다음과 같습니다.

console.log(myVar); // undefinedvar myVar = 10;console.log(myVar); // 10

반면, 함수 선언식은 함수 자체가 호이스팅되기 때문에, 함수 호출을 선언 이전에 해도 문제가 없습니다.

console.log(myFunction()); // 'Hello World' 출력function myFunction() {  return 'Hello World';}

단, ES6에서 도입된 let과 const는 선언문 이전에 접근하려고 하면 ReferenceError가 발생합니다.

이는 Temporal Dead Zone(TDZ) 이라는 개념 때문입니다. TDZ는 변수가 선언되었지만 초기화되기 전까지의 구간을 말합니다. let과 const로 선언된 변수에는 TDZ가 존재하며, 이 구간에서는 변수에 접근할 경우 ReferenceError가 발생합니다. TDZ는 코드에서 변수가 선언된 시점부터 초기화될 때까지의 구간에서 변수를 사용하지 못하게 막아주는 역할을 합니다.

console.log(myLet); // ReferenceError 발생let myLet = 10;

참고로, let 변수는 선언 자체는 호이스팅되지만 초기화가 호이스팅되지 않습니다. 선언 즉시 undefined로 초기화되는 var와 다르게, let은 해당 라인의 코드가 실행될 때까지 초기화가 이루어지지 않는 것입니다.

지금까지의 내용을 정리하면, 호이스팅은 변수와 함수 선언을 코드 상단으로 끌어올리는 것처럼 동작하는 특징을 가리킵니다. var는 초기화 전에 접근 시 undefined로 나타나며, let과 const는 TDZ로 인해 초기화 전에 접근하면 ReferenceError를 발생시킵니다.

→ 결론 호이스팅은 var 변수에서 나오는건데, 초기화 전에 변수값을 사용하면 undefined 나온다? 요즘 var 코딩할때 쓸일이 잘 없어서.. 함수는 호이스팅해서 사용도 됨..

내가 가장 많이 쓰는 언어인 파이썬과 자바스크립트를 비교를 해보자면, 파이썬은 인터프리터(한줄 씩 실행) 이 되고, 자바스크립트는 컴파일(한번 만들어지고 실행됨)이기 때문에 자바스크립트에서는 호이스팅이 된다. 파이썬은 안된다.