[JavaScript]변수선언

CASE1) 

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


// let 변수는 hoisting 되지만 var 변수처럼 지동으로 undefined 라는 값을 할당(일명 initialization) 해주지 않음

 

CASE2)

함수();
var 함수 = function() {
  console.log(안녕);
  var 안녕 = 'Hello!'; //에러
} 

//Hoisting은 변수의 선언부분만 되는데 변수에다 소괄호를 붙여봤자 아직 함수가 아니기 때문에 실행되지 않음

 

CASE3)

let a = 1;
var 함수 = function() {
  a = 2;
}
console.log(a); // 1



//함수를 정의만 했지 실행을 안시켜서 a = 2라는 부분은 없는 코드, 그래서 a 는 그냥 1입니다.

 

CASE4) 

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

console.log(a + b); //5 a=1,b=4

//b는 4로 재할당
//a는 let으로 할당받은값으로 조금더 범위가 작고 가까운 1을 참조함

CASE5) 이 코드가 제대로 작동하려면?

 

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


//콜백함수가 실행되기 전에 var값이 계속 재할당받아 5만남음
//let으로 선언하면해결

 

 

 

 

 

CASE6) 이 코드가 제대로 작동하려면?

<div style="display : none">모달창0</div>
<div style="display : none">모달창1</div>
<div style="display : none">모달창2</div>

<button>버튼0</button>
<button>버튼1</button>
<button>버튼2</button>

<script> 
var 버튼들 = document.querySelectorAll('button');
var 모달창들 = document.querySelectorAll('div');

for (var i = 0; i < 3; i++){

  버튼들[i].addEventListener('click', function(){
    모달창들[i].style.display = 'block';
  });

}

</script>




//콜백함수가 실행되기 전에 var값이 계속 재할당받아 3만남음
//let으로 선언하면해결