[ES6] 2. 변수/ hoisting/closure/전역변수

📌 변수

var

재선언 O
재할당 O
함수 스코프

let

재선언 X
재할당 O
블록 스코프

const

재선언 X
재할당 X
블록 스코프

📌 Hoisting

자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석하는 현상

function 함수(){
  // var 이름 먼저 해석 
  console.log('hello');
  var 이름 = 'Kim';
  
}

📌 closure

바깥에 있는 변수는 안쪽에서 자유롭게 사용가능한 현상

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  innerFunc();
}

outerFunc(); // 10

함수 outerFunc 내에서 내부함수 innerFunc가 선언되고 호출되었다. 이때 내부함수 innerFunc는 자신을 포함하고 있는 외부함수 outerFunc의 변수 x에 접근할 수 있다. 이는 함수 innerFunc가 함수 outerFunc의 내부에 선언되었기 때문이다

📌 전역변수

var 키워드로 전역변수를 만들면 window에도 보관이 된다
자동으로 window 오브젝트에 보관되기 때문에 전역 변수 선언 후 window. 변수명이라고 해도 된다

그래서 전역변수를 조금 더 엄격하게 관리하거나 구분짓고 싶으면 전역변수를 만들 때와 사용할 때 window를 활용하고는 한다

---

연습문제

Q1. 콘솔창에 출력되는 결과

1.

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

let, const는 Hoisting 시 undefiend 자동으로 할당 안됨

2.

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

3.

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

함수를 만들었으면 실행을 해줘야 a=2가 되는데 실행을 해주지 않았기 때문에 1이 출력

4.

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

console.log(a + b);
//5

var로 선언한 변수는 window.b 사용 가능

Q2. 콘솔창에 1초에 한번씩 1부터 5까지의 정수를 출력

setTimeout(function() { console.log(1); }, 1000 ); 
setTimeout(function() { console.log(2); }, 2000 ); 
setTimeout(function() { console.log(3); }, 3000 ); 
setTimeout(function() { console.log(4); }, 4000 ); 
setTimeout(function() { console.log(5); }, 5000 ); 

위의 코드를 반복문에 담았는데 잘 작동하지 않는다
1,2,3,4,5 가 출력되어야 하는데 5만 5번이 출력된다
이유는?

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

반복문은 0.1초도 안되는 사이에 다 돌고 var=5라는 전역변수의 형태로 남아있게 된다 (var은 전역변수)
그래서 i에 5를 채워넣어서 돌리게 된다

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

그래서 let을 사용해야한다
let은 블록스코프이기 때문에 반복문 안에 생기게 된다
그래서 반복문이 돌면서 i값이 잘 바뀌게 되고 의도대로 잘 실행된다

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

Q3. 버튼 누르면 모달창 띄우기

코드가 잘 작동하지 않는이유는?

<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 buttons = document.querySelectorAll('button');
var modals = document.querySelectorAll('div');

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

  buttons[i].addEventListener('click', function(){
    modals[i].style.display = 'block';
  });

}

</script>

반복문이 끝나고 i=3인 전역변수만 반복문 밖에 남는다 . 그래서 buttons[3]은 없기 때문에 오류난다
변수 선언을 let으로 해야함