[es6] var, let, const

• var scope는 호이스팅 O, 중복선언 O, 함수형스코프
• let 호이스팅 X, 중복선언 X, 블록스코프
• const 호이스팅 X, 중복선언 X, 값변경 X, 블록스코프
• 스코프의 종류에 따라 클로저가 다르게 적용됨

var

---

let

---

const

---

함수형 스코프 var

---

블록 스코프 let

---

 

JavaScript

 

document.querySelector('.ex1 button').addEventListener('click', function () {
  alert(a);
  var a = 1;
  var a = 2;
});

document.querySelector('.ex2 button').addEventListener('click', () => {
  let a = 1;
  a = 2;
  alert(a);
});

document.querySelector('.ex3 button').addEventListener('click', () => {
  const a = 1;
  a = 2;
  alert(a);
});

document.querySelector('.ex4 button').addEventListener('click', () => {
  var a = 1;
  if (a === 1) {
    var a = 2;
    // alert(a);
  }
  alert(a); //<=== 밖으로 빼도 2로 된다.

  // var 는 함수형 스코프 === 함수내에서는 다 같은 변수
});

document.querySelector('.ex5 button').addEventListener('click', () => {
  let a = 1;
  if (a === 1) {
    let a = 2;
    alert(a); //<=== 안에서는 2가 alert 된다.
  }
  alert(a); //<=== 밖으로 빼면 1이 alert 된다.

  // let 은 블록 스코프(중괄호 스코프) === 함수밖에서는 다른 변수
});

 

---

 

1. var 는 선언과 동시에 undefined로 초기화된다. 따라서 -> 첫번째 버튼을 눌렀다면, undefined 가 alert된다.

2. let 은 선언과 동시에 초기화 된 후 1 이 할당되고 아래의 a = 2 로인하여 2라는값이 할당된다. 따라서 값 2가 alert된다.

3. const 는 let과 같은 특징을 지니고 추가로 값 변경이 안된다. 만약 3번째 버튼을 누르면 콘솔창에서 

Uncaught TypeError: Assignment to constant variable.
    at HTMLButtonElement.<anonymous> (script.js:19:5)

이와같은 에러문을 반환한다.

4. var 는 함수형 스코프이기 때문에 함수 내에서는 다 같은 변수로 취급을 한다. 따라서 값 2를 alert 한다.

5. let 은 블록형 스코프이기 때문에 함수 밖에서는 다른 변수로 취급을 한다. 따라서 값 1이 alert 된 후, 값 2가 alert된다.