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

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

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

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

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

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

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

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

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

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

2 comments on “[js] 변수 끌어올림 (Hoisting)”:

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

    1. 다른 것들도 마찬가지겠지만.. javascript 에서는 대체 왜? 이러는게 참 많아요;
      예전에 펜랄이가 js 골때린다고 했던 말들이 새록새록..

Leave a Reply

Your email address will not be published. Required fields are marked *