46. 자바스크립트 ES6 객체 확장 (ES6 Object Extensions)

ES6 객체 확장 (ES6 Object Extensions)

자바스크립트(JavaScript)의 ES6(ECMAScript 2015)에서 객체를 다루는 기능이 크게 확장되었다. ES6 객체 확장은 객체 리터럴 문법 개선, 새로운 메서드 추가 등을 포함한다. ES6에서 도입된 객체 관련 기능과 그 사용법을 예제로 확인해보자.

기존 방식보다 간결하고 효율적인 객체 작업이 가능해졌다.

ES6 객체 확장이란 무엇인가?

ES6 객체 확장은 객체 정의와 조작을 더 편리하게 만드는 문법과 메서드를 제공한다. 대표적인 기능을 예제로 보자:

const name = "철수";
const obj = { name }; // 속성 축약
console.log(obj."name"); // "철수"

ES6 객체 확장 기능

ES6에서 추가된 주요 객체 기능을 예제로 확인해보자.

1. 속성 이름 축약

변수 이름과 속성 이름이 같을 때 축약 가능하다:

const age = 25;
const user = { age, "name": "영희" };
console.log(user); // { age: 25, name: "영희" }

2. 메서드 정의 축약

객체 내 함수 정의에서 function 키워드를 생략한다:

const obj2 = {
    sayHello() {
        return "안녕!";
    }
};
console.log(obj2.sayHello()); // "안녕!"

3. 계산된 속성 이름

속성 이름을 동적으로 정의한다:

const key = "id";
const obj3 = { [key]: 1 };
console.log(obj3."id"); // 1

4. Object.assign

여러 객체를 하나로 병합한다:

const obj4 = { "a": 1 };
const obj5 = { "b": 2 };
const merged = Object.assign({}, obj4, obj5);
console.log(merged); // { a: 1, b: 2 }

5. Object.is

두 값의 엄격한 비교를 수행한다:

console.log(Object.is(0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

사용 사례

ES6 객체 확장을 활용한 예제를 확인해보자.

1. 동적 속성 생성

const prefix = "user";
const data = {
    [prefix + "Name"]: "철수",
    [prefix + "Age"]: 25
};
console.log(data); // { userName: "철수", userAge: 25 }

2. 객체 병합

const defaults = { "theme": "light" };
const settings = { "font": "Arial" };
const config = Object.assign({}, defaults, settings);
console.log(config); // { theme: "light", font: "Arial" }

3. 메서드 정의 간소화

const calculator = {
    value: 0,
    add(x) { this.value += x; },
    getValue() { return this.value; }
};
calculator.add(5);
console.log(calculator.getValue()); // 5

성능과 한계

장점

- 간결함: 코드가 더 짧고 읽기 쉽다.

- 유연성: 동적 속성 이름과 메서드 정의가 편리하다.

한계

- 호환성: ES6 미지원 환경에서는 변환(Babel 등)이 필요하다.

- 얕은 복사: Object.assign은 깊은 복사를 지원하지 않는다.

깊은 복사가 필요한 경우 JSON 방식이나 커스텀 함수를 고려할 수 있다.

마무리

ES6 객체 확장은 자바스크립트에서 객체를 다루는 방식을 개선한다. 새로운 문법과 메서드를 예제로 다뤘다.