[Object] 자바스크립트의 객체

언어/JavaScript

[Object] 자바스크립트의 객체

Dachaes 2025. 4. 19. 00:34

728x90

객체(Object)

자바스크립트에서 가장 핵심적이면서도 유연한 자료형 중 하나가 바로 객체(Object)입니다. 객체는 데이터를 구조화하고, 기능(메서드)을 묶어서 하나의 단위로 관리할 수 있게 해줍니다. 이 글에서는 자바스크립트 객체의 기본 개념부터 객체 생성 방식, 프로퍼티 조작, 메서드 정의, 객체 간의 참조, 그리고 객체 지향 프로그래밍 관점에서의 활용까지 차근차근 설명하겠습니다.

1. 객체(Object)란?

자바스크립트에서 객체는 키(key)와 값(value)의 쌍으로 이루어진 데이터 집합입니다. 키는 문자열 또는 심볼이 될 수 있고, 값은 어떤 자료형이든 가능합니다. 다른 언어나 자료구조에서는 '딕셔너리(Dictionary)' 또는 '맵(Map)'과 유사합니다.

const user = {
  name: 'Alice',
  age: 25,
  isAdmin: true
};

위 코드에서 user는 객체이며, name, age, isAdmin은 각각 객체의 프로퍼티(property)라고 부릅니다.

2. 객체 생성 방법

자바스크립트에서는 객체를 만드는 방법이 다양합니다.

a. 객체 리터럴 (Literal)

가장 일반적인 방법입니다.

const car = {
  brand: 'Hyundai',
  model: 'Avante'
};

b. new Object() 생성자

const car = new Object();
car.brand = 'Hyundai';
car.model = 'Avante';

c. 생성자 함수 (Constructor Function)

function Car(brand, model) {
  this.brand = brand;
  this.model = model;
}
const myCar = new Car('Hyundai', 'Avante');

d. 클래스 (ES6+)

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }
}
const myCar = new Car('Hyundai', 'Avante');

3. 프로퍼티 접근 및 수정

a. 접근

console.log(user.name); // Alice
console.log(user['age']); // 25

b. 수정 및 추가

user.age = 30;
user.email = 'alice@example.com';

c. 삭제

delete user.isAdmin;

4. 메서드 정의

객체에 함수를 추가하면 메서드(method)가 됩니다.

const user = {
  name: 'Bob',
  greet: function () {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet(); // Hello, I'm Bob

ES6 문법을 사용하면 더 간결하게 작성할 수 있습니다.

const user = {
  name: 'Bob',
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

5. 객체 비교 - 참조 vs 값

객체는 참조 타입(reference type)이기 때문에, 두 객체가 동일한 내용을 가지고 있어도 메모리 주소가 다르면 다르게 취급됩니다.

const obj1 = { a: 1 };
const obj2 = { a: 1 };

console.log(obj1 === obj2); // false

const obj3 = obj1;
console.log(obj1 === obj3); // true

6. 객체 순회

객체의 모든 키 또는 값을 순회할 때는 다음과 같은 문법을 사용합니다.

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

Object.keys(user);   // ['name', 'age', 'email']
Object.values(user); // ['Alice', 30, 'alice@example.com']
Object.entries(user); // [['name', 'Alice'], ['age', 30], ['email', 'alice@example.com']]

7. 객체의 응용 - 구조 분해 할당, 스프레드

a. 구조 분해 할당

const { name, age } = user;

객체의 프로퍼티를 개별 변수로 쉽게 꺼내는 문법입니다.
위 코드에서는 user 객체에서 name과 age라는 프로퍼티 값을 각각 동일한 이름의 변수로 추출합니다.
예를 들어 user = { name: 'Alice', age: 25 }일 경우, name은 'Alice', age는 25가 됩니다.

b. 스프레드 연산자

const newUser = { ...user, isAdmin: false };

기존 객체의 모든 프로퍼티를 복사한 뒤, 새로운 속성을 덧붙이거나 덮어씌우는 문법입니다.
user 객체의 내용을 그대로 가져와 newUser를 만들되, isAdmin 속성은 false로 추가하거나 수정하는 형태입니다.
이를 통해 불변성(immutability)을 유지하면서 객체를 확장하거나 변경할 수 있습니다.

8. 마무리

자바스크립트 객체는 데이터를 그룹화하고 관련된 기능을 묶어서 표현할 수 있는 강력한 도구입니다. 객체는 다양한 방식으로 생성될 수 있으며, 프로퍼티와 메서드를 통해 유연하게 데이터를 다룰 수 있습니다. 특히 객체는 자바스크립트의 프로토타입 기반 상속과 클래스, 모듈 시스템 등 다양한 개념의 기반이 되므로 꼭 잘 이해하고 있어야 합니다.