[js] 변수 끌어올림 (Hoisting)

원래 오늘 포스팅 예정이던 유용성 없어보이는 스크립트가 있었는데.. 지인이 보내준 흥미로운 글에 답을 하나씩 달다가 이 글을 작성하게 되었습니다.

블로그 포스팅 소스가 될만한 질문들이 아주아주아주아주 많아서 정말 좋네요. ㅠ
제가 아는 수준에서 하나 둘 정리해서 올리겠습니다. 인터뷰하러 가실 때 참고하시라고.. ㅎ

오늘은 javascript 의 Hoisting 즉, 끌어올림에 대해서 다뤄보겠습니다.

var job = "web publisher";
function say() {
    console.log(job);
    var job = "ui developer";
    console.log(job);
};

say();

var job = "web publisher";

function say() {

console.log(job);

var job = "ui developer";

console.log(job);

};

say();

3번째와 5번째줄에서는 과연 뭐라고 나올까요?
3번째 줄에선 “web publisher” 라고 나오고 5번째 줄에서는 “ui developer” 라고 나올거라 예상하셨다면 “땡” 입니다.

위 코드를 다시 작성해 볼까요?

var job = "web publisher";
function say() {
    var job;
    console.log(job);
    job = "ui developer";
    console.log(job);
};

say();

var job = "web publisher";

function say() {

var job;

console.log(job);

job = "ui developer";

console.log(job);

};

say();

이 코드의 결과를 예상한다면 어떠신가요? “undefined” 와 “ui developer” 가 예상되셨나요?
그럼 첫번째 코드와 같은 결과를 보여주는군요?

첫번째 코드는 실제로 두번째 코드처럼 해석되고 실행되어지기 때문에 두 코드의 결과가 같게 나오는 것이고,
바로 이런 현상을 Hoisting(끌어올림) 이라고 합니다.

function 스코프에서 var 로 선언된 모든 변수는 해당 스코프의 최상단으로 변수의 선언만 끌어올려지게 됩니다. 그렇기 때문에 변수의 값이 할당되지 않은 상태가 되어 undefined 라는 결과를 내어놓게 되는 것입니다.

덧, 스코프에 대한 내용은 제 블로그의 스코프에 대한 포스팅을 참고해주세요.

2 Replies to “[js] 변수 끌어올림 (Hoisting)”

환상경 says:

May 9, 2012 at 10:59 pm

ㅋㅋㅋ 처음 자바스크립트 책보면서 저 예제가 나왔을때
대체 왜!!!!
라는 생각이 들었던 기능이네요 ㅋㅋㅋㅋ
저거때문에 얼마나 당황했었는지….

1. rootbox says:
  
  May 10, 2012 at 11:03 am
  
  다른 것들도 마찬가지겠지만.. javascript 에서는 대체 왜? 이러는게 참 많아요;
  예전에 펜랄이가 js 골때린다고 했던 말들이 새록새록..