[JavaScript] Hosting(호이스팅) 이란?

변수 Hoising 예제

alert(name); // 결과 : undefined
var name = "홍길동";
alert(name); // 결과 : 홍길동

name이라는 변수가 선언되기 전에 호출했으니 에러가 발생할 것 같지만

값이 할당되지 않았다는 의미인 undefined가 출력된다.

이는 JavaScript의 Hoisting이라는 특성에 의해 아래와 같이 해석되기 때문이다.

var name;
alert(name); // 결과 : undefined
name = "홍길동";
alert(name); // 결과 : 홍길동

 

함수 Hoisting 예제

test();
 
function test() {
    alert(id); // 결과 : undefined
    var id = 'test';
    alert(id); // 결과 : test
}

함수 역시 함수가 선언되기 전에 사용이 가능하다.

하지만 아래와 같이 함수를 변수에 넣게되면 함수 Hoisting은 발생하지 않게 되고, 에러가 발생하게 되니 주의하도록 하자.

test(); // Uncaught TypeError: test is not a function 에러 발생
 
var test = function() {
    alert(id); // 결과 : undefined    
    var id = 'test';    
    alert(id); // 결과 : test    
}

 

전역변수와 지역변수의 차이

alert(name); // 결과 : undefined
var name = "홍길동";
alert(name); // 결과 : 홍길동
 
function test() {
    alert(id); // 결과 : undefined    
    var id = 'test';    
    alert(id); // 결과 : test    
}

아래의 예제와 같이

전역변수의 선언부는 소스의 최상단에 위치한걸로 해석하고,

지역변수는 함수내부의 최상단에 위치한걸로 해석된다.

var name;
alert(name); // 결과 : undefined
name = "홍길동";
alert(name); // 결과 : 홍길동
 
function test() {
    var id;
    alert(id); // 결과 : undefined   
    id = 'test';    
    alert(id); // 결과 : test    
}

Hosting을 한마디로 정의하면?

변수나 함수의 선언문을 유효범위의 최상단으로 끌어올려서 변수나 함수를 선언하기 이전에도 사용할 수 있도록 해주는 JavaScript의 특성