var, let, const의 차이점에 대해

Javascript에서는 C나Java등의 다른 프로그래밍 언어와 달리 자료형을 따지지 않고 변수를 선언할 수 있었다. 그렇기에 나또한, Javascript언어를 사용할 때에는 var, const, let 자료형을 많이 사용했는데 이 자료형들끼리는 어떤 차이점이 있는지   var, const, let 자료형의 차이점에 대해 정리 해보고자 한다.
 
이 세가지 자료형 중 가장 먼저 나왔던 것은 var였다. 하지만 var 자료형에는 치명적인 단점이 있었고, 이러한 단점을 보완하기 위해 ES6버전에서 let과 const 자료형이 새로 생기게 되었다.
 
(참고로 ES6는 2015년에 업데이트된 Javascript 버전 중 하나이다.)
 
그럼 var 자료형에 어떤 문제점들이 있었기에 let과 const 자료형이 생기게 되었는지 그 문제점에 대해 알아보도록 하겠다.

var hello = 'world';

function test() {
    var hello = 'hello';
    console.log(hello);
}

test();

console.log(hello);

실행결과

 
해당 코드를 실행하게 되면 처음 선언된 hello는 전역변수이고 test함수안에 선언된 hello 변수는 지역변수이므로 test() 함수를 실행했을 때만 'hello'라는 결과값이 출력되고 test함수를 실행하지 않은 console.log(hello); 는 'world'로 제대로 출력되는 것을 알 수 있다.
 

하지만 아래 예시처럼 함수가 아니라 if문안에 넣게 되면 지역변수가 아니라 전역변수를 선언한 것처럼 출력되며, 같은이름의 함수를 2번 선언하였는데도 오류코드를 발생시키지 않고 'hello'라는 문자열을 2번 출력하고 있다. 문제점이 보이는가?

var hello = 'world';

if (true) {
    var hello = 'hello';
    console.log(hello);
}

console.log(hello);

실행결과

 
위에서 찾지 못했다면 아래의 사진을 통해 좀 더 직관적으로 보여주도록 하겠다. 

var hello = 'world';
var hello = 'hello';

console.log(hello);

실행결과

 
이제는 보이는가? 다른 프로그래밍 언어였다면 같은 변수를 2번 선언했을때 에러코드를 내며 그대로 디버깅을 종료했을테지만, var자료형은 이러한 부분을 전혀 캐치해주지 못하고 있다.
 
이는 프로젝트의 규모가 복잡해지고 커질수록 변수명을 하나하나 확인하기 힘들어지기에 중복 변수를 빈번하게 사용하게 되는 원인이 되며, 중복변수의 사용은 변수명을 혼동하여 로직을 잘 못짜게 되거나, 유지보수의 어려움 뿐만 아니라, 아예 오류가 발생하는 심각한 문제점을  발생시킬 수 있다. 
 
이러한 문제점을 let자료형으로 바꾸게 된다면 어떻게 되는지 알아보도록 하자.

let hello = 'world';
let hello = 'hello';

console.log(hello);

실행결과

 
var 자료형에서 let 자료형으로 바꾸게 되면 위와같이 중복변수를 방지하기위해 에러를 표시하고 있다.
그렇다면 이를 if문과 함수를 씌웠을 때에는 var자료형과 어떻게 다를까?
 
아래 예시를 통해 알아보도록 하자.

let hello = 'world';

if(true) {
    let hello = 'hello';
    console.log(hello);
}

console.log(hello);

실행결과

 

let hello = 'world';

function test() {
    let hello = 'hello';
    console.log(hello);
}

test();

실행결과

 
위와 같이 let 자료형으로 변수를 선언하게 되면 if문과 함수 모두 제대로 로직내의 지역변수를 제대로 반환해주는 모습이다. 이를 통해 var형과 let형 모두 자료형에 상관없이 변수를 선언하게 도와주지만 var 자료형 보다는 let자료형의 사용을지향하는 것이 바람직하다는 것을 알 수 있다.
 
var 자료형과 let 자료형을 비교해보았으니 이번엔 const자료형에 대해 알아보도록 하자. const함수는 상수를 선언하는데 사용되는 자료형으로 한번 초기화하면 그 값을 변경할 수 없다는 특징을 가지고 있는데, 이러한 특징은 let 자료형과의 비교를 통해 자세히 알아보려한다.

