▶ JavaScript Tutorial

JavaScript Const

Introduction to JavaScript `const`: 자바스크립트 `const` 완벽 가이드

*자바스크립트(JavaScript)**는 웹 개발에서 가장 기본적이고 중요한 요소 중 하나인 **변수(Variables)**를 통해 데이터를 저장하고 조작합니다. 자바스크립트에서 변수를 선언할 때 사용되는 const 키워드는 ES6(ECMAScript 2015)부터 도입되어 var와 let보다 더 엄격한 변수 관리를 가능하게 합니다. 이 가이드에서는 const의 개념부터 사용법, var 및 let과의 차이점, 스코프, 호이스팅 등 다양한 측면을 자세히 살펴보겠습니다.

1. `const`이란?

const는 자바스크립트에서 변수를 선언할 때 사용하는 키워드 중 하나로, **블록 스코프(Block Scope)**를 지원하며, 재할당이 불가능한 상수를 선언할 때 주로 사용됩니다. const는 var와 let의 단점을 보완하고, 더 엄격한 변수 관리를 가능하게 합니다.

1.1. 주요 특징

블록 스코프(Block Scope): 변수가 선언된 블록 내에서만 유효합니다.
불변 바인딩(Immutable Binding): 변수에 한 번 값을 할당하면 재할당이 불가능합니다.
재선언 불가(No Redeclaration): 같은 스코프 내에서 동일한 이름으로 다시 선언할 수 없습니다.
호이스팅(Hoisting): 변수 선언이 호이스팅되지만, 초기화는 선언 위치에서 이루어집니다. 이로 인해 일시적 사각지대(Temporal Dead Zone, TDZ)가 존재합니다.

2. `const`의 선언과 초기화

const를 사용하여 변수를 선언하고 초기화하는 방법은 다음과 같습니다.

2.1. 변수 선언

const greeting;

주의: const로 변수를 선언할 때는 반드시 초기화를 함께 해야 합니다. 초기화하지 않으면 SyntaxError가 발생합니다.

2.2. 변수 선언과 초기화

const greeting = "안녕하세요!";
console.log(greeting); // 출력: 안녕하세요!

2.3. 변수 재할당 (불가능)

const count = 10;
// count = 20; // TypeError: Assignment to constant variable.

3. `const`과 `var`, `let`의 차이점

const와 함께 var, let도 자바스크립트에서 변수를 선언할 때 사용되는 키워드입니다. 이들 간의 주요 차이점을 이해하면 보다 안전하고 예측 가능한 코드를 작성할 수 있습니다.

3.1. 스코프(Scope)

var: 함수 스코프(Function Scope)를 가집니다. 블록 내에서 선언된 변수도 함수 전체에서 접근 가능합니다.
```
function testVar() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 출력: 10
}
testVar();
```

let: 블록 스코프(Block Scope)를 가집니다. 변수는 선언된 블록 내에서만 접근 가능합니다.

function testLet() {
    if (true) {
        let y = 20;
        console.log(y); // 출력: 20
    }
    // console.log(y); // ReferenceError: y is not defined
}
testLet();

const: 블록 스코프(Block Scope)를 가집니다. 변수는 선언된 블록 내에서만 접근 가능합니다.

function testConst() {
    if (true) {
        const z = 30;
        console.log(z); // 출력: 30
    }
    // console.log(z); // ReferenceError: z is not defined
}
testConst();

3.2. 호이스팅(Hoisting)

var: 변수 선언이 호이스팅되어, 선언 전에 접근하면 undefined가 됩니다.
```
console.log(a); // 출력: undefined
var a = 5;
```

*let*과 const: 변수 선언은 호이스팅되지만, 초기화는 선언 위치에서 이루어지므로 선언 전에 접근하면 ReferenceError가 발생합니다.

// console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

// console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 20;

3.3. 재선언과 재할당

