CODINGNOW
← JavaScript 강의 목록으로
📚
객체 · 배열
중급 · 선수: 05_함수_기초

06. 객체

객체는 키-값 쌍의 모음입니다. 관련 있는 데이터를 하나의 단위로 묶을 때 사용합니다.

객체 리터럴프로퍼티메서드this
소요 시간
⏱ 약 1시간
난이도
📊 초급
선수 조건
🎯 단원 5
결과물
객체는 키-값 쌍의 모음입니다. 관련 있는 데이터를 하나의 단위로 묶을 때 사용합니다.

이 강의에서 배우는 것

  • 1객체 리터럴 `{}` 로 데이터를 묶어 표현할 수 있다.
  • 2점 표기법과 대괄호 표기법의 차이를 안다.
  • 3객체에 메서드를 정의하고 `this` 를 통해 같은 객체의 다른 속성에 접근할 수 있다.
  • 4속성 단축 표기(shorthand)와 계산된 속성명(computed property name)을 사용할 수 있다.
  • 5객체를 인자로 받고 반환하는 함수를 작성할 수 있다.

소개

객체는 키-값 쌍의 모음입니다. 관련 있는 데이터를 하나의 단위로 묶을 때 사용합니다.

핵심 개념

1. 객체 리터럴

객체는 키-값 쌍의 모음입니다. 관련 있는 데이터를 하나의 단위로 묶을 때 사용합니다.

javascript
const user = {
  name: "지민",
  age: 20,
  isStudent: true,
};

키는 문자열(또는 Symbol)이고 값은 어떤 타입이든 가능합니다.

2. 속성 접근: 점 vs 대괄호

점 표기법은 식별자로 쓸 수 있는 키에만 사용 가능하고, 대괄호 표기법은 동적인 키나 공백/특수문자를 포함한 키에 사용합니다.

javascript
user.name;          // "지민"
user["age"];        // 20
const key = "isStudent";
user[key];          // true

존재하지 않는 키를 읽으면 `undefined` 를 돌려줍니다. 새 키를 할당하면 즉시 추가됩니다.

3. 메서드와 this

함수가 값인 속성을 메서드라고 부릅니다. 메서드 내부의 `this` 는 그 메서드를 호출한 객체를 가리킵니다.

javascript
const counter = {
  count: 0,
  increment() {
    this.count += 1;
  },
};
counter.increment();
console.log(counter.count); // 1

화살표 함수는 자체 `this` 를 가지지 않으므로 메서드로는 보통 부적절합니다 (단원 10 참고).

4. 단축 표기와 계산된 속성명

변수 이름과 키 이름이 같으면 한 번만 써도 됩니다. 키를 동적으로 계산하려면 대괄호 안에 식을 씁니다.

javascript
const name = "민준";
const age = 25;
const user = { name, age };                // shorthand
const field = "score";
const result = { [field]: 100 };            // computed key → { score: 100 }

핵심 예제

파일다루는 내용
`01_literal.js`객체 생성, 속성 추가/삭제
`02_access.js`점/대괄호 접근, 동적 키
`03_methods.js`메서드, this 사용
`04_computed.js`shorthand, computed property

src/01_literal.js

javascript
/**
 * 객체 리터럴 기본
 */
"use strict";

const book = {
  title: "JS 입문",
  pages: 320,
  author: "kim",
};

console.log("book =", book);

// 속성 추가
book.published = 2024;
console.log("after add =", book);

// 속성 삭제
delete book.author;
console.log("after delete =", book);

src/02_access.js

javascript
/**
 * 점 표기법과 대괄호 표기법
 */
"use strict";

const product = {
  id: 1,
  name: "노트북",
  "price-krw": 1500000,
};

console.log(product.name);
console.log(product["price-krw"]);

const key = "id";
console.log("dynamic key =", product[key]);

// 존재하지 않는 키
console.log("missing =", product.brand); // undefined

src/03_methods.js

javascript
/**
 * 메서드와 this
 */
"use strict";

const cart = {
  items: [],
  add(item) {
    this.items.push(item);
  },
  total() {
    return this.items.reduce((sum, x) => sum + x.price, 0);
  },
};

cart.add({ name: "사과", price: 1000 });
cart.add({ name: "빵", price: 2500 });
console.log("items =", cart.items);
console.log("total =", cart.total());

src/04_computed.js

javascript
/**
 * 단축 표기와 계산된 속성명
 */
"use strict";

const name = "수진";
const age = 22;
const user = { name, age };
console.log("shorthand =", user);

const field = "score";
const value = 95;
const record = { [field]: value, [`${field}_max`]: 100 };
console.log("computed =", record);

자주 하는 실수

  1. 객체 키가 숫자처럼 보여도 내부적으로 문자열로 저장된다는 사실을 잊는다.
  2. `this` 가 어떤 객체를 가리킬지 헷갈린다 (메서드 호출 vs 일반 호출).
  3. 객체를 `===` 로 비교하면 같은 참조일 때만 true 다.
  4. `delete obj.key` 와 `obj.key = undefined` 를 혼동한다.
  5. 중첩 객체에서 `obj.a.b` 가 `a` 가 없을 때 TypeError 를 던지는 것을 잊는다 (옵셔널 체이닝 `?.` 활용).

FAQ

Q1. 객체와 Map 의 차이는?

Map 은 키로 어떤 값이든 사용 가능하고 순서가 보장되며 size 를 바로 알 수 있습니다. 단순 데이터 구조라면 객체가 충분합니다.

Q2. 객체 키 순서는 보장되나요?

문자열 키는 삽입 순서, 숫자 키는 오름차순으로 순회됩니다 (ES2015+).

Q3. const 객체의 속성을 바꿔도 되나요?

const 는 재할당을 막을 뿐 객체 내부 변경은 막지 않습니다. 동결하려면 `Object.freeze(obj)` 를 사용합니다.

과제

  • `homework_01.js` — 사용자 정보 객체를 만들고 자기소개 메서드를 추가하세요.
  • `homework_02.js` — 동적 키로 점수를 누적하는 객체를 작성하세요.

homework/README.md

## homework_01.js 사용자 객체 `user` 를 만들고 다음을 포함하세요.

  • 속성: `name`, `age`, `job`
  • 메서드 `introduce()` 가 `"저는 {name} 이고 {age} 살 {job} 입니다."` 를 반환

## homework_02.js 빈 객체 `scores` 를 만들고 함수 `addScore(subject, point)` 를 작성하세요.

  • 같은 과목 호출 시 점수를 더해야 합니다.
  • 호출 후 `scores` 를 출력하세요.

homework/answer/homework_01.js

javascript
/**
 * 과제 1: 사용자 자기소개
 */
"use strict";

const user = {
  name: "도윤",
  age: 28,
  job: "개발자",
  introduce() {
    return `저는 ${this.name} 이고 ${this.age} 살 ${this.job} 입니다.`;
  },
};

console.log(user.introduce());

homework/answer/homework_02.js

javascript
/**
 * 과제 2: 점수 누적
 */
"use strict";

const scores = {};

/**
 * @param {string} subject
 * @param {number} point
 */
function addScore(subject, point) {
  scores[subject] = (scores[subject] ?? 0) + point;
}

addScore("math", 80);
addScore("eng", 70);
addScore("math", 10);
console.log(scores); // { math: 90, eng: 70 }

다음 단원

[07_배열_기초](../07_배열_기초/) — 순서 있는 데이터 컬렉션 다루기.

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