자바스크립트 Object 클래스: 활용 방법과 실무 예시

자바스크립트에서 Object 클래스는 거의 모든 객체의 기반이 되는 핵심이다. 객체의 생성, 속성 관리, 프로토타입 체인 제어 등 다양한 기능을 제공한다. 이번 포스팅에서는 Object 클래스에 대해 알아보고 실제 업무에서 자주 사용하는 예제를 통해 실용적인 활용법을 소개하겠다.

1. Object 클래스?

자바스크립트에서 Object는 객체의 기반 클래스로 모든 객체는 암묵적으로 Object를 상속받는다. 이를 통해 객체와 관련된 다양한 기능을 제공한다.

기본 구문

const obj = new Object(); // Object 클래스 이용
const objLiteral = {};    // 객체 리터럴 방식

2. 주요 메서드와 사용법

2.1 Object.create()

지정한 프로토타입을 갖는 새로운 객체를 생성

const proto = { greet() { return "Hello"; } };
const obj = Object.create(proto);
console.log(obj.greet()); // "Hello"

2.2 Object.assign()

하나 이상의 객체를 병합하여 새로운 객체를 만든다

const target = { a: 1 };
const source = { b: 2, c: 3 };
const merged = Object.assign(target, source);
console.log(merged); // { a: 1, b: 2, c: 3 }

2.3 Object.keys() / Object.values() / Object.entries()

체의 키, 값, 키-값 쌍을 배열로 반환

const user = { id: 1, name: "Alice" };
console.log(Object.keys(user));   // ["id", "name"]
console.log(Object.values(user)); // [1, "Alice"]
console.log(Object.entries(user)); // [["id", 1], ["name", "Alice"]]

2.4 Object.freeze() / Object.seal()

Object.freeze(): 객체를 동결해 속성 추가/삭제 및 수정 불가능
Object.seal(): 속성 추가/삭제 불가능, 값 수정은 가능

const obj = { name: "Alice" };
Object.freeze(obj);
obj.name = "Bob"; // 무시됨
console.log(obj.name); // "Alice"

2.5 Object.hasOwn()

객체가 특정 속성을 직접적으로 가지고 있는지 확인
(Object.prototype.hasOwnProperty()를 대체)

const obj = { name: "Alice" };
console.log(Object.hasOwn(obj, "name")); // true
console.log(Object.hasOwn(obj, "toString")); // false

3. 실제 업무에서 사용하는 예시

현재 우리 프로젝트에서는 Object.values(), Object.keys(), Object.assign(), Object.hasOwn(), Object.entries() 등 다양한 메서드를 사용하고 있다.

3.1 데이터 병합과 복사

Object.assign() 은 API 응답 데이터를 기존 상태와 병합하거나 객체를 복사할 때 자주 사용된다.

const defaultSettings = { theme: "dark", notifications: true };
const userSettings = { notifications: false };

const finalSettings = Object.assign({}, defaultSettings, userSettings);
console.log(finalSettings); // { theme: "dark", notifications: false }

3.2 객체의 key-value 변환

const user = { id: 1, name: "Alice" };
const swapped = Object.fromEntries(
  Object.entries(user).map(([key, value]) => [value, key])
);
console.log(swapped); // { 1: "id", Alice: "name" }

3.3 조건에 따른 속성 필터링

Object.entries() 와 Object.fromEntries() 를 조합하여 객체를 필터링

const data = { id: 1, name: "Alice", isActive: true };
const filtered = Object.fromEntries(
  Object.entries(data).filter(([key, value]) => value !== true)
);
console.log(filtered); // { id: 1, name: "Alice" }

3.4 속성 확인

Object.hasOwn(obj, property) 메서드를 에러 코드 검증에 사용

• obj: 검사할 객체
• property: 확인할 속성 이름

		<TextField
          margin="dense"
          name="code"
          label="코드"
          type="text"
          value={codeState}
          fullWidth
          onChange={handleChangeCode}
          error={errors && Object.hasOwn(errors, "code")}
          helperText={errors && errors.code}
        />

Object 클래스만 잘 활용해도 자바스크립트의 모든 데이터를 내 입맛대로 필터링하거나 병합할 수 있다. 하지만 배열과 함께 사용하는 경우는 Array 클래스의 map, filter, reduce와 조합해서 사용하면 더 효율적으로 코드를 짤 수 있다.

const users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];
const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob"]

간단하게나마 알아보았다. 끝!