객체

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• 객체를 생성하고 점 표기법·괄호 표기법으로 속성에 접근하고 수정할 수 있습니다.
• 객체 안에 함수(메서드)를 정의하고 this로 자신의 속성에 접근할 수 있습니다.
• 단축 속성명과 구조 분해 할당으로 코드를 간결하게 작성할 수 있습니다.
• Object.keys(), Object.values(), Object.entries()로 객체를 순회할 수 있습니다.

📦 객체란 무엇인가

이 섹션에서는 객체의 개념과 배열과의 차이, 그리고 실제 데이터를 모델링하는 방법을 살펴보겠습니다.

배열이 순서 있는 목록이라면, 객체(Object)는 이름이 붙은 값들의 집합입니다. 현실 세계의 사물이나 개념을 코드로 표현할 때 사용합니다. 사람이라는 개념을 표현한다면 이름, 나이, 직업처럼 여러 속성을 가지고 있고, 배열처럼 단순히 인덱스 숫자로 접근하기보다 의미 있는 이름(키)으로 접근하는 것이 훨씬 자연스럽습니다.

객체는 키(Key)와 값(Value)의 쌍으로 이루어집니다. 이 쌍을 속성(Property)이라고 합니다. 마치 사전처럼 단어(키)로 뜻(값)을 찾는 구조입니다.

// 객체 리터럴 방식으로 생성 — 중괄호 {}
const person = {
  name: "홍길동",       // 키: "name", 값: "홍길동"
  age: 28,             // 키: "age",  값: 28
  isActive: true,      // 키: "isActive", 값: true
  hobbies: ["독서", "코딩", "등산"],  // 값이 배열도 가능
  address: {           // 값이 또 다른 객체도 가능 (중첩 객체)
    city: "서울",
    district: "마포구"
  }
};

console.log(typeof person);  // "object"
console.log(person);

객체의 값은 어떤 자료형이든 될 수 있습니다. 숫자, 문자열, 불리언, 배열, 심지어 또 다른 객체까지 담을 수 있습니다. 이 유연성 덕분에 객체는 복잡한 현실 데이터를 정확하게 모델링할 수 있습니다. 서버 API의 응답 데이터, 사용자 정보, 상품 데이터 등이 모두 객체 형태로 주고받습니다.

🔑 속성 접근과 수정

이 섹션에서는 객체의 속성에 접근하고 값을 읽거나 쓰는 두 가지 방법을 살펴보겠습니다.

객체 속성에 접근하는 방법은 두 가지입니다. 점 표기법(Dot notation)과 괄호 표기법(Bracket notation)입니다.

const user = {
  name: "홍길동",
  age: 28,
  "favorite color": "파랑"  // 공백이 있는 키는 따옴표로
};

// 점 표기법 — 가장 일반적
console.log(user.name);  // "홍길동"
console.log(user.age);   // 28

// 괄호 표기법 — 동적 키 접근 가능
console.log(user["name"]);           // "홍길동"
console.log(user["favorite color"]); // "파랑" — 공백 있는 키

// 동적 키 접근 — 변수로 키를 지정
const key = "age";
console.log(user[key]);  // 28 — user.key가 아닌 user[key]

// 없는 속성 접근 시 undefined
console.log(user.email);  // undefined

// 속성 추가
user.email = "hong@example.com";
console.log(user.email);  // "hong@example.com"

// 속성 수정
user.age = 29;
console.log(user.age);  // 29

// 속성 삭제
delete user.age;
console.log(user.age);  // undefined

점 표기법은 간결하고 읽기 편하여 대부분의 경우에 사용합니다. 괄호 표기법은 두 가지 상황에서 필수입니다. 첫째, 키에 공백이나 특수문자가 있을 때. 둘째, 접근할 키를 변수에 담아 런타임에 동적으로 결정할 때입니다. 예를 들어 사용자가 입력한 필드명으로 객체 속성에 접근하는 상황에서 괄호 표기법이 꼭 필요합니다.

🔧 객체 메서드와 this

이 섹션에서는 객체 안에 함수를 정의하는 메서드와, 메서드에서 자신의 속성에 접근할 때 사용하는 this를 살펴보겠습니다.

객체의 값이 함수인 경우, 그 속성을 메서드(Method)라고 합니다. 메서드 안에서 this 키워드를 사용하면 해당 메서드를 가진 객체 자신을 참조할 수 있습니다.

const calculator = {
  value: 0,

  // 메서드 정의 — 전통적인 방식
  add: function(n) {
    this.value += n;
    return this;  // 메서드 체이닝을 위해 자신 반환
  },

  // 메서드 단축 문법 (ES6) — 권장
  subtract(n) {
    this.value -= n;
    return this;
  },

  getResult() {
    return this.value;
  }
};

calculator.add(10).add(5).subtract(3);
console.log(calculator.getResult());  // 12

// 실전 예시: 사용자 객체
const user = {
  firstName: "길동",
  lastName: "홍",
  age: 28,

  getFullName() {
    return `${this.lastName}${this.firstName}`;
  },

  introduce() {
    return `안녕하세요! 저는 ${this.getFullName()}이고, ${this.age}살입니다.`;
  }
};

console.log(user.getFullName());  // "홍길동"
console.log(user.introduce());   // "안녕하세요! 저는 홍길동이고, 28살입니다."

