호이스팅(Hoisting)

호이스팅

자바스크립트 Parser가 함수 안에 있는 변수나 함수를 맨위로 '끌어올린다'

호이스팅은 선언된 위치에 관계없이 어디서든 함수를 사용할 수 있도록 한다.

코드가 실행되는 과정에서 함수 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 함.

 

호이스팅 이유

자바스크립트의 변수 생성(Instantiation)과 초기화(Initialization)작업이 분리돼서 진행되기 때문이다.

 

호이스팅의 대상

var, 함수 선언문이 대상

(함수를 선언하기 전에 함수를 선언하면 코드의 구조를 엉성하게 만들 수 있기 떄문에 함수 표현식을 사용하는 것을 권장한다고 한다.)

 

console.log(func1()); //함수 선언식이기 때문에 호이스팅 됨. 정상 실행.
console.log(func2()); //var func2라는 변수만 호이스팅되고 함수표현식은 호이스팅 안되기 때문에 Error
console.log(func3()); //var func3라는 변수만 호이스팅되고 함수표현식은 호이스팅 안되기 때문에 Error

function func1() {			
	return 'aaa'
}

var func2 = function funcA() {
	return 'AAA'
}

var func3 = function () {
	return 'ccc'
}

let, const, 함수 표현식은 해당되지 않는다.

 

// let은 호이스팅의 영향을 받지 않기 때문에 'Reference Error'

foo();

let foo = function() {
    console.log('something');
}

 

호이스팅 인식 우선순위

변수 선언 > 함수 선언

할당 된 변수 > 할당되지 않은 변수