[JavaScript] 호이스팅 (hoisting) - 변수의 선언, 할당, 유효범위

 

  JavaScript를 한다면, 알고 있어야하는 기본적인(?) 특징 호이스팅(hoisting)에 대해서 알아본다.

그 전에, 어떤 언어에서든 말하는 변수의 선언/할당/유효범위에 대한 정의를 알고 있어야한다.

1. 변수

• 선언 : 변수를 정의하는 것 (Ex : var temp)
• 할당 : 변수에 값을 부여하는 것 (Ex : temp = 'a')
• 유효범위 : 변수가 의미를 갖는 범위

  특히, 유효범위의 경우 JS는 특이하게도 함수블록(function(){}) 내에서만 유효범위를 갖는다.

(단, IE 외 사용가능한 "let" 변수타입의 경우 블록({}) 범위를 갖는다. 이번 포스팅의 내용은 var 타입에 대한 제한적인 내용이다.)

[코드]

if(true){
	var scope_a;
	scope_a = 'Area : [A]';
}

console.log(scope_a);

function fn_scope(){
	var scope_b;
	scope_b = 'Area : [B]';
}

console.log(scope_b);            // Error

[결과]

 'scope_a' : if 블록({})에 존재하며, 변수 범위가 블록 외에도 유효함.

 'scope_b' : 함수(function) 블록({})에 존재하며, 함수 블록 내에서만 유효함.

변수의 유효범위는 Chrome 개발자도구를 통해서도 쉽게 확인 할 수 있다.

[ 함수블록 내 'scope_b' 변수를 제외한 변수들만 확인할 수 있는 모습]

2. 호이스팅 (Hoisting)

  MDN의 정의에 따르면 

"인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미", 

"변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"이 라고 설명하고 있다.

강조한, "선언만 코드의 최상단으로 옮기는 것"에 대해 아래 내용([코드] → [호이스팅 코드])을 통해 살펴보자.

[코드]

console.log(scope_c);
console.log(scope_d);

function scope_d(){ console.log('Area : [D]'); }
var scope_c;

[호이스팅 코드]

var scope_c;
function scope_d(){ console.log('Area : [D]'); }

console.log(scope_c);
console.log(scope_d);

[결과]

개발자가 작성한 내용([코드])은 실제로는 호이스팅이 발생하여 [호이스팅 코드] 와 같은 동작을 한다. 

3. 호이스팅(Hoisting)과 변수 할당, 함수 선언

  호이스팅된 소스는 다음과 같은 순서로 재정렬 될 것이다.

1. 변수 선언
2. 함수 선언
3. 변수 할당

아래 코드를 통해 확인해보자. 아래 두 코드(1,2)는 호이스팅이 진행되면 동일한 모습을 갖는다.

[코드_1] : 변수 할당 → 함수 선언 → 변수 선언

console.log('  1) ' + case1);

case1 = 'hi';

console.log('  2) ' + case1);

function case1(){ console.log("I'm Function..!") }

console.log('  3) ' + case1);

var case1;

[코드_2] : 변수 선언 → 변수 할당 →  함수 선언

console.log('  1) ' + case1);

var case1 = 'hi';

console.log('  2) ' + case1);

function case1(){ console.log("I'm Function..!") }

console.log('  3) ' + case1);

[호이스팅 코드]

var case1;

function case1(){ console.log("I'm Function..!") }

console.log('  1) ' + case1);

case1 = 'hi';

console.log('  2) ' + case1);
console.log('  3) ' + case1);

[결과]

참고자료 : (https://yuddomack.tistory.com)