[JS] 07. 데이터 마스터: 객체와 배열 심화 (Feat. ES6+)

단순히 값을 담는 것을 넘어, 데이터를 자유자재로 가공하는 배열 메서드와 코드를 획기적으로 줄여주는 비구조화 할당을 알아보자

1. 객체(Object) 

객체는 키(Key)와 값(Value)의 집합이다. C#의 Dictionary나 Class의 필드와 유사하다.

① 단축 속성명 (Shorthand Property Names)

변수명과 객체의 키 이름이 같다면 생략이 가능하다.

JavaScript

 

const name = "SinYoung";
const age = 30;

// 기존 방식
const user1 = { name: name, age: age };
// 현대적 방식 (Short)
const user2 = { name, age }; 

② 계산된 속성명 (Computed Property Names)

객체의 키를 동적으로 결정할 수 있다.

JavaScript

 

const keyName = "job";
const user = {
    [keyName]: "Developer" // 'job': 'Developer'와 같음
};

---

2. 배열(Array)

C#의 LINQ와 매우 유사한 개념이다. for문 없이 데이터를 가공한다.

① map(): 배열의 모든 요소를 변형

JavaScript

 

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

② filter(): 조건에 맞는 데이터만 추출

JavaScript

 

const users = [
    { name: "Kim", age: 30 },
    { name: "Lee", age: 15 }
];
const adults = users.filter(user => user.age >= 19);

③ forEach(): 배열 순회

단순히 모든 요소를 한 번씩 훑을 때 사용한다.

---

3. 구조 분해 할당 (Destructuring Assignment)

객체나 배열에서 필요한 값만 쏙쏙 뽑아내어 변수에 담는 기술이다. React에서 useState 등을 쓸 때 필수이다.

JavaScript

 

// 객체 구조 분해
const member = { id: 1, nick: "Jun", level: "pro" };
const { nick, level } = member; 
console.log(nick); // "Jun"

// 배열 구조 분해
const colors = ["red", "blue"];
const [first, second] = colors;

---

4. 전개 연산자 (Spread Operator) 

배열이나 객체를 '복사'하거나 '병합'할 때 사용한다. 원본 데이터를 수정하지 않고(불변성) 새로운 데이터를 만들 때 필수이다.

JavaScript

 

const original = [1, 2, 3];
const copy = [...original, 4, 5]; // [1, 2, 3, 4, 5]

const userProfile = { name: "Kim" };
const updateProfile = { ...userProfile, age: 30 };

---

📝 06편 통합 실습 코드 (Chapter06_Advanced.js)

JavaScript

 

// [실전 케이스: 장바구니 데이터 가공]

const cart = [
    { id: 1, name: "MacBook", price: 2000, count: 1 },
    { id: 2, name: "Keyboard", price: 200, count: 2 },
    { id: 3, name: "Mouse", price: 100, count: 5 }
];

// 1. 모든 상품의 이름만 추출 (map)
const productNames = cart.map(item => item.name);
console.log("상품 목록:", productNames);

// 2. 가격이 150불 이상인 상품만 필터링 (filter)
const expensiveItems = cart.filter(item => item.price >= 150);

// 3. 총 결제 금액 계산 (forEach & 복합 대입)
let totalPrice = 0;
cart.forEach(item => {
    totalPrice += (item.price * item.count);
});
console.log(`총 결제 금액: ${totalPrice}$`);

// 4. 새로운 상품 추가 (Spread)
const newItem = { id: 4, name: "Monitor", price: 500, count: 1 };
const updatedCart = [...cart, newItem];

---

💡 유니티 개발자(C#)를 위한 관전 포인트

• C# LINQ vs JS Array Methods: C#의 Select가 JS의 map이고, Where가 filter이다.
• 불변성(Immutability): 웹(특히 React)에서는 기존 객체를 수정하는 것보다 ...을 이용해 새로운 객체를 만들어 교체하는 방식을 선호한다.