var:
- 재선언(Re-declaration): 같은 스코프 내에서 동일한 변수 이름을 여러 번 선언할 수 있습니다.
```
var d = 15;
var d = 20;
console.log(d); // 출력: 20
```
- 재할당(Reassignment): 변수의 값을 변경할 수 있습니다.
```
var e = 25;
e = 30;
console.log(e); // 출력: 30
```
let:
- 재선언 불가(Redeclaration Not Allowed): 같은 스코프 내에서 동일한 변수 이름을 다시 선언할 수 없습니다.
```
let f = 35;
// let f = 40; // SyntaxError: Identifier 'f' has already been declared
```
- 재할당 가능(Reassignment Allowed): 변수의 값을 변경할 수 있습니다.
```
let g = 45;
g = 50;
console.log(g); // 출력: 50
```
const:
- 재선언 불가(Redeclaration Not Allowed): 같은 스코프 내에서 동일한 변수 이름을 다시 선언할 수 없습니다.
```
const h = 55;
// const h = 60; // SyntaxError: Identifier 'h' has already been declared
```
- 재할당 불가(Reassignment Not Allowed): 변수의 값을 변경할 수 없습니다.
```
const i = 65;
// i = 70; // TypeError: Assignment to constant variable.
```

4. 블록 스코프(Block Scope)

const는 블록 스코프를 지원하여, 변수가 선언된 블록 내에서만 유효하게 됩니다. 이는 코드의 예측 가능성과 유지보수성을 높여줍니다.

4.1. 예시

{
    const j = 60;
    console.log(j); // 출력: 60
}
// console.log(j); // ReferenceError: j is not defined

4.2. 제어문 내에서의 사용

for (const k = 0; k < 3; k++) {
    console.log(k); // 출력: 0, 1, 2
}
// console.log(k); // ReferenceError: k is not defined

참고: const로 선언된 변수는 재할당이 불가능하므로, 루프 인덱스처럼 변경이 필요한 경우 let을 사용하는 것이 적합합니다.

5. 호이스팅과 일시적 사각지대(Temporal Dead Zone, TDZ)

const는 호이스팅되지만, 선언 전에 접근할 경우 ReferenceError가 발생하는 일시적 사각지대(TDZ)를 가집니다. 이는 변수의 선언과 초기화를 명확하게 구분하게 도와줍니다.

5.1. 호이스팅 예시

{
    // console.log(l); // ReferenceError: Cannot access 'l' before initialization
    const l = 70;
    console.log(l); // 출력: 70
}

5.2. TDZ의 장점

에러 방지(Error Prevention): 변수가 선언되기 전에 사용되는 것을 방지하여 코드의 안정성을 높입니다.
명확한 코드 작성(Clear Code Writing): 변수의 선언과 초기화를 명확하게 구분할 수 있습니다.

6. `const`의 사용 권장 사례

const는 var와 let의 단점을 보완하고, 더 안전하고 예측 가능한 변수를 선언할 수 있도록 도와줍니다. 다음은 const를 사용하는 권장 사례입니다.

6.1. 변하지 않는 데이터

변수가 재할당되지 않는 경우 const를 사용하여 의도하지 않은 재할당을 방지합니다.

const MAX_USERS = 100;
// MAX_USERS = 150; // TypeError: Assignment to constant variable.

6.2. 상수 사용

변하지 않는 상수 값(예: API 엔드포인트, 설정 값 등)에 const를 사용합니다.

const API_ENDPOINT = "<https://api.example.com>";
const VERSION = "1.0.0";

6.3. 객체와 배열 사용

객체와 배열을 const로 선언하면 변수 자체는 재할당할 수 없지만, 내부의 속성이나 요소는 변경할 수 있습니다. 이는 참조 타입의 데이터를 안전하게 관리하는 데 유용합니다.

const person = {
    name: "Alice",
    age: 25
};

person.age = 26; // 가능
console.log(person.age); // 출력: 26

// person = { name: "Bob", age: 30 }; // TypeError: Assignment to constant variable.

7. `const`의 한계와 주의사항

