[JS] 10. 데이터의 깊이: 원시 타입 VS 객체 타입 & 순회

 

자바스크립트 성능 최적화와 버그 방지의 핵심인 데이터 타입의 저장 방식과 이를 효율적으로 순회하는 방법을 알아보자.

 

1. 원시 타입 (Primitive Types)

"값(Value) 그 자체가 복사된다"

원시 타입은 스택 메모리에 실제 값이 직접 저장된다. 변수를 다른 변수에 할당할 때, 값이 '복사'되어 전달되므로 두 변수는 서로 독립적이다.

• 종류: number, string, boolean, null, undefined, symbol
• 특징: 불변성(Immutable). 한 번 생성된 원시 값은 변하지 않는다.

JavaScript

 

let a = 10;
let b = a; // 값을 복사해서 전달
b = 20;

console.log(a); // 10 (b를 바꿔도 a는 그대로!)

---

2. 객체 타입 (Object Types)

"참조(Reference) 주소가 복사된다"

객체는 크기가 유동적이기 때문에 메모리의 '힙(Heap)' 영역에 저장되고, 변수에는 그 값이 저장된 메모리 주소(참조값)가 담깁니다.

• 종류: Object, Array, Function, Date 등
• 특징: 가변성(Mutable). 변수를 복사하면 주소값이 복사되므로, 한쪽을 수정하면 원본도 바뀐다.

JavaScript

 

let user1 = { name: "신영" };
let user2 = user1; // 주소(참조)를 복사해서 전달

user2.name = "철수";

console.log(user1.name); // "철수" (user2를 바꿨는데 user1도 바뀜!)

⚠️ 주의: C#의 class 인스턴스를 다룰 때와 정확히 같은 현상이다. 이를 방지하려면 앞서 배운 Spread 연산자(...)를 사용해 새로운 객체로 복사(얕은 복사)해야 한다.

---

3. 반복문으로 배열과 객체 순회하기

데이터 타입을 알았으니, 이제 그 안에 담긴 여러 데이터를 꺼내는 효율적인 방법들을 알아보자.

① 배열 순회: for...of

배열의 값을 하나씩 꺼내올 때 사용한다. (C#의 foreach와 같다.)

JavaScript

 

const fruits = ["사과", "배", "포도"];
for (const fruit of fruits) {
    console.log(fruit);
}

② 객체 순회: for...in

객체의 키(Key)를 하나씩 꺼내올 때 사용한다.

JavaScript

 

const person = { name: "신영", age: 30, job: "Dev" };
for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}

---

📝 09편 종합 실습 코드 (Chapter10-1.js)

JavaScript

 

// [상황: 게임 캐릭터 데이터 관리]

// 1. 원시 타입의 복사 (독립적)
let p1Health = 100;
let p2Health = p1Health;
p2Health = 80; 
console.log(`P1 체력: ${p1Health}, P2 체력: ${p2Health}`); // 100, 80

// 2. 객체 타입의 참조 (공유됨)
let p1Stat = { str: 10, dex: 10 };
let p2Stat = p1Stat; // 주소 복사

p2Stat.str = 20;
console.log(`P1 힘: ${p1Stat.str}`); // 20 (의도치 않은 변경!)

// 3. 객체 복사 해결법 (Spread 연산자)
let p3Stat = { ...p1Stat }; // 새로운 객체 생성
p3Stat.str = 50;
console.log(`P1 힘: ${p1Stat.str}, P3 힘: ${p3Stat.str}`); // 20, 50 (독립 완료)

// 4. 객체 순회 실습
console.log("--- 캐릭터 스탯 목록 ---");
for (const key in p1Stat) {
    console.log(`${key.toUpperCase()}: ${p1Stat[key]}`);
}

---

💡 개발자를 위한 요약

1. 원시 타입은 값이 복사되어 서로 영향을 주지 않는다.
2. 객체 타입은 참조(주소)가 복사되어 한쪽을 바꾸면 원본도 바뀐다.
3. 객체를 안전하게 복사하려면 Spread 연산자(...)를 활용하자.
4. 배열은 for...of, 객체는 for...in으로 훑는 것이 정석이다.