모던 자바스크립트 입문 - Chapter 3: 변수와 값 💻

안녕하세요! 오늘은 자바스크립트의 핵심 개념 중 하나인 변수와 값에 대해 알아보겠습니다.

📌 목차

• 변수란 무엇인가?
• 변수 선언 방법 (var, let, const)
• 값의 종류와 데이터 타입
• 변수 명명 규칙
• 실습 예제
• 마무리 정리

---

🤔 변수란 무엇인가?

변수(Variable)는 데이터를 저장하는 공간입니다.

마치 상자에 물건을 담아두는 것처럼, 변수에는 숫자, 문자, 불린값 등 다양한 데이터를 담을 수 있어요.

// 변수에 값을 저장하는 예시
let userName = "김개발";
let age = 25;
let isStudent = true;

---

📝 변수 선언 방법

1️⃣ var (구식 방법) - 함수 스코프, 재선언 가능

var name = "홍길동";
var age = 30;

 

특징:

• 함수 스코프를 가짐
• 호이스팅됨
• 재선언 가능
• 현재는 사용을 권장하지 않음

2️⃣ let (권장) - 블록 스코프, 재선언 불가능, 재할당 가능

let userName = "이개발";
let userAge = 28;

// 값 변경 가능
userName = "박개발";

 

특징:

• 블록 스코프를 가짐
• 재선언 불가능
• 값 변경 (재할당) 가능

3️⃣ const (상수) - 블록스코프, 재선언 / 재할당 불가능

const PI = 3.14159;
const COMPANY_NAME = "테크컴퍼니";

 

특징:

• 블록 스코프를 가짐
• 재선언 불가능
• 값 변경 (재할당) 불가능
• 선언과 동시에 초기화 필요

---

🎯 값의 종류와 데이터 타입

자바스크립트의 데이터 타입은 크게 원시 타입과 참조 타입으로 나뉩니다.

원시 타입 (Primitive Types)

1. 숫자 (Number)

let integer = 42;        // 정수
let decimal = 3.14;      // 소수
let negative = -10;      // 음수

2. 문자열 (String)

let singleQuote = '안녕하세요';
let doubleQuote = "반갑습니다";
let templateLiteral = `제 이름은 ${userName}입니다`;

3. 불린 (Boolean)

let isTrue = true;
let isFalse = false;

4. undefined와 null

let undefinedValue;        // undefined
let nullValue = null;      // null

5. 심벌 (symbol) - ECMAScript 6부터 추가

- 심벌은 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값

// 심벌 생성
let symbol1 = Symbol();
let symbol2 = Symbol();

console.log(symbol1 === symbol2); // false (각각 유일한 값)

// 심벌에 설명 추가 (디버깅용)
let userIdSymbol = Symbol('userId');
let adminIdSymbol = Symbol('userId');

console.log(userIdSymbol === adminIdSymbol); // false (설명이 같아도 다른 값)
console.log(userIdSymbol.toString()); // "Symbol(userId)"

// 객체의 속성 키로 사용
let id = Symbol('id');
let user = {
    name: "김개발",
    age: 25,
    [id]: 12345  // 심벌을 키로 사용
};

console.log(user[id]); // 12345
console.log(user.id);  // undefined (일반 문자열 키와는 다름)

// 심벌 키는 for...in 루프에서 숨겨짐
for (let key in user) {
    console.log(key); // "name", "age"만 출력 (심벌 키는 출력되지 않음)
}

// 심벌 키 확인하기
console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id)]

// 전역 심벌 레지스트리 사용
let globalSymbol1 = Symbol.for('myApp.id');
let globalSymbol2 = Symbol.for('myApp.id');

console.log(globalSymbol1 === globalSymbol2); // true (같은 키로 생성하면 동일한 심벌)

// 실제 사용 예시: 객체에 비공개 속성 만들기
const _privateData = Symbol('privateData');

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
        this[_privateData] = {
            password: "secret123",
            lastLogin: new Date()
        };
    }
    
    getPrivateInfo() {
        return this[_privateData];
    }
}

