let과 const (feat. var) --정리 현재진행형

• let

- 변수

  즉, 한번 value(값)을 선언하고 나서 다시 바꿀 수 있다. (변할 수 있다.)

let num = 1;
console.log(num); //1

num = 2;
console.log(num); //2

 

 

- 블록스코프

function run() {
  var num1 = 1;
  let num2 = 2;

  console.log(num1, num2);

  {
    let num3 = 3;
    console.log(num3);
  }

  console.log(num3); // ReferenceError
}

run();

num3은 블록 안에서 선언되었기 때문에 블록 바깥에서는 접근할 수 없음 -> ReferenceError

 

 

 

- 똑같은 이름 다시 사용 불가능

let num = 1;
let num = 2;  // SyntaxError: Identifier 'num' has already been declared

 

 

 

*var는?

똑같은 이름 다시 사용 가능

var num = 1;
var num = 2; // 아무 문제 없음

 

 

 

 

 

• const 

- 상수
즉, 값 바꿀 수 없음(재할당할 수 없다, read-only)

=> 바꿀 필요가 없거나, 바뀌면 안되는 값을 저장하고 싶을 때 사용.

- 선언과 초기화가 반드시 동시에 
- 똑같은 이름 다시 사용 불가
- 블록 스코프

 

 

 

---

let과 const

 

공통점

- 블록 스코프

- 같은 이름 다시 쓸 수 없다.

 

차이점

- let은 초기화 후에 새로운 값 할당 가능

- const는 선언과 동시에 초기화. 그 후에 다른 값 할당 불가능

 

---

호이스팅(Hoisting)

- var는 함수 스코프의 최상단으로 호이스팅. 선언과 동시에 undefined로 초기화

function run(){
    console.log(num1); //undefined
    var num1 = 1;
    console.log(num1); //1
}

run();

var는 함수의 최상단으로 호이스팅 되고 undefined로 초기화되기 때문에 처음에는 undefined가 출력

초기화 된 후에는 1이 출력

 

 

 

- let과 const는 블록스코프의 최상단으로. 선언만 된다. 값이 할당되기 전까지 어떤 값으로도 초기화되지 않는다.

function run(){
    console.log(num1); //ReferenceError
    let num1 = 1;
    console.log(num1); //1
}

run();

let(const도 마찬가지)은 최상단으로 호이스팅 되지만 어떤 값으로도 초기화되지 않기 때문에 Reference Error 발생

TDZ(Temporal Dead Zone)현상

즉, 선언은 되었지만 참조는 할 수 없는 사각지대를 갖게 됨.

 

 

 

 

 

---

글로벌 객채 바인딩

 

글로벌 스코프에서 선언된 경우

var는 글로벌 객체에 바인딩

let과 const는 글로벌 객체에 바인딩되지 않는다.

var num1 = 1; //globally scoped
let num2 = 2; //globally scoped
const num3 = 3; //globally scoped

console.log(window.num1); //1
console.log(window.num2); //undefined
console.log(window.num3); //undefined