const와 let

자바스크립트는 ES6문법이 나오기 전까지 변수를 선언할 때 항상 var를 사용해왔다.

하지만 새로운 변수 선언 방식이 나오면서 변수의 유효범위에 따라 변수 선언 방식을 다양하게 사용할 수 있게 되었다.

이 새로운 변수 선언 방식인 const와 let은 변수를 선언할 때 해당 변수의 유효범위를 블록범위로 지정하는 공통적인 기능이 있다.

여기서 한가지 짚고 넘어 가자면 var는 유효범위가 함수범위라는 것을 기억하고 예시코드를 살펴보자!

 

var name = "choi"

function name1(){
  if(true){
    var name = "Kim"
  }
  console.log(name)
}

function name2(){
  if(true){
    const name = "Lee"
  }
  console.log(name)
}

function name3(){
  if(true){
    let name = "Park"
  }
  console.log(name)
}

name1();
name2();
name3();

 

이 코드의 실행결과는 다음과 같다.

 

Kim
choi
choi

 

name1()의 경우 var의 유효범위는 함수 범위이기 때문에 if문 블록 안에 있어도 함수 안에만 있으면 참조가 가능하기 때문에 Kim을 출력할 수 있다.

하지만 const와 let은 유효범위가 블록범위이기 때문에 name2()와 name3()은 if문 안에서 선언한 변수가 if문 안에서만 접근이 가능하기 때문에 if문 밖에서 name을 출력하고자 할 경우 if문 안에 있는 name이라는 값을 참조할 수 없어 전역으로 선언된 var name = "choi"를 참조하게 되는 것이다.

 

또한 const와 let은 중복 변수 선언을 못하도록 하는 공통적인 기능이 있다.

만약 const 혹은 let으로 같은 이름의 변수를 중복 선언할 경우 다음과 같은 에러가 발생한다.

 

Uncaught SyntaxError: Identifier '변수명' has already been declared

 

하지만 이 const와 let은 서로 다른 기능도 갖고 있다.

우선 const는 변수에 대해 값을 재할당하는 것이 불가능하지만 let은 가능하다는 것이다.

const로 선언한 변수에 값을 재할당할 경우 다음과 같은 에러가 발생한다.

 

const finishedHomework = false;
finishedHomework = true;

 

Uncaught TypeError: Assignment to constant variable.

 

즉 const로 변수를 선언할 경우 그 변수의 값은 불변성이 보장되며 이 const를 불변변수라고 한다.

그러나 예외가 있다.

const로 선언한 변수의 값이 객체이거나 배열일 경우 불변성이 보장 되지 않는다.

이것을 '무결성 제약 조건에 위배되었다'라고 한다.

 

이와 같은 불변 변수를 어떠한 방식으로 관리할지는 개발자가 직접 정해야 한다.

예를 들어 불변변수로 선언한 배열이나 객체를 수정하는 것을 금지하여 무결성을 유지하는 방법도 있다.

하지만 무결성을 유지하면서 불변 변수의 값을 수정해야 하는 상황이 오면 어떻게 해야 할까?

 

개인적으로는 새로운 변수를 선언하여 불변 변수의 값에서 수정된 값을 새로 할당하는 것이다.

즉 불변변수를 수정한다기보다는 새로 정의한다는 개념에 가깝다.