자바스크립트 변수 선언과 데이터 타입: 완벽한 이해와 실전 예제

자바스크립트(JavaScript)를 처음 배우거나 심화 학습을 진행할 때 변수(Variable)와 데이터 타입(Data Type) 은 필수적인 개념입니다. 변수는 데이터를 저장하는 공간이며, 데이터 타입은 변수에 저장할 수 있는 값의 종류를 결정합니다.

자바스크립트는 동적 타이핑(dynamic typing) 을 지원하는 언어이므로, 변수의 타입을 명확하게 지정하지 않고도 값을 할당할 수 있습니다. 하지만 변수 선언 방식에 따라 스코프(scope) 와 재할당 가능 여부 가 달라지므로, 이를 정확히 이해하는 것이 중요합니다.

이번 글에서는 var, let, const의 차이점을 분석하고, 실제 개발에서 유용한 예제들 을 통해 변수 선언과 초기화 방법을 심층적으로 탐구해보겠습니다.

---

🔍 1. 변수란 무엇이며, 왜 중요한가?

변수는 프로그래밍에서 데이터를 저장하고 관리하는 메모리 공간 입니다.
변수를 활용하면 데이터를 효율적으로 관리할 수 있으며, 유지보수가 쉬운 코드를 작성할 수 있습니다.

✅ 변수가 중요한 이유

• 데이터 저장 및 관리: 변수를 통해 문자열, 숫자, 객체 등의 데이터를 저장하고 필요할 때 불러올 수 있습니다.
• 가독성과 유지보수성 증가: 변수명을 적절히 설정하면 코드의 가독성이 높아지고, 유지보수가 쉬워집니다.
• 재사용성 향상: 변수를 사용하면 특정 값을 여러 번 활용할 수 있어 효율적인 코드 작성이 가능합니다.

---

🏗️ 2. 자바스크립트 변수 선언 방식 (var, let, const) 비교

자바스크립트에서 변수를 선언하는 방법은 크게 var, let, const 세 가지가 있습니다.
각각의 특징과 차이점을 자세히 살펴보겠습니다.

---

2.1 var: 과거의 변수 선언 방식 (사용 지양)

var는 ES6(ECMAScript 2015) 이전에 사용되던 변수 선언 방식입니다.
현재는 let과 const가 등장하면서 거의 사용되지 않지만, 기존 코드에서 종종 볼 수 있습니다.

🛠️ 특징:

• 함수 스코프(function scope) 를 가짐 → 함수 내부에서만 유효
• 중복 선언 가능 → 같은 이름의 변수를 여러 번 선언할 수 있음
• 호이스팅(hoisting) 발생 → 선언 전에 접근하면 undefined 반환

✅ 예제 1: var의 호이스팅 문제

console.log(name); // undefined (호이스팅 발생)
var name = "홍길동";
console.log(name); // 출력: 홍길동

✅ 예제 2: var의 블록 스코프 문제

if (true) {
    var testVar = "블록 내부";
}
console.log(testVar); // 출력: 블록 내부 (블록 스코프 미적용)

🔹 var는 블록 스코프를 지원하지 않기 때문에, 예기치 않은 오류를 유발할 가능성이 큽니다.

---

2.2 let: 블록 스코프를 지원하는 변수 선언 방식 (권장)

let은 var의 단점을 개선한 변수 선언 방식으로, ES6에서 도입되었습니다.

🛠️ 특징:

• 블록 스코프(block scope) 지원 → {} 중괄호 내부에서만 유효
• 중복 선언 불가 → 동일한 이름의 변수를 같은 스코프에서 두 번 선언할 수 없음
• 호이스팅 발생하지만 초기화 전 접근 불가 → 선언 전에 접근하면 오류 발생

✅ 예제 1: let의 블록 스코프

let age = 30;
if (true) {
    let age = 25; // 같은 이름으로 다른 블록에서 선언 가능
    console.log(age); // 출력: 25
}
console.log(age); // 출력: 30

✅ 예제 2: let을 활용한 반복문 변수 관리

for (let i = 0; i < 3; i++) {
    console.log(i);
}
// console.log(i); // 오류 발생 (i는 블록 스코프 내에서만 유효)

🔹 let을 사용하면 루프 변수(i)가 블록 내부에서만 유효하여 안전한 코드 작성이 가능합니다.

---

2.3 const: 변하지 않는 값을 저장하는 상수 선언

const는 한 번 값이 할당되면 변경할 수 없는 변수 를 선언할 때 사용됩니다.

🛠️ 특징:

• 블록 스코프 지원
• 재할당 불가
• 객체와 배열 내부 값 변경 가능 (주의!)

✅ 예제 1: const를 활용한 상수 선언

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

// PI = 3.15; // 오류 발생! (재할당 불가)

✅ 예제 2: const로 선언한 객체의 속성 변경

const user = { name: "이영희", age: 25 };
user.age = 26; // 속성 변경 가능
console.log(user); // 출력: { name: "이영희", age: 26 }

// user = { name: "김철수", age: 30 }; // 오류 발생! 객체 자체 재할당 불가

🔹 객체와 배열을 const로 선언하면 내부 값을 수정할 수 있으므로 주의해야 합니다.

---

🚀 3. 실전 예제: 학생 정보 관리 프로그램

아래 예제는 다양한 변수 선언 방식을 활용하여 학생 정보를 관리하는 간단한 프로그램 입니다.

// 학생 정보 저장
const studentName = "김철수"; // 변경 불가능한 이름
let studentAge = 20; // 변경 가능
let grades = [90, 85, 78, 92]; // 배열 초기화

// 성적 추가 및 초기화
grades.push(88); // 새로운 성적 추가

// 학생 정보 출력
console.log(`학생 이름: ${studentName}, 나이: ${studentAge}`);
console.log(`성적 목록: ${grades.join(", ")}`);

// 성적 평균 계산
const averageGrade = grades.reduce((sum, grade) => sum + grade, 0) / grades.length;
console.log(`평균 성적: ${averageGrade.toFixed(2)}`); // 소수점 2자리까지 출력

🔹 이 예제에서는 const와 let을 적절히 활용하여 변수를 선언하고, 학생 정보를 효율적으로 관리하는 방법을 보여줍니다.

---

🎯 4. 결론: 변수 선언 방식 선택 기준

✅ var 사용 지양
✅ let은 변경 가능성이 있는 데이터에 사용
✅ const는 변하지 않는 값에 사용 (객체 포함)

자바스크립트에서 변수 선언 방식은 코드의 안정성과 유지보수성에 큰 영향을 미칩니다.
올바른 변수 선언 방식을 선택하여 더욱 효율적이고 안정적인 코드를 작성해보세요! 🚀