const를 사용할 때도 주의해야 할 점이 있습니다.

7.1. 재선언 불가

같은 스코프 내에서 동일한 변수 이름을 다시 선언할 수 없습니다. 이는 SyntaxError를 발생시킵니다.

const m = 100;
// const m = 200; // SyntaxError: Identifier 'm' has already been declared

7.2. 재할당 불가

const로 선언된 변수는 한 번 값을 할당하면 재할당할 수 없습니다.

const n = 150;
// n = 200; // TypeError: Assignment to constant variable.

7.3. 불변성을 보장하지 않음

const로 선언된 객체나 배열은 변수 자체의 재할당은 불가능하지만, 내부의 속성이나 요소는 변경할 수 있습니다. 진정한 불변성을 유지하려면 Object.freeze()와 같은 메서드를 사용해야 합니다.

const settings = {
    theme: "dark",
    notifications: true
};

settings.notifications = false; // 가능
console.log(settings.notifications); // 출력: false

// settings = {}; // TypeError: Assignment to constant variable.

// 진정한 불변성 유지
const frozenSettings = Object.freeze({
    theme: "dark",
    notifications: true
});

frozenSettings.theme = "light"; // 무시됨
console.log(frozenSettings.theme); // 출력: dark

8. `const`과 `let`의 적절한 사용

const와 let은 각각 다른 목적을 가지고 있습니다. 상황에 맞게 적절히 선택하여 사용하는 것이 중요합니다.

8.1. 가능한 `const` 사용

변수가 재할당되지 않는다면 const를 사용하는 것이 좋습니다. 이는 코드의 예측 가능성을 높이고, 의도치 않은 재할당을 방지합니다.

const API_ENDPOINT = "<https://api.example.com>";
// API_ENDPOINT = "<https://api.newexample.com>"; // TypeError

8.2. 재할당이 필요할 때 `let` 사용

값이 변할 가능성이 있는 변수는 let을 사용하여 선언합니다.

let counter = 0;
counter++;

8.3. `var` 사용 피하기

var는 스코프와 호이스팅의 복잡성으로 인해 예기치 않은 동작이 발생하기 쉬우므로, 가능하면 let과 const만 사용하는 것이 좋습니다.

// var 사용 예 (권장하지 않음)
function exampleVar() {
    var x = 10;
    if (true) {
        var x = 20; // 같은 변수 이름으로 재선언 및 재할당
        console.log(x); // 출력: 20
    }
    console.log(x); // 출력: 20 (예기치 않은 결과)
}
exampleVar();

// let 사용 예 (권장)
function exampleLet() {
    let y = 10;
    if (true) {
        let y = 20; // 다른 스코프의 변수
        console.log(y); // 출력: 20
    }
    console.log(y); // 출력: 10
}
exampleLet();

9. 실습 예제

const의 사용법을 이해하기 위해 몇 가지 실습 예제를 살펴보겠습니다.

9.1. 변수 선언과 초기화

const greeting = "안녕하세요!";
console.log(greeting); // 출력: 안녕하세요!

9.2. 블록 스코프 예제

{
    const city = "Seoul";
    console.log(city); // 출력: Seoul
}
// console.log(city); // ReferenceError: city is not defined

9.3. 객체와 배열과 함께 `const` 사용

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // 출력: ["Apple", "Banana", "Cherry"]

fruits.push("Grape"); // 가능
console.log(fruits); // 출력: ["Apple", "Banana", "Cherry", "Grape"]

// fruits = ["Mango"]; // TypeError: Assignment to constant variable.

const person = {
    name: "Alice",
    age: 25
};

person.age = 26; // 가능
console.log(person.age); // 출력: 26

// person = { name: "Bob", age: 30 }; // TypeError: Assignment to constant variable.

9.4. 재할당 방지

const PI = 3.14159;
console.log(PI); // 출력: 3.14159

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

10. 최적의 변수 사용을 위한 팁

const를 효과적으로 사용하기 위해 다음과 같은 팁을 고려해보세요.

