[JavaScript] 호이스팅이란?
Hoisting이란 도대체 무엇인가...
✨ 기본 정의
자바스크립트 인터프리터가 변수, 함수, 클래스의 선언을 코드 실행 전에 최상단으로 옮기는 것(처럼 보이는?) 과정
🚧 변수 / 클래스 선언의 경우도 호이스팅이 되지만, 예기치 못한 에러를 발생시킬 수 있음
인터프리터(interpreter) : 소스코드를 바로 실행하는 컴퓨터 프로그램, 환경
원시 코드를 기계어로 번역하는 컴파일러와 대비됩니다
함수 호이스팅
: 함수를 선언 전에 호출할 수 있도록 도와줌
catName("Tiger");
function catName(name) {
console.log("My cat's name is " + name);
}
// 코드 상 함수 선언 전에 호출이 가능하다!
변수 호이스팅
: 코드 상에서 변수 선언 / 초기화 이전에도 변수를 호출할 수 있음.
💡 하지만 자바스크립트는 선언만 호이스팅하고, 초기화는 호이스팅하지 않음!!!
→ 선언 코드에 다다를 때까지 변수는 default 초기화 값을 가지고 있음
(var = undefined | const, let = uninitialized)
변수 호이스팅
= 변수 선언 과정에서 선언과 초기화를 분리 시킨 후 → 선언만 위로 옮기는 과정
1. var
호이스팅
var의 변수 선언 과정
선언 + 디폴트 초기화 (undefined) → 제대로 된 초기화 + 할당
var의 경우 런타임 이전에 선언과 디폴트 초기화가 일어남
→ 할당 부분은 호이스팅이 되지 않기 때문에 undefined
를 도출해냄
-
선언과 초기화를 따로할 경우
console.log(init); // undefined var init; // 선언 console.log(init); // undefined init = "Initialized?"; // 초기화 + 할당 console.log(init); // "Initialized?"
-
선언과 초기화를 같이할 경우
console.log(init); // undefined var init = "Initialized?"; // 선언 + 초기화 + 할당 console.log(init); // "Initialized?"
-
선언부를 빼먹은 경우 : 아예 끌어올릴 선언부가 없으니까 RefError가 뜬다
console.log(init); // ReferenceError init = 'Initialized?"
선언부 없는 초기화는 선언까지 함께 일어난다 (물론 잘못된 Practice)
2. let
, const
호이스팅
let과 const는 선언과 동시에 디폴트값으로 초기화가 되지 않는다.
let const는 선언이 되고 일시적 사각 지대(Temporal Dead Zone)가 있어, 선언 이후에 TDZ 이후에 초기화와 할당이 일어난다.
console.log(greet); // ReferenceError!!
let greet = "Hello!";
3. class
호이스팅
클래스 또한 호이스팅 됨 BUT! 디폴트 초기화 값이 없음 → ReferenceError
Reference
Hoisting - MDN
Author And Source
이 문제에 관하여([JavaScript] 호이스팅이란?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jujusnake/JavaScript-호이스팅이란저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)