10. 객체

10장. 객체 (Object)

객체란?

객체(Object)는 관련된 데이터와 함수를 하나로 묶은 자료구조입니다. 키(key)와 값(value)의 쌍으로 구성되며, 키를 통해 값에 접근할 수 있습니다.

객체의 특징

• 속성(Property): 키-값 쌍으로 데이터 저장
• 메서드(Method): 객체에 속한 함수
• 동적 구조: 실행 중에 속성 추가/삭제 가능
• 참조 타입: 객체는 참조로 전달됨

---

1. 객체 생성

방법 1: 객체 리터럴 (권장)

let user = {
    name: '홍길동',
    age: 25,
    city: '서울'
};

방법 2: Object 생성자

let user = new Object();
user.name = '홍길동';
user.age = 25;
user.city = '서울';

빈 객체 생성

let empty = {};
let empty2 = new Object();

---

2. 객체 속성 접근

점 표기법 (Dot Notation)

let user = {
    name: '홍길동',
    age: 25
};

console.log(user.name);  // '홍길동'
console.log(user.age);   // 25

대괄호 표기법 (Bracket Notation)

let user = {
    name: '홍길동',
    age: 25
};

console.log(user['name']);  // '홍길동'
console.log(user['age']);   // 25

// 변수를 키로 사용할 때 유용
let key = 'name';
console.log(user[key]);  // '홍길동'

속성 추가

let user = {
    name: '홍길동'
};

user.age = 25;
user['city'] = '서울';

console.log(user);  // {name: '홍길동', age: 25, city: '서울'}

속성 수정

let user = {
    name: '홍길동',
    age: 25
};

user.age = 26;
console.log(user.age);  // 26

속성 삭제

let user = {
    name: '홍길동',
    age: 25,
    city: '서울'
};

delete user.city;
console.log(user);  // {name: '홍길동', age: 25}

---

3. 객체 메서드

객체에 함수를 속성으로 저장할 수 있습니다.

메서드 정의

let user = {
    name: '홍길동',
    age: 25,
    greet: function() {
        return `안녕하세요, ${this.name}님!`;
    }
};

console.log(user.greet());  // "안녕하세요, 홍길동님!"

화살표 함수와 this

let user = {
    name: '홍길동',
    greet1: function() {
        return `안녕하세요, ${this.name}님!`;  // '홍길동'
    },
    greet2: () => {
        return `안녕하세요, ${this.name}님!`;  // undefined (this가 다름)
    }
};

메서드 단축 문법 (ES6+)

let user = {
    name: '홍길동',
    // 기존 방법
    greet1: function() {
        return `안녕하세요, ${this.name}님!`;
    },
    // 단축 문법
    greet2() {
        return `안녕하세요, ${this.name}님!`;
    }
};

---

4. 객체 속성 순회

for...in 문

let user = {
    name: '홍길동',
    age: 25,
    city: '서울'
};

for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}

Object.keys()

let user = {
    name: '홍길동',
    age: 25,
    city: '서울'
};

let keys = Object.keys(user);
console.log(keys);  // ['name', 'age', 'city']

keys.forEach(key => {
    console.log(`${key}: ${user[key]}`);
});

Object.values()

let user = {
    name: '홍길동',
    age: 25,
    city: '서울'
};

let values = Object.values(user);
console.log(values);  // ['홍길동', 25, '서울']

Object.entries()

let user = {
    name: '홍길동',
    age: 25,
    city: '서울'
};

let entries = Object.entries(user);
console.log(entries);
// [['name', '홍길동'], ['age', 25], ['city', '서울']]

entries.forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

---

5. 중첩 객체

객체 안에 객체를 넣을 수 있습니다.

let user = {
    name: '홍길동',
    age: 25,
    address: {
        city: '서울',
        district: '강남구',
        street: '테헤란로'
    }
};

console.log(user.address.city);  // '서울'
console.log(user['address']['district']);  // '강남구'

---

6. 객체와 배열 조합

객체 배열

let users = [
    {name: '홍길동', age: 25},
    {name: '김철수', age: 30},
    {name: '이영희', age: 28}
];

// 순회
users.forEach(user => {
    console.log(`${user.name}: ${user.age}세`);
});

// 필터링
let young = users.filter(user => user.age < 30);
console.log(young);

배열을 객체로 변환

let entries = [
    ['name', '홍길동'],
    ['age', 25],
    ['city', '서울']
];

let user = Object.fromEntries(entries);
console.log(user);  // {name: '홍길동', age: 25, city: '서울'}

---

7. 객체 복사

얕은 복사 (Shallow Copy)

