JavaScript 호이스팅

 

 

호이스팅은 코드가 실행되기 전 변수 선언/함수선언을 최상단으로 끌러올려지는 것 같은 현상을 얘기하며 var타입 사용, 함수 선언식이 호이스팅이 일어난다.

 

 

1. var타입 사용에 따른 호이스팅

var x = 10;
function number(){
    console.log("x =" + x);  // x = 10
    console.log("y =" + y);  // y = undefined
    var y = 20;
}
number();

이처럼 이미 y의 값을 출력하기전에 프로그램은 y가 선언된 것과 같은 값(할당은 되지않은 자료형, undefiend)을 출력한다. 이러한 현상을 호이스팅이라한다.

 

var타입을 사용해서 작용하는 현상으로 let 타입을 사용하게 된다면 호이스팅의 영향을 받지않는다.

let x = 10;
function number(){
    console.log("x =" + x);  // x = 10
    console.log("y =" + y);  // 오류발생
    let y = 20;
}
number();

이처럼 호이스팅 현상이 나타나지않고 프로그램은 혼돈을 막기 위해 오류를 출력한다. let를 사용한다면 프로그램 하는데 있어서 더욱 안전하게 변수를 사용할 수 있다.

 

 

 

 

 

 

2. 함수 선언식 사용에 따른 호이스팅

함수 선언식에서도 호이스팅 현상을 볼 수 있다.

func1(); // 함수 이전에 호출해도 미리 script는 함수의 존재를 알고있기때문에 호출이 가능하다.
function func1(){  // 함수 선언식, script를 만나면 미리 선언됨.
	alert('func1 호출되었음');
}
func1(); // 호출

 

 

함수 표현식은 프로그램이 미리 함수의 존재에 대해 알지 못하기 때문에 함수보다 이전에 호출할 경우 오류가 발생한다.

// func2(); // 함수 이전에 호출해도 호출 되지않는다.
const func2 = function(){  // 함수 표현식, script를 만나도 미리 선언되지 않음.
	alert('func2 호출되었음');
}
func2(); // 호출