Javascript hoisting Quiz

검색해보면 Javscript Hoisting을 설명하는 좋은 글 들을 많이 볼 수 있습니다. 그래서 이 포스팅에서는 hoisting을 공부 한 후 제대로 이해하고 있나? 점검용 퀴즈와 해답을 정리하려 합니다.

모든 문제에 대한 질문은 동일합니다.

Q. 자바스크립트 파일 실행시 결과는?

해답: hoisting이 출력됩니다.

위 코드에서 함수선언문(Function Declaration)이 존재하므로 compile 단계에서 아래와 같이 hoisting 되므로 문제 없이 실행됩니다.

function hoisting() {
  console.log('hoisting')
}
hoisting();

해답: 에러가 발생합니다.

위 코드에는 함수를 변수 hoisting에 저장하고 있습니다. 함수 표현식 (Function Expression) 이 사용되었으므로 compile 단계에서 아래와 같이 변환됩니다.

var hoisting; // 1. hoisting 값은 undefined
hoisting();   // Uncaught TypeError: hoisting is not a function
hoisting = function() {
  console.log('hoisting')
}

1번 단계에서 변수 hoisting 은 undefined 값인데 바로 아래 코드에서 호출을 했으니 에러가 발생합니다.

해답: undefined 출력

var로 선언된 변수도 compile 단계에서 hoisting이 발생합니다. 위 코드는 아래와 같이 변환됩니다.

var Var;          // undefined
console.log(Var);
Var = 3;

해답: 에러가 발생합니다. (Uncaught ReferenceError: noVar is not defined)

var, let , const 키워드 없이 선언된 변수의 경우 전역 property로 선언됩니다. 이를 implicit global 이라 하는데 이렇게 선언된 property도 hoisting 되지 않습니다. 따라서 console 출력 시점에 없는 변수를 참조하므로 변수가 존재하지 않는 not defined 에러가 발생합니다.

implict global은 전역 property로 선언되었기 아래와 같이 delete 키워드로 삭제할 수 있습니다.

다음은 변수와 함수 hoisting 우선순위에 관한 문제입니다.

해답: function

함수 hoisting 우선순위가 변수 선언 hoisting 보다 높습니다.

해답: number

함수 hoisting 우선순위가 높지만 이 코드를 hoisting 해서 살펴보면 왜 최종적으로 number가 되는지 아실거라 믿어요.

해답: 100

위에서 var, let , const 키워드 없이 선언된 변수의 경우 implicit global로 전역 property가 된다고 했습니다. 함수 내부에서도 예외는 아닙니다.

해답: undefined, 10

이 문제는 저도 첫 번째 console.log에서 30이 나올거라고 생각했다가 틀렸습니다. 위 코드에서 hoisting 함수 내부는 아래와 같이 변환됩니다.

var value = 30;
function hoisting(){
  var value;
  console.log(value);
  value = 10;
  console.log(value);
}
hoisting()

함수 내부에서 value가 hoisting 되면서 undefined 값을 가지기 때문에 첫 번째 console.log에서 undefined가 나옵니다.

수고하셨습니다. 다 맞췄다면 hoisting 을 제대로 이해한 것이며 틀렸더라도 다시 한번 개념을 잡을 수 있는 시간이길 바랍니다.