[JavaScript] 호이스팅(Hoisting)이란?

 

 

• 호이스팅이란?
• 변수 호이스팅
  • var로 선언한 변수 호이스팅
  • const, let으로 선언한 변수 호이스팅
• 함수 호이스팅
  • 함수 선언식으로 선언한 함수 호이스팅
  • 함수 표현식으로 선언한 함수 호이스팅
    • var로 선언한 함수 표현식
    • const, let으로 선언한 함수 표현식

---

- 호이스팅이란?

 

호이스팅(Hoisting)이란, 자바스크립트 문법을 선언과 할당으로 구문을 분리하여 선언 부분을

 

최상위로 끌어올려 실행하는 특징을 말한다.

---

- 변수 호이스팅

 

① var로 선언한 변수 호이스팅

 

var로 선언한 변수의 경우, 호이스팅 시 undefined로 변수를 초기화 시키는 특징이 있다.

 

변수가 호이스팅 될 때에는 선언, 초기화만 된 채로 호이스팅 되고 , 할당까지 호이스팅이 되지는 않는다.

console.log(name);  // undefined
var name = "Choi";
console.log(name);  // Choi

 

위의 코드 첫 줄에서의 console.log(name)은 초기화 된 var name;을 출력한다.

 

그러므로 undefined를 출력하는 것이다.

 

 

② const, let으로 선언한 변수 호이스팅

 

const와 let으로 선언한 변수의 경우, 호이스팅 시 변수를 초기화하지 않는다는 특징이 있다.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
const name = "Choi";

console.log(name);  // ReferenceError: Cannot access 'name' before initialization
let name = "Choi";

 

---

- 함수 호이스팅

 

① 함수 선언식으로 선언한 함수 호이스팅

 

함수 선언식은 function으로 시작하고, 함수 전체를 호이스팅 한다.

 

이는 정의된 범위의 맨 위로 호이스팅 되기 때문에 함수 선언 전에 함수를 사용할 수 있다는 것을 의미한다.

printName();  // Choi
function printName() {
	console.log("Choi");
}

 

printName() 함수가 선언 되기 전에 호출하고 있으나, 잘 호출되는 것을 볼 수 있다.

 

 

② 함수 표현식으로 선언한 함수 호이스팅

 

2-1) var로 선언한 함수 표현식

 

var로 선언한 함수 선언식은 is not a function 오류를 발생시킨다.

printName(); // printName is not a function
var printName = () => {
	console.log("Choi");
}

 

 

2-2) const, let으로 선언한 함수 표현식

 

const ,let으로 선언한 함수 선언식은 참조 오류를 발생시킨다.

printName(); // ReferenceError: Cannot access 'printName' before initialization
const printName = () => {
  console.log("Choi");
}

printName(); // ReferenceError: Cannot access 'printName' before initialization
let printName = () => {
  console.log("Choi");
}

 

위의 에러 코드를 보면, 오류가 발생하게 된다. ReferenceError.

 

이러면 호이스팅이 안되는 것이 아닌가???

 

아니다.

 

const와 let으로 선언된 변수는 호이스팅 되어 메모리에 올라가지만, 초기화는 선언 이후에 이루어진다.

 

이 초기화 전까지 변수가 TDZ(Temporal Dead Zone) 안에 있기 때문에, 코드가 변수 선언줄에 도달하기

 

전까지는 변수를 사용할 수 없게 된다. 그래서 초기화 전에 접근하려고 하면 ReferenceError가 발생한다.

 

결국 호이스팅은 되었지만, 접근만 불가능하게 된 상태인 것이다.