레슨 4 / 9·20분
객체와 구조 분해
객체 리터럴과 메서드
객체는 관련된 데이터와 기능을 하나로 묶는 핵심 자료구조입니다. 키-값 쌍으로 구성되며, 값으로 함수를 가지면 메서드라 부릅니다.
javascript
const user = {
name: "김철수",
age: 25,
hobbies: ["독서", "코딩"],
// 메서드 축약 문법
greet() {
return "안녕하세요, " + this.name + "입니다!";
},
// 계산된 속성
get birthYear() {
return new Date().getFullYear() - this.age;
},
};
console.log(user.name); // "김철수"
console.log(user.greet()); // "안녕하세요, 김철수입니다!"
console.log(user.birthYear); // 2001 (동적 계산)구조 분해 할당 (Destructuring)
구조 분해 할당을 사용하면 객체나 배열에서 값을 꺼내 변수에 바로 할당할 수 있습니다. 코드가 훨씬 간결해집니다.
javascript
// 객체 구조 분해
const { name, age, hobbies } = user;
console.log(name); // "김철수"
// 이름 변경 (별칭)
const { name: userName, age: userAge } = user;
console.log(userName); // "김철수"
// 기본값 지정
const { email = "없음" } = user;
console.log(email); // "없음"
// 배열 구조 분해
const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first); // 10
console.log(rest); // [30, 40, 50]
// 함수 매개변수에서 구조 분해
function printUser({ name, age }) {
console.log(name + " (" + age + "세)");
}
printUser(user); // "김철수 (25세)"스프레드와 나머지 연산자
스프레드 연산자(...)는 배열이나 객체를 펼치고, 나머지 연산자는 남은 요소를 모읍니다. 불변성을 유지하면서 데이터를 다룰 때 필수적입니다.
javascript
// 객체 스프레드 — 복사 + 수정
const updated = { ...user, age: 26, email: "kim@example.com" };
console.log(updated.age); // 26
console.log(user.age); // 25 (원본 유지)
// 배열 스프레드 — 합치기
const a = [1, 2, 3];
const b = [4, 5, 6];
const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]
// 나머지 매개변수
function sum(...nums) {
return nums.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10💡
스프레드 연산자는 "얕은 복사(shallow copy)"를 수행합니다. 중첩된 객체는 참조가 복사되므로, 깊은 복사가 필요하면 structuredClone()을 사용하세요.