자바스크립트 객체(Object) 완벽 가이드

자바스크립트 객체 쉽게 마스터하기

자바스크립트 객체는 데이터를 키-값 쌍으로 관리하는 강력한 자료구조입니다. 이 포스트에서는 객체의 기본 개념부터 생성, 조작, 고급 사용법까지 초보자와 중급자를 위해 쉽게 설명합니다. 배열 강좌를 마친 분들께 자연스러운 다음 단계입니다!

객체란?

자바스크립트 객체는 키(key)와 값(value) 쌍으로 데이터를 저장합니다. 키는 문자열(또는 심볼), 값은 문자열, 숫자, 함수 등 어떤 타입이든 가능합니다. 예를 들어, 사용자 정보를 객체로 표현하면:

let user = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello!");
  }
};
console.log(user.name); // 출력: "John"

객체는 데이터뿐 아니라 동작(메서드)도 포함할 수 있어, API 처리나 상태 관리에 필수적입니다.

1. 객체 생성 방법

객체는 여러 방식으로 생성할 수 있습니다:

• 객체 리터럴: 중괄호({})로 간단히 생성. 가장 흔한 방법입니다.

let user = { name: "John", age: 30 };
  

• Object 생성자: new Object()로 빈 객체 생성 후 속성 추가.

let obj = new Object();
obj.key = "value";
  

• 생성자 함수: 여러 유사 객체를 만들 때 유용.

function User(name, age) {
  this.name = name;
  this.age = age;
}
let user = new User("John", 30);
  

• 클래스: ES6에서 도입된 직관적인 객체 생성 문법.

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
}
let user = new User("John", 30);
user.greet(); // "Hello, I am John"
  

2. 속성 접근 및 조작

객체 속성은 점 표기법(obj.key) 또는 괄호 표기법(obj["key"])으로 접근합니다:

let user = { name: "John", age: 30 };
console.log(user.name); // "John"
console.log(user["age"]); // 30
user.age = 31; // 속성 수정
user.city = "Seoul"; // 속성 추가
delete user.age; // 속성 삭제

참고: 괄호 표기법은 동적 키 접근에 유용합니다. 예: let key = "name"; console.log(user[key]);

3. 객체 메서드

객체 내 함수는 메서드라 불리며, this로 객체 자신을 참조합니다:

let user = {
  name: "John",
  sayHello: function() {
    console.log(`Hello, I am ${this.name}`);
  }
};
user.sayHello(); // "Hello, I am John"

메서드는 객체의 동작을 정의하며, 이벤트 핸들러나 데이터 처리에 자주 사용됩니다.

4. 고급 사용법

• 프로토타입 상속: 객체는 프로토타입 체인을 통해 속성과 메서드를 상속받습니다.

let animal = { eats: true };
let rabbit = { jumps: true };
rabbit.__proto__ = animal;
console.log(rabbit.eats); // true
  

• 클래스 상속: 클래스 문법으로 상속을 깔끔하게 구현.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}
class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}
let dog = new Dog("Rex");
dog.speak(); // "Rex barks."
  

• 프로퍼티 디스크립터: 속성의 읽기/쓰기 제어.

let user = {};
Object.defineProperty(user, "name", { value: "John", writable: false });
user.name = "Jane"; // 변경 불가
console.log(user.name); // "John"
  

5. 유용한 객체 메서드

자바스크립트는 객체 조작을 위한 내장 메서드를 제공합니다:

• Object.keys(obj): 키 배열 반환.
• Object.values(obj): 값 배열 반환.
• Object.entries(obj): 키-값 쌍 배열 반환.
• Object.assign(target, ...sources): 객체 병합.

예시:

let user = { name: "John", age: 30 };
console.log(Object.keys(user)); // ["name", "age"]
let newUser = Object.assign({}, user, { age: 31 });
console.log(newUser); // { name: "John", age: 31 }

6. 실습 예제

다음은 객체를 활용한 간단한 실습입니다:

• 객체 생성 및 메서드 호출:

let car = {
  brand: "Toyota",
  model: "Camry",
  year: 2020,
  start: function() {
    console.log(`${this.brand} ${this.model} started.`);
  }
};
car.start(); // "Toyota Camry started."
  

• 객체 병합:

let defaults = { color: "red", size: "medium" };
let custom = { size: "large" };
let final = { ...defaults, ...custom };
console.log(final); // { color: "red", size: "large" }
  

7. 주의점

• 참조 전달: 객체는 참조로 전달되므로, 함수 내 변경이 원본에 영향을 줍니다. 복사하려면 {...obj} 또는 Object.assign 사용.
• 불변성: 원본 변경을 피하려면 새 객체를 생성하세요.
• 숫자 키: 객체의 키는 문자열로 변환되므로, obj[1]은 obj["1"]로 처리됩니다.

8. 추천 학습 자료

더 깊이 배우고 싶다면 다음을 참고하세요:

• 모던 JavaScript 튜토리얼 - 객체: 객체의 모든 개념과 실습 예제.
• MDN Web Docs - 객체 기본: 초보자 친화적 설명.
• 자바스크립트 완벽 가이드 (7판): 심화 학습 추천 도서.

결론

자바스크립트 객체는 데이터와 동작을 함께 관리하는 강력한 도구입니다. 이 가이드를 통해 객체 생성, 조작, 상속을 익히고, 실습으로 실력을 다져보세요. 궁금한 점은 댓글로 남겨주세요!