[JavaScript] ES6의 let, var, const 차이

 

 

📌 var의 scope는 함수 단위이고,  let, const의 scope는 블록 단위이다.

 

scope란 자바스크립트에서 값의 유효 범위를 말한다. 쉽게 말해, 값을 사용할 수 있는 코드 영역이라고 할 수 있다.

 

아래의 코드에서 if 문 안에서 새로운 값을 설정했는데,

if 문 밖에 있는 message의 값이 수정되었다. var 사용한 코드는 결국 스코프와 관련된 문제를 발생시킨다.

function printMessage() {
  var message = "hello";

  if (true) {
    var message = "world!";

    console.log(message);
    // world!
  }

  console.log(message);
  // world!
}

 

 

위와 같은 문제를 해결해 주는 것이 바로 let과 const이다.

let과 const는 스코프가 함수 단위가 아닌 블록 단위이므로,

if문 안에서 선언한 message의 값은 if 문 밖의 message의 값을 변경하지 않는다.

function printMessage() {
  let message = "hello";

  if (true) {
    let message = "world!";

    console.log(message);
    // world!
  }

  console.log(message);
  // hello
}

 

 

📌 var는 중복으로 변수 설정이 가능하지만, let과 const는 변수를 중복으로 선언할 수 없다.

 

var message = "hello";
var message = "wolrd!"; // 가능

 var는 예제 코드처럼 중복된 이름으로 변수를 설정할 수 있다. 중복된 의미를 가진 변수를 사용할 수 있게 하는 것은 어떤 문제를 만들어 낼지 알 수 없다. 사용하고 있는 값이 언제든 바뀔 수 있다는 이야기이다.

 

 let과 const는 사용할 때 같은 블록 내부에서 중복 선언이 불가능하다.

 

let message = "hello";
let message = "hello wolrd!"; // Uncaught SyntaxError: Identifier 'message' has already been declared

 

 

📌 var, let은 값을 다시 설정할 수 있지만, const는 한 번만 가능하다.

 

const는 상수로, 한 번만 값을 설정할 수 있다.

const message = "hello";
message = "hello wolrd!"; // Uncaught TypeError: Assignment to constant variable.

 

 

📝 정리

 

ES6 문법에서는 var의 사용을 지양하는 게 좋다. let과 const가 var가 하는 일을 할 수 있다. let은 값이 유동적으로 변하는 경우에 사용하고, const는 한번 설정한 후 변경할 일이 없는 값에 사용한다. 간단히 말하면 const를 우선적으로 사용하고, 값이 변경이 필요하면 let을 사용하는 게 좋다.