let user1 = {
    name: '홍길동',
    age: 25
};

// 방법 1: 전개 연산자
let user2 = {...user1};

// 방법 2: Object.assign()
let user3 = Object.assign({}, user1);

user2.name = '김철수';
console.log(user1.name);  // '홍길동' (원본 변경 안 됨)
console.log(user2.name);  // '김철수'

깊은 복사 (Deep Copy)

let user1 = {
    name: '홍길동',
    address: {
        city: '서울'
    }
};

// 얕은 복사는 중첩 객체를 참조로 복사
let user2 = {...user1};
user2.address.city = '부산';
console.log(user1.address.city);  // '부산' (원본도 변경됨!)

// 깊은 복사 (JSON 사용, 제한적)
let user3 = JSON.parse(JSON.stringify(user1));
user3.address.city = '인천';
console.log(user1.address.city);  // '서울' (원본 변경 안 됨)

---

8. 객체 구조 분해 (Destructuring) - ES6+

기본 사용

let user = {
    name: '홍길동',
    age: 25,
    city: '서울'
};

// 구조 분해
let {name, age} = user;
console.log(name);  // '홍길동'
console.log(age);   // 25

// 변수명 변경
let {name: userName, age: userAge} = user;
console.log(userName);  // '홍길동'

기본값 설정

let user = {
    name: '홍길동'
};

let {name, age = 0, city = '서울'} = user;
console.log(name);  // '홍길동'
console.log(age);   // 0 (기본값)
console.log(city);  // '서울' (기본값)

함수 매개변수에서 사용

function greet({name, age}) {
    console.log(`안녕하세요, ${name}님! 나이는 ${age}세입니다.`);
}

greet({name: '홍길동', age: 25});

---

9. 실전 예제

예제 1: 사용자 정보 관리

let user = {
    name: '홍길동',
    age: 25,
    isActive: true,
    login() {
        this.isActive = true;
        console.log(`${this.name}님이 로그인했습니다.`);
    },
    logout() {
        this.isActive = false;
        console.log(`${this.name}님이 로그아웃했습니다.`);
    }
};

user.login();
user.logout();

예제 2: 계산기 객체

let calculator = {
    result: 0,
    add(num) {
        this.result += num;
        return this;
    },
    subtract(num) {
        this.result -= num;
        return this;
    },
    multiply(num) {
        this.result *= num;
        return this;
    },
    getResult() {
        return this.result;
    },
    reset() {
        this.result = 0;
    }
};

calculator.add(10).multiply(2).subtract(5);
console.log(calculator.getResult());  // 15

예제 3: 학생 정보 배열 처리

let students = [
    {name: '홍길동', score: 85},
    {name: '김철수', score: 92},
    {name: '이영희', score: 78}
];

// 평균 점수 계산
let sum = students.reduce((acc, student) => acc + student.score, 0);
let average = sum / students.length;
console.log(`평균 점수: ${average}`);

// 최고 점수 학생
let topStudent = students.reduce((max, student) => 
    student.score > max.score ? student : max
);
console.log(`최고 점수: ${topStudent.name} - ${topStudent.score}점`);

---

주의사항

1. 참조 복사

let user1 = {name: '홍길동'};
let user2 = user1;  // 참조 복사
user2.name = '김철수';
console.log(user1.name);  // '김철수' (원본도 변경됨!)

2. 속성 존재 확인

let user = {name: '홍길동'};

// ❌ 잘못된 방법
if (user.age) {  // age가 0이면 false로 평가됨
    // ...
}

// ✅ 올바른 방법
if ('age' in user) {
    // ...
}

// 또는
if (user.hasOwnProperty('age')) {
    // ...
}

3. this 바인딩

let user = {
    name: '홍길동',
    greet: function() {
        console.log(this.name);  // '홍길동'
    },
    greetArrow: () => {
        console.log(this.name);  // undefined
    }
};

---

연습 문제

1. 객체 생성 및 접근

   • 이름, 나이, 주소를 속성으로 가지는 객체를 만들고 출력하세요.

2. 객체 메서드

   • 계산기 객체를 만들고, 덧셈, 뺄셈 메서드를 추가하세요.

3. 객체 순회

   • 객체의 모든 속성을 순회하여 출력하는 코드를 작성하세요.

4. 객체 배열 처리

   • 학생 정보 객체 배열에서 평균 점수를 계산하세요.

5. 객체 구조 분해

   • 객체에서 이름과 나이를 구조 분해하여 변수에 저장하세요.

---

다음 장 예고

다음 장에서는 DOM 조작에 대해 학습합니다.