Javascript - ES6의 let과 const 그리고 var의 차이

 ES6에서는 let, const라는 새로운 키워드가 도입이 되었습니다. const는 한번 값이 정해지면 변경이 불가능한 값을 담을 때 사용하고, let은 동적으로 바뀌는 값을 담을 때 사용하는 변수 타입입니다. 자바스크립트의 변수에 대한 설명은 이전에 발행한 글을 확인해주세요.

 

 오늘은 ES6이전에 주로 사용하던 var와 ES6에서 새롭게 추가된 let, const의 차이점을 통해 var, let, const에 대해 학습해보도록 하겠습니다. var, let, const의 사용법에 대한 결론을 먼저 내린다면 var의 사용을 지양해주세요. let과 const를 사용해 코드를 작성하세요.

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

 var 타입은 스코프가 함수 단위입니다. 자바스크립트에서는 값의 유효 범위를 스코프(Scope)라고 표현합니다. 말이 조금 어렵기 때문에서 풀어서 설명하면 값을 사용할 수 있는 코드 영역이라고 말할 수 있습니다.

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

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

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

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

printMessage();

 if 문 밖에서 var messsage의 값을 hello로 설정하고, if 문 안에서 world!로 설정했습니다. if 문 안에서 새로운 값을 설정했는데, if 문 밖에 있는 message의 값이 수정되었습니다. var 사용한 코드는 결국 스코프와 관련된 문제를 발생시킵니다.

 

 이런 문제를 해결해주는 것이 바로 let과 const입니다.

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

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

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

  console.log(message);
  // hello
}

printMessage();

 let과 const는 스코프가 함수 단위가 아닌 블록 단위이므로, if 문 안에서 선언한 message의 값은 if 문 밖의 message의 값을 변경하지 않습니다.

 

 

2. 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

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

 const는 한 번만 값을 설정할 수 있습니다. let처럼 다시 값을 설정할 수 없습니다.

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

정리하기

 그렇다면 어떤 상황에 var, const, let 키워드를 사용해야 할까요? ES6 문법에서는 var의 사용을 지양하는 게 좋습니다. let과 const가 var가 하는 일을 할 수 있습니다. let은 값이 유동적으로 변하는 경우에 사용하고, const는 한번 설정한 후 변경할 일이 없는 값에 사용합니다. 간단히 말하면 const를 우선적으로 사용하고, 값이 변경이 필요하면 let을 사용하는 게 좋습니다.