javascript - let, const

지난 시간에는 var 변수에 대해서 알아보았습니다.

javascript - var

Javascript - var

이번에는 let과 const에 대해서 알아보겠습니다.

 

let과 const의 공통점은 블록범위(block-scope)이며 hosting이 가능하다는 점 입니다.

 

차이점은 let은 선언과 동시에 임의값으로 초기와 할 수 있습니다.

 

하지만 const는 값을 재할당 할 수 없으며, 재선언 되지 않습니다.

 

또 다른 차이점은

 

let은 변수에 값을 할당하지 않아도 error가 발생하지 않지만

 

const는 변수 선언과 동시에 값을 할당해주어야한다.

 

 

그렇다면 각각의 특징들을 살펴봅시다.

 

 

블록범위(block-scope)

 

let과 const는 변수가 선언된 블록 내에서만 유효합니다. 하위블록에서 같은 범주로 적용됩니다.

function letTest() {
  let x = 1;
  console.log(x) // 1
  
  if(true) {
    let x = 2;
    console.log(x) // 2
  }
  console.log(x) // 1
}

function constTest() {
  const x = 1;
  console.log(x) // 1
  
  if(true) {
    const x = 2;
    console.log(x) // 2
  }
  console.log(x) // 1
}

let과 const 모두 블록 내에서 범위가 유효한 것을 확인 할 수 있습니다.

 

var와 let과  var는 함수 블록 이외에 범위에서는 선언다는 점입니다.

javascript - var

Hoisting

Hoisting(호이스팅)이란 var, let const, function, class 선언문의

변수 선언을 최상위에 선언한 것과 동등한 것으로 보는 것입니다.

 

즉, 변수가 선언되기 전에 사용할 수 있다는 것 입니다.

var와 같이 let과 const도 hosting이 진행됩니다.

 

하지만 let과 const는 변수로 할당하기전에 선언하면 Reference Error 발생합니다.

 

console.log(testLet)
// ReferenceError: testLet is not defined
let testLet = 1
console.log(testLet) // 1

console.log(testConst)
// ReferenceError: Cannot access 'testConst' before initialization
const testConst = 1
console.log(testConst) // 1

변수를 선언하기 전에 먼저 선언을 할 경우 Reference Error가 발생합니다.

 

이것을 일시적 사각지대(Temporal Dead Zone; TDZ)라고 합니다.

 

TDZ에 대해서는 아래에 링크를 남겨놓겠습니다.

2ality.com/2015/10/why-tdz.html

 

let과 const의 차이점

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

let x = 2;
console.log(x) // 2

const x = 1;
console.log(x) // 1

const x = 2;
//SyntaxError: Identifier 'x' has already been declared

 

let은 선언과 동시에 임의값으로 재할당이 가능합니다.

 

하지만 const는 값을 재할당 할 수 없습니다.

 

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

const y;
SyntaxError: Missing initializer in const declaration;

const y = 2;
console.log(y) // 2

또 다른 차이점은

let은 변수에 값을 할당하지 않아도 error가 발생하지 않지만

const는 변수 선언과 동시에 값을 할당해주어야하며 값을 할당해 주지 않을 경우 Error가 발생합니다.

 

 

 

 

이상 javascript에서 가장 많이 사용하는 const와 let에 대해서 알아보았습니다.

 

 

참조

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

poiemaweb.com/es6-block-scope