let user1 = new User("이개발", "lee@example.com");
console.log(user1.name); // "이개발"
console.log(user1._privateData); // undefined (접근 불가)
console.log(user1.getPrivateInfo()); // 메서드를 통해서만 접근 가능

 

참조 타입 (Reference Types)

객체 (Object)

let person = {
    name: "김개발",
    age: 25,
    job: "개발자"
};

배열 (Array)

let fruits = ["사과", "바나나", "오렌지"];
let numbers = [1, 2, 3, 4, 5];

---

✅ 변수 명명 규칙

지켜야 할 규칙

1. 영문자, 숫자, _, $ 만 사용 가능
2. 숫자로 시작할 수 없음
3. 예약어 사용 불가 (let, const, function 등)
4. 대소문자 구분

좋은 변수명 예시

// ✅ 좋은 예시
let userName = "김개발";
let totalPrice = 15000;
let isLoggedIn = true;
let userAccountBalance = 50000;

// ❌ 나쁜 예시
let a = "김개발";        // 의미 불분명
let price1 = 15000;      // 숫자 사용 지양
let user_name = "김개발"; // 언더스코어보다 카멜케이스 선호

명명 컨벤션

• 카멜케이스(camelCase): userName, totalPrice
• 상수는 대문자: const MAX_COUNT = 100

---

💡 실습 예제

예제 1: 사용자 정보 관리

// 사용자 정보 변수 선언
const USER_TYPE = "premium";
let userName = "김개발";
let userAge = 28;
let userEmail = "kim@example.com";
let isActive = true;

// 정보 출력
console.log(`사용자명: ${userName}`);
console.log(`나이: ${userAge}세`);
console.log(`이메일: ${userEmail}`);
console.log(`활성 상태: ${isActive ? "활성" : "비활성"}`);

예제 2: 쇼핑몰 장바구니

// 상품 정보
let productName = "무선 이어폰";
let productPrice = 89000;
let quantity = 2;
const TAX_RATE = 0.1;

// 계산
let subtotal = productPrice * quantity;
let tax = subtotal * TAX_RATE;  
let total = subtotal + tax;

console.log(`상품: ${productName}`);
console.log(`단가: ${productPrice.toLocaleString()}원`);
console.log(`수량: ${quantity}개`);
console.log(`소계: ${subtotal.toLocaleString()}원`);
console.log(`세금: ${tax.toLocaleString()}원`);
console.log(`총액: ${total.toLocaleString()}원`);

---

🔍 타입 확인하기

typeof 연산자를 사용하여 변수의 타입을 확인할 수 있습니다:

let name = "김개발";
let age = 25;
let isStudent = true;
let hobbies = ["독서", "코딩"];
let person = { name: "이개발" };

console.log(typeof name);      // "string"
console.log(typeof age);       // "number"  
console.log(typeof isStudent); // "boolean"
console.log(typeof hobbies);   // "object"
console.log(typeof person);    // "object"

---

📚 마무리 정리

오늘 배운 내용을 정리하면:

변수는 데이터를 저장하는 공간이며, 모던 자바스크립트에서는 let과 const를 주로 사용합니다.

let은 값 변경이 가능한 변수, const는 상수를 선언할 때 사용합니다.

자바스크립트의 데이터 타입에는 숫자, 문자열, 불린, undefined, null 등의 원시 타입과 객체, 배열 등의 참조 타입이 있습니다.

변수명은 의미가 명확하고 카멜케이스를 사용하여 가독성을 높이는 것이 좋습니다.

---

💡 오늘 새롭게 알게 된 것

• 기존에 공부를 해왔던게 있어서 새롭게 알게 된 부분은 아직까지는 없었어요

🤔 어려웠던 점

• 새로 추가된 심벌에 대해 이해하는게 어렵네요

🎯 다음 학습 계획

다음 포스팅에서는 객체와 배열, 함수의 기초에 대해 알아보겠습니다. 객체, 배열, 함수의 선언방법을 다뤄볼 예정이니 기대해주세요!