[javascript] var hoisting

hoisting이란 변수, 함수 선언을 최상단으로 끌어 올린다는 것이다. 즉 런타임시 어떤 변수를 출력하는데 변수선언이 되어있지 않음에도 불구하고 오류가 나지 않는다는 것이다. 예를 들어보자

 

console.log(a);
var a = 1;
console.log(a);

 

위의 경우 변수 a를 선언하기도 전에 콘솔 창에 a를 출력하도록 했다. 원래대로라면 오류가 나야 정상이지만 자바스크립트에서 var 로 변수를 선언하게 되면 hoisting이라는 특성 때문에 오류가 나지않는다 즉, 최상단에서 변수선언이 이루어 진 것이다. 때문에 변수 선언문 다음의 콘솔출력은 정상적으로 1이 출력되는 것을 볼 수 있다.

이러한 hoisting은 다른언어를 공부한 사람들에게는 정말 미친(?) 개념이 아닐 수 없다. 이러한 오류를 줄이기 위해 변수 선언시 let을 사용하는 것이 좋다.

이러한 hoisting은 var에서 일어나는 현상이다.

 

console.log(a);
let a = 1;
console.log(a);

같은 코드에서 변수선언을 let으로 해보았다. 콘솔창에서 오류가 발생하는 것을 알 수 있다. 이것이 정상적인 것이다...

let은 ES6에서 추가가 되었는데 chrome에서는 호환이 잘 되기 때문에 문제없이 사용가능하다.

문제많은 var를 사용할 이유가 없다.

 

또 var를 사용하면 안되는 이유가 있다.

{ }스코프에 영향을 받지 않는다. (이것도 정말 미친것같다...)

 

{
    var a = 1;    
}
console.log(a);

위 코드를 보면 변수 a는 스코프 안에서 var를 통해 선언되었고 1을 할당 받았다. 그리고 스코프 밖에서 a를 출력한다. 정상적이라면 오류가 나야 정상이다. 하지만..

이렇게 스코프를 무시하고 1을 출력하는 것을 볼 수 있다. (정말 문제가 많은 녀석이다...)

하지만 let을 사용하면 

{
    let a = 1;    
}
console.log(a);

이렇게 정상적으로 오류가 나는 것을 볼 수 있다. (이게 지극히 정상이다..)

 

결론 : 변수선언시 let을 사용하는 것이 바람직하다