자바스크립트 변수와 상수: 개념부터 실전 활용까지 완벽 가이드

자바스크립트(JavaScript)는 동적 타이핑(dynamic typing) 언어로, 변수 선언 시 데이터 타입을 명시하지 않아도 됩니다. 이러한 유연성 덕분에 변수를 쉽게 사용할 수 있지만, 스코프(Scope, 변수의 유효 범위)와 변수 선언 방식 을 올바르게 이해하지 못하면 예상치 못한 버그를 초래할 수 있습니다.

이번 포스트에서는 변수(Variable)와 상수(Constant)의 개념, 각 변수 유형의 유효 범위(Scope), 그리고 실용적인 활용법 을 심층적으로 탐구합니다.

---

📌 자바스크립트 변수 선언 방식

자바스크립트에서는 변수를 선언할 때 var, let, const 세 가지 키워드를 사용할 수 있습니다. 이들은 선언 방식과 유효 범위에서 차이가 있으며, 각각의 특징을 이해하는 것이 중요합니다.

---

1. var: 기존 방식의 변수 선언 (사용 지양)

var는 ES6(ECMAScript 2015) 이전의 변수 선언 방식으로, 함수 스코프(Function Scope) 를 가지며, 중복 선언이 가능 합니다.

var name = "Alice";
var name = "Bob"; // 오류 없이 다시 선언 가능
console.log(name); // Bob

👉 var는 블록 스코프를 따르지 않기 때문에, 예상치 못한 값 변경이 발생할 수 있습니다.

🚀 추가 예제: var의 함수 스코프 특징

function example() {
    var x = 10;
    if (true) {
        var x = 20; // 동일한 변수로 간주됨
        console.log(x); // 20
    }
    console.log(x); // 20 (값이 변경됨)
}
example();

💡 해결책: var 대신 let과 const를 사용하는 것이 좋습니다.

---

2. let: 블록 범위를 가지는 변수

ES6 이후 등장한 let은 블록 스코프(Block Scope) 를 가지며, 같은 블록 안에서만 유효합니다.

let color = "blue";
if (true) {
    let color = "red"; // 새롭게 선언됨
    console.log(color); // red
}
console.log(color); // blue

👉 같은 변수명이지만, 서로 다른 스코프에서 선언되었기 때문에 충돌하지 않음!

🚀 추가 예제: for 루프에서 let 사용

for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}
// console.log(i); // 오류 발생 (i는 블록 내부에서만 유효)

💡 let을 사용하면 루프 내 변수(i)가 블록 범위를 가지므로 외부에서 접근할 수 없도록 보호 됩니다.

---

3. const: 변경할 수 없는 값 (상수 선언)

const 키워드를 사용하면 한 번 할당된 값은 변경할 수 없는 상수(Constant) 를 선언할 수 있습니다.

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

// 다음 코드는 오류 발생!
// PI = 3.14; // TypeError: Assignment to constant variable.

📌 const와 객체, 배열의 동작 차이

🚀 추가 예제: 객체와 배열에서 const 사용

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

// person 자체를 변경하면 오류 발생
// person = { name: "Bob", age: 30 }; // TypeError

💡 객체와 배열은 const로 선언해도 내부 값을 변경할 수 있으므로 주의!

---

🔹 변수의 유효 범위(Scope)

변수의 유효 범위(Scope)는 어디에서 변수를 접근할 수 있는지를 결정하는 중요한 개념 입니다.

---

1. 전역 범위(Global Scope)

전역에서 선언된 변수는 프로그램 전체에서 접근 가능합니다.

let globalVar = "나는 전역 변수";

function showGlobal() {
    console.log(globalVar); // 출력: 나는 전역 변수
}

showGlobal();
console.log(globalVar); // 출력: 나는 전역 변수

💡 전역 변수는 남용하지 않는 것이 좋습니다. 유지보수가 어려워질 수 있음!

---

2. 지역 범위(Local Scope)

함수 내부에서 선언된 변수는 해당 함수 내에서만 유효합니다.

function localScopeExample() {
    let localVar = "나는 지역 변수";
    console.log(localVar); // 출력: 나는 지역 변수
}

localScopeExample();

// 오류 발생!
// console.log(localVar); // ReferenceError: localVar is not defined

💡 지역 변수를 사용하면 코드의 모듈성과 안정성이 높아집니다.

---

3. 블록 범위(Block Scope)

let과 const는 블록 {} 내에서만 유효합니다.

if (true) {
    let blockScoped = "나는 블록 변수";
    console.log(blockScoped); // 출력: 나는 블록 변수
}

// 오류 발생!
// console.log(blockScoped); // ReferenceError: blockScoped is not defined

🚀 추가 예제: for 루프 내 블록 변수

for (let i = 0; i < 3; i++) {
    let message = "Hello";
    console.log(message);
}
// console.log(message); // 오류 발생 (블록 외부에서는 접근 불가)

💡 let과 const를 활용하면 변수의 유효 범위를 명확히 제한할 수 있음!

---

🎯 결론: 변수와 상수를 효과적으로 활용하는 방법

✅ 전역 변수(Global Scope)는 최소화 하고, 지역 변수(Local Scope)를 적극 활용 하세요.
✅ 변경되지 않는 값은 const로 선언 하여 보호하세요.
✅ let을 사용하여 블록 스코프를 유지 하고, var는 사용하지 않는 것이 좋습니다.
✅ 객체와 배열을 const로 선언할 때 내부 값이 변경될 수 있다는 점을 고려 하세요.

자바스크립트의 변수와 스코프를 잘 이해하고 활용하면 더욱 안전하고 유지보수하기 쉬운 코드 를 작성할 수 있습니다! 🚀