10.1. 변경되지 않는 모든 변수에 `const` 사용

변수가 재할당되지 않는다면 const를 사용하는 것이 좋습니다. 이는 코드의 예측 가능성을 높이고, 의도치 않은 재할당을 방지합니다.

const API_ENDPOINT = "<https://api.example.com>";
// API_ENDPOINT = "<https://api.newexample.com>"; // TypeError

10.2. 의미 있는 변수 이름 사용

변수의 목적과 용도를 명확하게 나타내는 이름을 사용하여 코드의 가독성을 향상시킵니다.

const userAge = 25;
const totalPrice = 100;
const isLoggedIn = true;

10.3. 변수의 범위를 최소화

변수의 스코프를 가능한 한 좁게 유지하여, 의도치 않은 접근을 방지하고 코드의 가독성을 높입니다.

function calculateArea(radius) {
    const PI = 3.14159;
    const area = PI * radius * radius;
    return area;
}
// PI와 area는 함수 외부에서 접근할 수 없습니다.

10.4. 진정한 불변성을 유지하려면 `Object.freeze` 사용

객체의 속성이 변경되지 않도록 하려면 Object.freeze를 사용합니다.

const config = Object.freeze({
    theme: "light",
    version: "1.0.0"
});

config.theme = "dark"; // 무시됨
console.log(config.theme); // 출력: light

11. 요약

const 키워드: const 키워드는 블록 스코프를 지원하며, 재할당이 불가능한 변수를 선언할 때 사용됩니다.
var와 let과의 차이점:
- const는 블록 스코프를 가지며, var는 함수 스코프를, let은 블록 스코프를 가집니다.
- const는 재선언이 불가능하지만, var는 가능합니다.
- const는 호이스팅되지만, 선언 전에 접근하면 ReferenceError가 발생합니다.
호이스팅과 TDZ: const는 선언이 호이스팅되지만, 초기화는 선언 위치에서 이루어지므로 선언 전에 접근하면 오류가 발생합니다.
적절한 사용:
- 재할당이 필요 없는 변수에는 const를 사용합니다.
- 재할당이 필요한 변수에는 let을 사용합니다.
- var 사용을 피하고 let과 const만 사용하여 스코프와 호이스팅 관련 버그를 방지합니다.
객체와 배열의 불변성: const는 객체나 배열의 재할당을 방지하지만, 내부의 속성이나 요소는 변경할 수 있습니다. 진정한 불변성을 원할 경우 Object.freeze를 사용합니다.
비구조화 할당과 스프레드 연산자: 배열과 객체의 값을 쉽게 변수에 할당하고, 복사하거나 결합할 수 있습니다.
모듈화: import와 export를 사용하여 코드를 논리적인 단위로 분리할 수 있습니다.
ES6+ 기능: 화살표 함수, 클래스, 템플릿 리터럴 등 다양한 최신 기능을 활용하여 코드를 더 간결하고 효율적으로 작성할 수 있습니다.
문법 오류와 디버깅: const와 관련된 일반적인 문법 오류를 이해하고, 개발자 도구를 활용하여 효과적으로 디버깅할 수 있습니다.

const를 적절히 활용하면 자바스크립트 코드의 예측 가능성과 안정성을 높일 수 있습니다. const와 let의 사용을 구분하고, 스코프와 호이스팅의 개념을 명확히 이해하여 효율적이고 안전한 코드를 작성해보세요.

JavaScript의 const 키워드는 현대적인 변수 선언 방식으로, 코드의 가독성과 유지보수성을 크게 향상시킵니다. const의 특성과 사용법을 숙지하고, 실제 프로젝트에 적용함으로써 더 나은 개발자로 성장할 수 있습니다!

JavaScript의 변수는 프로그램의 데이터 흐름을 관리하는 데 필수적인 도구입니다. 올바른 변수 선언과 관리 방법을 숙지하여 효율적이고 안전한 코드를 작성해보세요!

코딩 스쿨 JavaScript