[JavaScript] 호이스팅 Hoisting

 

 

#1 var let const 변수 타입의 차이점

	초기화	사용 범위 (scope)	업데이트 (재할당)	재선언
var	undefined	전역	O	O
let	초기화 x	블록 범위 내	O	X
const	초기화 x	블록 범위 내	X	X

 

#2 Hoisting

Hoisting이란? 변수가 선언된 시점보다 앞에서 사용되는 현상이다.

var 변수는 생성 단계에서 undefined로 초기화되지만 let/const 변수는 생성 단계에서 초기화되지 않기 때문에 선언문 이전에 접근하는 경우 referenceError가 발생한다. 따라서 let/const는 hoisting이 발생하지 않고, var 변수만 사용된다.

함수는 생성 단계에서 함수 전체가 저장되기 때문에 함수의 선언이 호출 부분 뒤에 있어도 호출이 가능하다.

console.log(callMe())	// undefined

var x = 10

console.log(callMe())	// 10

function callMe() {
	return x
}

 

예시 코드

// var 변수의 for loop
function varFor() {
	for (var i = 0; i < 3; i++) {	
    	setTimeout( () => console.log("i: ", i), 0);
    }	// var i는  함수 범위에 존재하는 변수이기 때문에 for문이 끝나도 소멸하지 않는다.
}

// let 변수의 for loop
function letFor() {
	for (let i = 0; i < 3; i++) {
    	setTimeout( () => console.log("i: ", i), 0);
    }	// let i는 블럭 범위 내에 존재하는 변수이므로 for문이 실행된 뒤에 소멸한다.
    	// 다만 각 화살표 함수의 closure에 저장된다.
}

varFor()	// 3 3 3
letFor()	// 0 1 2

 

+ closure

함수의 일급 객체 성질을 이용한 것으로, 함수 생성 시 내부에서 사용되는 변수들이 외부에 존재하는 경우 변수들은 함수의 스코프에 저장되며 함수/사용변수를 저장한 공간을 클로저 Closure라 한다.