얕은 복사와 깊은 복사 (2. 얕은 복사의 종류)

얕은 복사법

얕은 복사(Shallow Copy)를 수행하는 여러 방법을 자세히 살펴보자. 얕은 복사는 주로 배열과 객체에 대한 복사 시에 사용되며, 중첩된 객체 혹은 배열은 참조 복사를 유지 한 체, 중첩되지 않은 최상위 수준의 요소 값을 복사하는 방법을 뜻한다.

따라서, 중첩된 객체 혹은 배열은 원본 or 얕은 복사된 값이 변경되면 나머지 다른 하나의 값도 따라서 변경된다. 중첩된 참조(주소)에 대한 연결을 유지하였기 때문이다.

객체 - Object.assign()

Object.assign() 메서드를 사용하여 객체를 얕게 복사한다. 첫번째 인자에는 복사된 값이 담길 객체를 넣어주고, 두번째 인자에는 복사할 객체를 넣어준다.

const originalObject = { a: 1, b: { c: 2 } };
const shallowCopyObject = Object.assign({}, originalObject);	// { a: 1, b: { c: 2 } };
// a 속성의 값은 그대로 복사되지만 중첩 오브젝트인 b 속성에 대한 객체의 참조는 여전히 유지

객체, 배열 - Spread Operator

전개 연산자인 Spread Operator ... 를 사용하여 배열을 얕게 복사한다.

const originalArray = [1, 2, 3, [4,5]];
const shallowCopyArray = [...originalArray];		
// 1, 2, 3은 값이 그대로 복사되지만 [4, 5]에 대한 참조는 여전히 유지

const originalObject = { a: 1, b: 2, c: { d: 3, e: 4 } };
const shallowCopyArray = { ...originalObject };
// a, b 속성의 값은 그대로 복사되지만 중첩 오브젝트인 c 속성에 대한 객체의 참조는 여전히 유지

배열 - Array.slice()

배열의 slice() 메서드를 사용하여 배열을 얕게 복사한다.

const originalArray = [1, 2, 3, [4, 5]];			
const shallowCopyArray = originalArray.slice();		// [1, 2, 3, [4, 5]];
// 1, 2, 3은 값이 그대로 복사되지만 [4, 5]에 대한 참조는 여전히 유지

배열 - Array.concat()

배열의 concat() 메서드를 사용하여 배열을 얕게 복사한다.

const originalArray = [1, 2, 3, [4, 5]];
const shallowCopyArray = originalArray.concat();		// [1, 2, 3, [4, 5]];
// 1, 2, 3은 값이 그대로 복사되지만 [4, 5]에 대한 참조는 여전히 유지

배열 - Array.from()

Array.from() 메서드를 사용하여 배열을 얕게 복사한다.

const originalArray = [1, 2, 3 [4, 5]];
const shallowCopyArray = Array.from(originalArray);		// [1, 2, 3, [4, 5]];
// 1, 2, 3은 값이 그대로 복사되지만 [4, 5]에 대한 참조는 여전히 유지

배열 - Array.map() / Array.filter() / Array.reduce()

map(), filter(), reduce() 를 사용하여 배열을 얕게 복사한다.

const originalArray = [1, 2, 3 [4, 5]];
const shallowCopyArray = originalArray.map(item => item);	// [1, 2, 3, [4, 5]];
// 1, 2, 3은 값이 그대로 복사되지만 [4, 5]에 대한 참조는 여전히 유지

이러한 방법들 중에서 얕은 복사 방법을 선택할 때는 상황에 맞게 사용해야 한다. 일부 방법은 특정 상황에서 만 적용될 수 있으며, 일부 방법은 성능적으로 특정 상황에서 더욱 효율적인 방법이 될 수 있다. 개발 중 자주 쓰이는 얕은 복사 방법은 Spread Operator 이다.