2024-11-04

내일배움캠프 Node.js 트랙 6일차

1. ZEP에서 이루어진 자바 문법 스터디

객체를 복사하고 병합하는 방식 - Object.assign과 전개 구문

객체를 복사하고 병합하는 방법에 대해 알아보자 (이 글에서는 편의상 얕은 복사에 대해서만 다루도록 하겠다.)

(1) Object.assign()

Object.assign() 메서드는 출처 객체들로부터 모든 열거 가능한 자체 속성을 복사해 대상 객체에 속성을 추가한다. 그 후 대상 객체를 반환한다.(출처 : MDN)) 이미 메소드에 복사 과정이 통합되어 있으므로 병합하는 과정에서 얕은 복사를 따로 진행해줄 필요는 없다.

메소드의 형식은 다음과 같다.

Object.assign(target, ...sources);

target : 목표 객체. 출처 객체의 속성을 복사해서 반영한 후 반환할 객체
sources : 출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체

Object.assign()을 활용하면 for ... in 구문을 쓰지 않더라도 얕은 복사가 가능하다.

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

당연히 병합도 가능하다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

여기서 중요한 점! 목표 객체의 속성 중 출처 객체와 동일한 키를 갖는 속성의 경우, 그 속성 값은 출처 객체의 속성 값으로 덮어쓰기가 가능하다. b의 밸류가 2에서 4로 변화한 것을 통해 이 사실을 알 수 있다.

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

여러 객체를 병합할 때도 마찬가지이다.

(2) 전개 구문

얕은 복사를 하는 방법 중 하나로는 전개 구문도 빼놓을 수 없다.

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

병합의 경우 Object.assign()보다 더 짧은 문법을 사용하는 게 가능하다.

var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

두 방식의 차이점

객체의 복사본을 생성하고 병합하게 될 때에는 둘의 차이점은 없다. 그러나 원본의 키값을 변경해야 할 때는 Object.assign()을 사용해야 하므로 전개 구문이 Object.assign()의 완벽한 대체제가 될 수는 없다.(그래도 더 편리하다.)