[자바스크립트] ES6+ Object 선언 & 복사

Object 선언

객체는 자바스크립트에서 중요한 데이터 구조중 하나이다. 객체는 키-값 쌍의 집합으로, 각 키는 문자열이고 각 값은 어떤 타입이든 될 수 있다. 객체는 중괄호'{ }'를 사용하여 선언한다.

// 빈 객체 선언
const emptyObject = {};

// 속성이 있는 객체 선언
const person = {
    name: 'John',
    age: 30,
    isEmployed: true
};

console.log(person.name); // John
console.log(person['age']); // 30

 

계산된 속성명

계산된 속성명을 사용하면 객체의 속성 이름을 동적으로 생성할 수 있다. 계산된 속성명은 대괄호'[ ]'를 이용하여 정의한다.

let propName = 'name';
let person = {
    [propName]: 'John',
    age: 30
};
console.log(person.name); // John

// 동적으로 속성명을 설정
let index = 0;
let dynamicObject = {
    [`key${index}`]: 'value0',
    [`key${index + 1}`]: 'value1'
};
console.log(dynamicObject); // { key0: 'value0', key1: 'value1' }

위 예제에서 '[propName]'은 'name'으로 들어가게 되어 person.name과 person[propName]은 같은 값을 가리키게 된다. 즉, propName이라는 속성이 아니라 propName 변수에 담긴 값인 'name'이라는 속성이 생성되는 것이다.

 

단축 속성명 

단축 속성명은 객체 리터럴에서 이름과 변수 이름이 같을 때 더 간결하게 작성할 수 있는 문법이다. 단축 속성명을 사용하면 변수 이름을 그대로 속성 이름으로 사용할 수 있다.

let name = 'Jane';
let age = 25;

// 단축 속성명 사용 전
let person1 = {
    name: name,
    age: age
};
console.log(person1); // { name: 'Jane', age: 25 }

// 단축 속성명 사용 후
let person2 = {
    name,
    age
};
console.log(person2); // { name: 'Jane', age: 25 }

 

메서드 단축 구문

단축 속성명과 함께 ES6에서 지원하고, 메서드를 정의할 때 더 간결한 구문을 제공한다.

// ES5 방식
let obj1 = {
    greet: function() {
        console.log('Hello');
    }
};
obj1.greet(); // Hello

// ES6 방식
let obj2 = {
    greet() {
        console.log('Hello');
    }
};
obj2.greet(); // Hello

 

 

Object 복사

객체를 복사할때는 얕은 복사와 깊은 복사 두 가지 방법이 있다.

 

얕은 복사

얕은 복사는 객체의 속성만 복사하여, 중첩된 객체는 원본 객체와 참조 공유한다. 얕은 복사를 수행하는 방법은 아래와 같다.

const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);
// const copy = { ...original }; // 스프레드 연산자를 이용한 얕은 복사


copy.a = 10;
copy.b.c = 20;

console.log(original.a); // 1 (복사본과 독립적)
console.log(original.b.c); // 20 (복사본과 공유됨)

여기서 중요한 부분이, 얕은 복사는 최상위 속성만 복사하고, 중첩된 객체는 원본 객체와 참조 공유한다. 따라서 copy.a를 변경해도 original.a는 영향을 받지 않지만, copy.b.c를 변경하면 original.b.c도 함께 변경된다.

 

깊은 복사

깊은 복사는 객체의 모든 중첩된 객체까지 복사하여 독립적인 객체를 만든다. 두 가지 방법을 이용해서 깊은 복사를 할 수 있다.

 

JSON.parser()와 JSON.stringify()

객체가 순환 참조를 가지지 않을때 사용할 수 있다.

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));

copy.a = 10;
copy.b.c = 20;

console.log(original.a); // 1 (복사본과 독립적)
console.log(original.b.c); // 2 (복사본과 독립적)

 

라이브러리 사용

// lodash를 import하여 사용해야 합니다.
const _ = require('lodash');

const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);

copy.a = 10;
copy.b.c = 20;

console.log(original.a); // 1 (복사본과 독립적)
console.log(original.b.c); // 2 (복사본과 독립적)