[JS 문법] var, const, let 의 차이점

조현영님의 '웹 게임을 만들며 배우는 자바스크립트' 강의를 보고 스스로 요약 했습니다.

 

var, const, let 의 차이점에 대해서 알아보겠습니다.

 

1. 각 변수의 수명(scope) 주기 분석

if (true){
    var a = 1;
    const b = 2;
    let c = 4;
}
console.log(a);
console.log(b);
console.log(c);

위의 코드를 콘솔창에 띄워 실행한다면

var 변수 값은 콘솔 창에 잘 띄워지지만, b와 c는 출력이 되지 않는 것을 볼 수있다.

(물론 console.log(b)의 값을 뺀 상태에서도, 위와 같은 에러가 뜬다.)

var 변수 값은 { } 외 영역에서도 유효하다는 것을 알 수 있고,

const, let 변수 값은 { } 외 영역에선 유효하지 않다는 것을 알 수 있다.

 

var 단점 : 코드량이 많아지면 코드 해석 시 불편함.

 

2. const와 let의 차이

let a = 1;
const b = 2;
if(true){
    a = 3;
    console.log(a);
    b = 4;
    console.log(b);
}

만약 위와 같은 코드를 콘솔 창에서 실행 한다면,

 

b 는 이미 정의 되었다고 뜨는 것을 볼 수 있다. 이는 const 변수는 상수 취급을 하며, 

한 번 정의된 변수는 값을 바꿀 수 없다는 것을 의미한다.

 

let의 변수 a를 수정 시 아무 일도 일어나지 않지만,

const 변수 b를 수정 할 시 문제가 되는 것을 알 수 있다.

 

한 가지 차이점을 더 하자면,

var a;
const b;
let c;

위와 같이 초기화 하지 않고 선언만 해준다면, 오류가 날까? 한 번 생각 해보시기 바란다.

위의 언급과 같이 const는 상수 취급을 선언과 동시에 하여, 변수의 값을 바꿀 수 없게 한다.

고로 const 변수는 선언과동시에 초기화를 해주어야 한다.  밑과 같은 오류가 난다.

이로서 var, let은 선언하는 단계와 초기화 단계가 분리되어 진행됨을 알 수 있다.

 

3. const 선언과 수정

만약 const 변수에 객체나 배열로 선언을 했다면 어떻게 되는지 분석해보겠다.

const arr = [1,2,3,4];
const obj = { a : 1, b : 2, c : 3};

arr[0] = 10;
obj.a = 20;

console.log(arr);
console.log(obj);

위와 같이 코드를 작성 한 뒤, 값이 바뀔까? 생각해보자.

정답은 바뀐다. 

배열의 값을 바꿀 수 있을 뿐만아니라, 배열에 값을 push, pop 등 기능도 쓸 수 있다.

하지만 arr의 형태가 배열이기 때문에, 배열 그 자체를 정수나, 다른 자료형으로 바꾸는 것은

불가능하다.