[자바스크립트 문법] var, let, const 차이점

재선언은 다음과 같이 이미 선언된 변수에 다시 선언하는 것이다.

var variables = '변수 선언';
console log(variables); // 변수 선언

var variables = '재선언';
console.log(variables); // 재선언

 

재할당은 값을 다시 변경(업데이트)하는 것이다.

호이스팅(hoisting)은 자바스크립트에서 변수와 함수 선언이 맨 위로 이동되는 것이다. 함수나 변수는 선언 방식에 따라 달라진다. 함수를 먼저 호출 했을 때 작동여부를 확인 할 수 있다.

변수	재선언	재할당(업데이트)	hoisting(호이스팅*)
var	가능	가능	가능
let	불가능	가능	가능, but 초기화 불가능. -> 선언전에 사용할 경우 참조 오류
const	불가능	불가능 (객체 속성은 업뎃 가능)

 

var의 단점과 let의 호이스팅

요약
var는 선언 전에, 값을 할당하거나 변수를 출력할 수 있다. 반면 let은 선언부터 해야 하며, 할당하거나 변수를 출력하게되면 에러가 나온다. 

 

이렇게 보면 모두 가능한 var가 좋아보이지만 쓰지 않는 이유는 변수 남용의 문제가 있다. 유연하지만 코드 라인이 길어지면 버그 파악하기 힘들기 때문이다. 그리고 변수는 1) 선언 -> 2) 초기화 -> 3) 할당 단계를 거치는데, var는 선언과 초기화가 한번에 된다. 아래 코드처럼 var 변수는 호이스팅되어 맨 위로 올려져서 선언되고, 콘솔로그가 찍히기 때문에 undefined가 나온다. 콘솔 출력 후 var 변수 값이 할당된다. 그리고 var는 block scope(블록 {} 범위)을 무시한다.

// 콘솔 출력 이후 var 정의
console.log(vari);
var vari = 1; // undefined

// 자바스크립트의 호이스팅 (var 선언, 콘솔 출력, 할당)
var vari;
console.log(vari);
vari = 1;

 

반면, let은 선언과 초기화가 분리되어 진행된다. 때문에 let은 선언전에 사용할 경우 다음과 같이 참조 오류(Reference Error)가 나타난다. 

console.log(bar);
let bar = 1;

// Uncaught ReferenceError: bar is not defined

let bar;
console.log(bar);

 

const를 왜 쓰나?

const로 선언된 변수는 재선언, 재할당이 불가하기 때문에 바로 초기화해야 한다.

하지만 객체의 경우는 property 속성만 재할당이 가능하다. 그래서 재할당이 필요 없는 상수와 객체에 쓰인다. 재할당을 막아주기 때문에 안전하고 오류 방지를 위해 일반적으로 변수 선언시 const를 사용한다.

const people = {
    id : 1,
    name : "admin"
};

people.name = "user";

console.log(people.name); // user