10강에서 배운 것처럼, 객체 메서드는 반드시 일반 함수(또는 메서드 단축 문법)로 정의해야 합니다. 화살표 함수로 정의하면 this가 객체가 아닌 바깥 스코프를 가리키므로 예상대로 동작하지 않습니다. ES6의 메서드 단축 문법(methodName() { })은 function 키워드 없이 간결하게 메서드를 정의하며, 일반 함수와 같은 this 동작을 보장합니다.

✂️ 단축 속성명과 구조 분해 할당

이 섹션에서는 ES6에서 도입된 두 가지 강력한 문법 편의 기능을 살펴보겠습니다.

단축 속성명(Shorthand Property Names)은 변수명과 객체 키 이름이 같을 때 한 번만 쓸 수 있는 문법입니다. 매우 자주 사용하는 패턴입니다.

const name = "홍길동";
const age = 28;
const city = "서울";

// 기존 방식
const user1 = { name: name, age: age, city: city };

// 단축 속성명 — 변수명 = 키 이름일 때
const user2 = { name, age, city };  // 완전히 동일
console.log(user2);  // { name: "홍길동", age: 28, city: "서울" }

구조 분해 할당(Destructuring Assignment)은 객체나 배열에서 원하는 값을 변수로 바로 꺼내는 문법입니다. 현대 자바스크립트에서 가장 많이 쓰는 문법 중 하나입니다.

const person = {
  name: "홍길동",
  age: 28,
  city: "서울",
  job: "개발자"
};

// 기존 방식
const name1 = person.name;
const age1 = person.age;

// 구조 분해 할당 — 한 줄로 여러 변수 추출
const { name, age } = person;
console.log(name);  // "홍길동"
console.log(age);   // 28

// 다른 이름으로 받기
const { name: userName, age: userAge } = person;
console.log(userName);  // "홍길동"
console.log(userAge);   // 28

// 기본값 설정
const { name: n2, email = "없음" } = person;
console.log(email);  // "없음" (person에 email이 없으므로 기본값)

// 함수 매개변수에서 구조 분해
function greet({ name, age }) {
  console.log(`안녕하세요, ${age}살 ${name}님!`);
}
greet(person);  // "안녕하세요, 28살 홍길동님!"

// 중첩 객체 구조 분해
const { city, address: { street } = {} } = {
  city: "서울",
  address: { street: "마포로" }
};
console.log(city);    // "서울"
console.log(street);  // "마포로"

🔄 객체 순회와 불변 업데이트

이 섹션에서는 객체의 모든 속성을 순회하는 방법과 스프레드 연산자를 활용한 안전한 객체 업데이트 패턴을 살펴보겠습니다.

배열에 forEach나 for...of가 있다면, 객체에는 Object 내장 메서드들이 있습니다.

const scores = { 수학: 92, 영어: 85, 과학: 78 };

// Object.keys() — 키 배열
console.log(Object.keys(scores));    // ["수학", "영어", "과학"]

// Object.values() — 값 배열
console.log(Object.values(scores));  // [92, 85, 78]

// Object.entries() — [키, 값] 쌍의 배열
console.log(Object.entries(scores));
// [["수학", 92], ["영어", 85], ["과학", 78]]

// 순회
Object.entries(scores).forEach(([subject, score]) => {
  console.log(`${subject}: ${score}점`);
});

// 평균 계산
const avg = Object.values(scores).reduce((a, b) => a + b, 0) / Object.keys(scores).length;
console.log(`평균: ${avg}점`);  // "평균: 85점"

배열과 마찬가지로 객체도 참조형이므로, 직접 수정하면 원본이 바뀝니다. 불변성을 유지하면서 업데이트하려면 스프레드 연산자를 활용합니다.

const original = { name: "홍길동", age: 28, city: "서울" };

// ❌ 직접 수정 — 원본 변경
original.age = 29;

// ✅ 스프레드로 복사 후 수정 — 새 객체 생성
const updated = { ...original, age: 29 };
console.log(original.age);  // 28 (원본 유지)
console.log(updated.age);   // 29 (새 객체)

// 여러 속성 한 번에 업데이트
const v2 = { ...original, age: 30, city: "부산", email: "hong@example.com" };
console.log(v2);
// { name: "홍길동", age: 30, city: "부산", email: "hong@example.com" }

// 두 객체 병합
const defaults = { theme: "light", lang: "ko", fontSize: 14 };
const userPrefs = { theme: "dark", fontSize: 16 };
const settings = { ...defaults, ...userPrefs };  // 뒤쪽이 앞쪽을 덮어씀
console.log(settings);
// { theme: "dark", lang: "ko", fontSize: 16 }

📝 핵심 요약

14강에서 배운 내용을 정리해 보겠습니다.

항목	문법	설명
객체 생성	{ key: value }	키-값 쌍의 집합
점 표기법	obj.key	일반적인 속성 접근
괄호 표기법	obj["key"], obj[var]	동적 키, 공백 있는 키
메서드 단축	{ greet() { } }	객체 안 함수 정의
단축 속성명	{ name, age }	변수명 = 키 이름일 때
구조 분해	const { a, b } = obj	속성을 변수로 바로 추출
Object.keys/values/entries		객체를 배열로 변환해 순회
불변 업데이트	{ ...obj, key: val }	원본 보존하며 새 객체 생성

다음 강인 15강 — 객체와 배열 응용에서는 배열과 객체를 결합한 복잡한 데이터 구조를 다루는 고급 패턴을 배웁니다. 배열 구조 분해, 중첩 데이터 처리, 배열·객체 변환, 그리고 실무에서 자주 보이는 데이터 구조 패턴을 함께 익혀보겠습니다!