let arr = '3';

arr = '400';

console.log(arr);

실행결과

 

const arr = '3';

arr = '400';

console.log(arr);

실행결과

 
위의 예시 처럼 let으로 선언한 변수는 이후 문자열의 값이 수정되었지만 const로 선언한 변수는 에러코드를 반환하며 수정이 되지 않는 모습이다. 그렇다면 const는 자료형을 무시하고 상수(고정된 값)을 선언하는 경우에만 쓰이는 걸까?
 
그 대답은 아래의 예시를 통해 알 수 있다.

const hello = 'world';

function test() {
    const hello = 'hello';
    console.log(hello);
}

test();

console.log(hello);

실행결과

 
위의 예시를 통해 한번 선언되었기에 값이 변경되지 않았을 것 같은 hello 변수가 지역변수에서 새롭게 초기화하는 경우에는 함수 루프안에서는 값이 변하는 것을 확인 할 수 있다, 이렇듯 const변수를 지역변수에서 새롭게 초기화 하게된다면 해당 루프안에서는 새롭게 선언한 'hello'라는 값을 사용할 수 있다는 것을 알 수 있다.
 
(주의해야할 점은, 예시처럼  지역변수로 선언하지 않고, 함수내에서 hello라는 변수의 값만을 변경하려한다면 여전히 에러를 발생시킨다는 점이다.)
 
 

const hello = 'world';

if(true) {
    const hello = 'hello';
    console.log(hello);
}

test();

console.log(hello);

  

실행결과

 
위의 예시를 보게되면 const 자료형도 let과 동일하게 if문 내에서 중복 변수를 잘 잡아준다는 것을 알 수 있으며, 이를 통해 지역변수에 대한 접근과 중복 변수에 대한 처리가 let과 동일하다는 것을 알 수 있다.
 
다음은 const 자료형과 let 자료형을 객체(object)와 배열(array)에 사용하면 어떻게 되는지 알아보자.

let drinks = {};
drinks.caffe = 'latte';
drinks.lemon = 'ade';

console.log(drinks);

실행결과

 

let drinks = {};
drinks.caffe = 'latte';
drinks.lemon = 'ade';

console.log(drinks);

실행결과

 
 
위의 예시를 통해 const 자료형이 객체를 선언함에 있어 let과 동일하게 작용하는 모습을 알 수 있다.
 

const arr = [ 1, 2, 3, 4, 5 ];
arr[0] = 100;
arr[4] = 300;
console.log(arr);

실행결과

let arr = [ 1, 2, 3, 4, 5 ];
arr[0] = 100;
arr[4] = 300;
console.log(arr);

실행결과

 
 
마찬가지로 const 자료형을 통해 객체뿐만 아니라 배열을 선언했을 때 let과 동일하게 배열에 접근하여 값이 선언되고 수정되는 것을 알 수 있다. 분명 const는 상수를 선언할 때 사용되며 한번 선언하면 값을 바꿀 수 없다고 했는데 이게 어떻게 가능한 일일까? 
 
그 이유는 const 키워드로 선언된 변수에 객체나 배열을 할당할 경우, 해당 변수는 해당 객체나 배열의 메모리 주소값을 상수로 저장하게 된다. 그러므로 다른 객체나 배열로 주소를 재할당할 순 없지만, 내부 속성이나 요소는 메모리 주소가 변경되지 않기 때문에 수정할 수 있기 떄문이다.
 
 
 
위의 내용들을 토대로 var, let, const 자료형들에 대해 정리해보자면, const와 let 자료형은 var자료형의 중복변수 허용이라는 치명적인 단점을 보완하기 위해 es6버전에서 새롭게 등장한 자료형으로 둘 다 중복 변수의 선언을 허용하지 않는다는 공통점이 있다. 따라서 var 자료형보다는 let과 const를 지향하는 것이 좋고, let은 처음 할당한 값이나 메모리 주소값이 변경되는 것을 허용하지만, const는 변경되는 것을 허용하지 않는다는 차이점이 있다.
 
그렇기에  객체와 배열, 그리고 상수를 선언할 때에는 const를 주로 사용하고,  그 이외의 경우에는 let을 주로 사용하는 것이 좋아 보인다.