호이스팅(Hoisting)

호이스팅은 Javascript의 특징으로 함수선언 혹은 변수선언을 위로 끌어올린다는 의미이다. 즉, 코드가 내 의도와 다르게 실행될 수 있다는 의미이므로 호이스팅이 되는 코드를 작성하는 것은 지양해야 한다.

---

1. 변수 호이스팅

function foo() {
	console.log(a);  // undefined
	var a = 100;
	console.log(a);  // 100
}
foo();

위의 코드에서 변수 a는 첫 번째 콘솔로그 출력 때 선언되어있지 않으므로 오류가 나야한다. 그러나 호이스팅으로 인해 console.log(a) 위에 var a; 라는 변수 선언문이 있는 것처럼 실행이 되어 결과는 undefined가 나온다.

 

function foo2() {
	console.log(a);  // ReferenceError
	let a = 100;
	console.log(a);  
}
foo2();

그러나 a를 let으로 선언하게 되면 호이스팅이 발생하지 않고 console.log(a)에서 ReferenceError가 발생한다. 따라서 되도록 var가 아닌 let을 쓰도록 하자!

 

 

2. 함수 호이스팅

foo3();
function foo3() {
	console.log("xxx"); //xxx
}

위 코드는 foo3 함수를 선언하기 전에 호출하였으므로 오류가 나야한다 그러나 정상적으로 실행되어 콘솔에 xxx를 찍는다. 함수의 선언이 함수 호출 전으로 호이스팅된 것이다.

 

 

foo4(); //SyntaxError
const foo4 = function() { //const, let, var 모두 오류 발생
	console.log("yyy");
}

그러나 함수 표현식을 쓰면 오류가 나지 않는다. 따라서 함수 선언식 보다는 표현식을 쓰도록 하자.

 

---

호이스팅이 발생하는 원인은 무엇일까? 자바스크립트 코드가 실행되기 직전에 변수 및 함수 선언부들을 스캔하여 등록(메모리에 추가)하는 과정이 발생한다. 메모리에 저장된 변수들은 접근 가능하므로 사용 전에 선언이 된 것처럼 보이는 호이스팅이 발생하게 된다.

 

그렇다면 var, let, const 로 선언했을 때의 변수 호이스팅의 발생여부는 왜 다른 것일까. 자바스크립트의 컴파일 단계에서의 Lexical Environment에서 var는  undefined라는 값으로 초기화된다. 하지만 let, const의 경우 uninitialized로 초기화된다. 그 후 let, const의 변수 선언부가 실행되면 uninitialized는undefined로 변경된다.(사용자가 지정한 초기값이 없는 경우)

 

 

---

참고

velog.io/@cada/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting