[Javascript] const 키워드

const 키워드는 상수$_{constant}$를 선언하기 위해 사용한다.

 

그러나 반드시 상수만을 위해 사용되지는 않는다.

 

const 키워드의 특징은 let 키워드와 대부분 동일하지만, 몇 가지 중요한 차이점이 있다.

 

 

const

선언과 초기화

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.

 

그렇지 않으면 다음과 같이 문법 에러가 발생한다.

const foo; // SyntaxError: Missing initializer in const declaration
const bar = 10;
console.log(bar); // 10

위 예제에서 foo 변수는 초기화 없이 선언되었기 때문에 문법 에러가 발생한다.

 

반면 bar 변수는 선언과 동시에 초기화되었으므로 정상적으로 동작한다.

 

 

블록 레벨 스코프와 변수 호이스팅

const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

{
    console.log(baz); // ReferenceError: baz is not defined
    const baz = 'block scoped';
    console.log(baz); // block scoped
}

위 예제에서 baz 변수는 블록 내에서 선언되었다.

 

선언문 이전에 참조하려고 하면 일시적 사각지대로 인해 ReferenceError가 발생한다.

 

선언문 이후에는 정상적으로 참조할 수 있다.

 

재할당 금지

var 또는 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 금지된다.

const c = 50;
console.log(c); // 50

// c = 60; // TypeError: Assignment to constantt variable.

재할당 시도 시 TypeError가 발생한다.

 

상수

const 키워드로 선언한 변수에 원시 값을 할당한 경우 변수 값을 변경할 수 없다.

 

원시 값은 변경 불가능한 값$_{immutable \space value}$이므로 재할당 없이 값을 변경할 수 있는 방법이 없기 때문이다.

 

이러한 특징을 이용해 const 키워드는 상수를 표현하는 데 사용된다.

 

 

상수의 정의

변수의 상대 개념인 상수는 재할당이 금지된 변수를 말한다.

 

상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있다.

 

단 변수는 언제든지 재할당을 통해 변수 값을 변경할 수 있지만 상수는 재할당이 금지된다.

const PI = 3.14;
console.log(PI); // 3.14

// PI = 3.14159; // TypeError: Assignment to constant variable.

PI 변수는 const 키워드로 선언되었기 때문에 재할당할 수 없다.

 

 

상수의 활용

상수는 상태 유지와 가독성, 유지보수의 편의를 위해 적극적으로 사용해야 한다.

 

코드에서 자주 사용되는 값이나 변경되지 않는 값들을 상수로 선언함으로써 코드의 가독성을 높이고 실수를 줄일 수 있다.

const MAX_USERS = 100;
const API_URL = 'https://example.com/data';

function fetchData() {
    return fetch(API_URL)
        .then(response => response.json())
        .then(data => {
            console.log(`Fetched ${data.length} items.`);
        });
}

console.log(`Maximum users: ${MAX_USERS}`);
fetchData();

위 예제에서 MAX_USERS와 API_URL은 상수로 선언되어 코드의 가독성을 높이고 실수를 줄이는 데 도움을 준다.

 

상수를 사용하면 값이 변경되지 않을 것이라는 보장이 있으므로 코드의 안정성이 높아진다.

 

 

const 키워드와 객체

const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없다.

 

그러나 const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.

 

 

원시 값과 객체의 차이

변경 불가능한 값인 원시 값은 재할당 없이 변경할 수 있는 방법이 없다.

 

하지만 변경 가능한 값인 객체는 재할당 없이도 직접 변경이 가능하다.

 

const 키워드는 재할당을 금지할 뿐 불변을 의미하지는 않는다.

const num = 42;
// num = 100; // TypeError: Assignment to constant variable.

const person = { name: 'Alice', age: 25 };
person.age = 26;
console.log(person.age); // 26

num 변수는 const 키워드로 선언된 원시 값이므로 재할당이 불가능하다.

 

반면 person 객체는 const 키워드로 선언되었지만 객체의 프로퍼티는 변경이 가능하다.

 

 

객체의 변경

위에서 보았다시피 const 키워드로 선언된 객체는 프로퍼티의 동적 생성, 삭제 값의 변경을 통해 객체를 변경할 수 있다.

const car = {
    make: 'Hyundai',
    model: 'Sonata'
};

car.model = 'Grandeur'
console.log(car.model); // Grandeur

car.year = 2024;
console.log(car.year); // 2024

delete car.make;
console.log(car.make); // undefined

이 때 객체가 변경되더라도 변수에 할당된 참조 값은 변경되지 않는다.

 

 

불변 객체 만들기

객체를 완전히 불변하게 만드려면 Object.freeze 메서드를 사용할 수 있다.

 

이를 통해 객체의 프로퍼티 수정, 추가, 삭제를 모두 막을 수 있다.

const book = Object.freeze({
    title: 'Javascript',
    author: 'John Doe'
});

book.title = 'Python'; // 변경되지 않음
console.log(book.title); // Javascript

book.year = 2021 // 추가되지 않음
console.log(book.year); // undefined

delete book.author; // 삭제되지 않음
console.log(book.author); // John Doe

book 객체가 Object.freeze 메서드에 의해 동결되었기 때문에 변경, 추가, 삭제 모두 불가능한 것을 볼 수 있다.

 

 

references

product.kyobobook.co.kr

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고

 

const - JavaScript | MDN

const - JavaScript | MDN