변수 퀴즈

JS의 호이스팅이 뭔지 알고 있나?

호이스팅 같은 경우는 아래와 같이 코드가 있을 때 코드를 해석하는 순간, var 이름을 먼저 초기화하고 그 다음에 값을 입력하는 것.

function 함수(){
  
  console.log('hello');
  var 이름 = 'Kim';
  
}

 

(아래와 같이 해석)

function 함수(){

  var 이름; //  <-- 먼저 인식
  console.log('hello');
  이름 = 'Kim';
  
}

이러한 것 특징 때문에 var을 사용했을 때 호이스팅 때문에 나타나는 버그가 많고 아래 퀴즈도 이것 때문에 문제가 발생, 이러한 문제를 마주치지 않기 위해서는 let과 const를 쓰자.

 

Q. 다음 코드의 실행 결과는?

함수();
function 함수() {
  console.log(안녕);
  let 안녕 = 'Hello!';
}

 

답:

에러!

let도 호이스팅을 하지만 undefined조차 할당되지 않는다. const도 마찬가지 

이런걸 temporal deadzone, uninitialized라고 한다.

Q. 다음 코드의 실행 결과는?

let a = 1;
var b = 2;
window.a = 3;
window.b = 4;

console.log(a + b);

답:

b같은 경우는 var b와 window.b둘다 전역 변수취급해서 b는 4가 출력

a같은 경우는 window.a는 전역 변수이지만 let a는 아님, 그래서 범위가 더 구체적인 1이 출력된다.

 

Q. 다음 코드가 실행이 안되는 이유는? 그리고 해결 방법은?

for (var i = 1; i < 6; i++) { 
  setTimeout(function() { console.log(i); }, i*1000 ); 
}

답:

여기서 생각할 것은 for문과 실제 실행할 console.log(i)의 실생 순서, 속도임.

for문 같은 경우는 0.1초도 안되서 순식간에 실행이 되지만 setTimeout에 포함된 console.log(i)같은 경우는 i * 1000ms 후에 실행이 되어야 하기 때문에 그때의 i값은 5기 때문에 코드가 의도되로 실행되지 않는다.

 

해결법은 var i 를 let i로 변경시키면 된다.