[Js] 자바스크립트의 유효범위 - Hoisting(호이스팅)

자바스크립트 Hoisting

자바스크립트의 호이스팅은 모든 선언(var, let, const, function)을 통해서 정의된 변수의 선언문을 유효범위의 최상단으로 끌어올리는 행위를 말합니다.

변수의 범위가 전역 범위, 함수 범위 상황에 따라서 다르게 동작이 되며, 변수의 선언과 할당의 분리라고도 합니다.

 

• 전역 범위(globa scope) - 전역 범위에서는 스크립트 단위 최상단으로 끌어 올려집니다.
• 함수 범위(function scope) - 함수 범위에서는 해당 함수의 최상단으로 끌어 올려집니다.

 

자바스크립트 함수 표현식 (Function Expression)

자바스크립트에서 변수를 만들고 함수를 변수에 할당해 주는 표현식으로는 hoisting 안됩니다.

test();

var test = function() {
	console.log('Hello world');
};

test ();

 

자바스크립트 함수 선언식(Function Declaration)

자바스크립트 함수 자체가 hoisting이 되는 선언식으로 선언한 함수는 무조건적으로 hoisting 됩니다.

test();

function test() {
	console.log('Hello world');
};

test ();

 

new Function 객체 생성

new Function 함수는 hoisting는 안됩니다.

test();	// ERROR
var test = new Function("", console.log("Hello World"));

 

Hoisting 우선순위

변수 '할당'이 함수 선언보다 우선순위에 있고, 함수 선언이 변수 선언보다 우선순위에 있습니다.

변수 선언 -> 함수 선언 -> 변수 값 할당 순으로 실행이 됩니다.

 

 

변수 선언이 함수 선언보다 위로 끌어올려지는 예제

var a = "Hello";

function a(){
    console.log('World');
}

console.log(a);	

"Hello"

 

값이 할당되어 있지 않은 변수와 값이 할당되어 있는 변수에서의 hoisting 예제

var a = "Hello";
var b;

function a() {
    console.log("World");
}
function b() {
    console.log("good Bye");
}

console.log(a);  // > "Hello"
console.log(b);  // function b()