호이스팅 (Hoisting)

• 사전적 정의 : 끌어 올리기
• JavaScript에서의 Hoisting : 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 즉, 변수가 함수 내에서 정의되었을 경우, 선언부분만 함수의 최상위로, 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 변경이 된다.

console.log(a);	// Reference Error

선언되지 않은 변수를 참조할 경우, 보통 이렇게 오류가 나타난다.

console.log(a);	// undefined

var a = 1;

console.log(a);	// 1

하지만 위의 예제에는 오류가 나타나지 않는다.

선언되지 않은 변수를 참조하는데 오류가 나지 않고 undefined로 값이 지정된 이유는 바로 Hoisting 때문이다. 위 코드의 실제 실행 과정은 대략 아래와 같이 실행된다고 볼 수 있다.

var a;	// 변수 선언부분만 끌어올려졌다.

console.log(a);	// undefined

a = 1;

console.log(a);	// 1

Hoisting은 쉽게 생각하여 변수를 스코프 내 최상위로 끌어올린다고 생각하면 된다.

1. Hoisting의 영향여부

함수의 Hoisting도 변수의 Hoisting과 같은 맥락이지만 변수의 Hoisting이 변수 선언문 및 초기화였다면 함수는 함수 선언문 방식일때만 Hoisting이 된다. ( 함수 선언문을 제외한 방식들은 변수선언과 같이 함수 자체가 아직 선언이 되지 않은거라 오류가 발생한다. )

또한 let과 const변수 선언에서는 호이스팅이 발생하지 않는다.

1.1 함수표현식 (Function Expression)의 경우 - Hoisting 안됨

함수표현식이란, 변수를 만들고 함수를 할당해주는 표현식이다.

d();	// ERROR, undefined는 호출할 수 없기 때문에

var d = function () {
	console.log('I am inside function d');
};

d();

d변수가 선언된 후 d의 값인 함수를 아직 할당을 받지 못한 상태에서 d함수를 호출했음으로 error가 발생했다.

1.2 함수선언식 (Function Declaration)의 경우 - Hoisting 됨

함수 선언식으로 선언한 함수는 무조건 hoisting이 되며 함수 자체가 hoisting이 된다.

j();

function j () {
	console.log('j');
};

j();

위 예제가 실제 실행이 될때는 아래와 같이 함수 자체가 끌어올려진다.

function j () {
	console.log('j');
};

j();

j();

1.3 new Function 객체 생성의 경우 - Hoisting 안됨

new Function또한 Hoisting의 영향을 받지 않는다.

showName();	// ERROR
var showName = new Function("", console.log("David Kwon"));

1.4 let/const 변수 선언의 경우 - Hoisting 안됨

var와 달리 let과 const로 변수를 선언할 경우, Hoisting의 영향을 받지 않는다.

console.log(a); // a를 찾지 못해 error 발생

let a = 1;

console.log(a);

2. Hoisting 우선순위

2.1 같은 이름의 var 변수 선언과 함수 선언에서의 Hoisting

변수 선언이 함수 선언보다 위로 끌어올려진다.

  var a = 1;

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

console.log(a);	//1

2.2 값이 할당되어 있지 않은 변수와 값이 할당되어 있는 변수에서의 Hoisting

값이 할당되어 있지 않은 변수의 경우, 함수선언문이 변수를 덮어쓰지만 값이 할당되어 있는 변수의 경우, 변수가 함수선언문을 덮어쓰는 것을 볼 수 있다.

var a = 1;
var b;

function a() {
    console.log("123");
}
function b() {
    console.log("123");
}

console.log(a); // 1
console.log(b); // function b

3. Hoisting 예제

var me = 'surim';

function foo () {
	alert(me);
    
    var me = 'someone else';
}

foo();	// undefined

본인이 속한 scope내에서 끝까지 올려진다.

var me = 'surim';

function foo () {
	var me;
    
    alert(me);
    
    me = 'someone else';
}

foo();

위의 예제의 실행 과정이다. 함수 내의 me가 Hoisting이 되었지만 아직 할당하기 전에 alert를 함으로 결과는 undefined가 나오게 된다.

4. Hoisting 주의할 점

• 코드의 가독성과 유지보수를 위해 Hoisting이 일어나지 않도록 한다.
• Hoisting을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, Hoisting으로 인한 스코프 꼬임 현상은 방지할 수 있다.
• let/const를 사용한다.

참고사이트

• MDN - Hoisting
• Hoisting
• Hoisting
• gmlwjd9405 - Hoisting