[javascript] ES6 반드시 알아야할 문법 let, const 차이점

이전 포스팅에서는 let과 const의 공통적인 특징을 설명했다.

let과 const의 특징을 알아보고 싶다면 이전 포스팅을 참고하자.

이번 포스팅에서는 let과 const의 용도 차이를 알아보도록 하자.

let 과 const의 차이점

기본형 변수 선언

let과 const의 공통점은 es6에서 변수를 선언할 때 사용된다는 것이다. 그렇다면 그 차이점은 무엇인지 알아보자

기본형 변수(number, string, boolean, null, undefined)를 선언할 때 값의 변경이 필요할 경우 let을 사용하고 값의 변화가 필요없는 상수로 사용 될 경우 const로 선언 한다. 다음 코드를 보자

let letValue = 1;
letValue = 2;

const constValue = 1;
constValue = 2;  //Uncaught TypeError: Assignment to constant variable.

 

위와 같이 let과 const를 이용하여 기본형 변수를 선언하였고, 값을 재할당을 해주었다. let은 이상 없이 실행되었지만 const는 재할당 부분에서 TypeError가 발생한다. 

그러므로 기본형 변수에 대해서는 상수일 때는 const 일반 변수일 때는 let을 사용하자.

참조형 변수 선언

결론 부터 말하자면, 참조형 변수(object, array, function)를 사용할 때는 const로 선언하는 것이 바람직하다.

다음 예제를 보자.

const constValue = [];
constValue.push(1);
console.log(constValue);  //[1]

위 코드에서 constValue는 처음에 빈 배열로 선언하였고, 1 값을 추가해주었다. 

값의 변경이 있었지만 오류는 발생되지 않는다.

다른 참조형 변수 객체도 테스트해보자.

const constValue = {value: 1};
constValue.value = 2;
console.log(constValue);  //{value: 2}

객체의 프로퍼티는 변경되었지만 constValue 변수 자체가 재할당 되지 않았기 때문에 오류는 발생되지 않았다.

이 결과를 통해, const는 참조하는 메모리 주소가 변하지 않는 변수를 선언할 때 사용해야 한다는 것을 알 수 있었다.

물론 let으로 선언해도 위와 같은 결과를 낼 수 있지만, 이것 역시 하나의 약속이기 때문에 참조형 변수에서는 const를 사용하기로 하자.

let, const의 사용

1. es6를 사용하고 있다면 var의 선언은 최대한 피하자.

2. 우선 변수를 선언할 때 const를 사용하자. 만약 변수 선언 오류가 발생한다면 그때, let으로 변경해주자 

(재할당하지 되지 않는 변수 또는 참조형 변수가 let으로 선언되는 것을 방지하기 위함)

3. const로 선언한 array, object 변수의 복사가 필요하다면 배열은 rest parameter , 객체는 객체 메소드를 활용하자.

const array = [1];
const object = {value: 1};

const newArray = [...array];    //1
const newObject = Object.assign({}, object);  //{value: 1}