[JAVASCRIPT] var, let, const 비교

자바스크립트에서 변수 선언은 var, let, const 키워드로 할 수 있다.

자바스크립트는 변수 선언이 런타임중에 일어나지 않고 함수, 변수 선언문을 먼저 실행하고 이를 호이스팅이라고 한다.

선언 단계를 통해 자바스크립트 엔진에 변수의 존재를 알린다. 암묵적으로 undefined을 할당해 초기화 한다.

초기화 단계를 통해 값을 저장하기 위한 메모리 공간을 확보한다.

재할당

var, let 키워드는 새로운 값을 재할당하는 것에 문제가 없다.

const 키워드는 새로운 값을 재할당할 수 없다.

var a = 10;
a = 20;
console.log("a is: ", a); // 20

let b = 10;
b = 30;
console.log("b is: ", b); // 30

const c = 10;
// c = 40;
// console.log("c is: ", c); 
// TypeError: Assignment to constant variable.

같은 이름 중복 선언

var 키워드는 같은 이름으로 중복 선언이 가능하다.

let, const 키워드는 같은 이름으로 중복 선언을 하면 해당 변수이름은 이미 선언되었다는 문법 오류를 출력시킨다.

var a = 10;
var a = 20;
console.log("a is: ", a);

let b = 10;
// let b = 30;
// console.log("b is: ", b);
// SyntaxError: Identifier 'b' has already been declared

const c = 10;
// const c = 40;
// console.log("c is: ", c);
// SyntaxError: Identifier 'c' has already been declared

범위

함수, 조건문 외부에서 모든 키워드로 선언한 변수는 조건문, 함수에서도 접근이 가능하다.

var a = 10;
function varChangeValue() {
    a = 20;
}
varChangeValue();
console.log("a is: ", a); // 20

let b = 10;
function letChangeValue() {
    b = 20;
}
letChangeValue();
console.log("b is: ", b); // 20

const c = 10;
function printValue() {
    console.log("c is: ", c); // 10
}
printValue();

let, const 키워드는 중복 선언이 불가능하지만 블록 레벨 스코프(함수, 조건문 등)을 따르기 때문에 블록 레벨에서 다시 선언 할 수 있다.

let a = 10;
function printLetValue() {
    let a = 20;
    console.log("a is: ", a); // 20
}
printLetValue();
console.log("a is: ", a); // 10

const c = 10;
function printConstValue() {
    const c = 30;
    console.log("c is: ", c); // 30
}
printConstValue();
console.log("c is: ", c); // 10

참고자료

https://www.howdy-mj.me/javascript/var-let-const

var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프