얕은 복사

얕은 복사란 객체(Object)를 복사할 때 기존 값과 복사된 값이 같은 참조(reference)를 가리키고 있는 것을 말한다.
즉, 얕은 복사는 객체(Object)의 참조 타입(Reference Type)(주소 값)을 복사한다.
객체(Object) 안에 객체(Object)가 있을 경우 한 개의 객체(Object)라도 기존 변수(Variable)의 객체(Object)를 참조하고 있다면 이를 얕은 복사라고 한다.
주로 불변성 유지를 위해 사용한다.

Array.prototype.slice()

얕은 복사 방법의 대표적인 예라고 할 수 있다.
start부터 end 인덱스까지 기존 배열(Array)에서 추출하여 새로운 배열(Array)을 리턴하는 메서드(Method)이다.
만약 start와 end를 설정하지 않는다면, 기존 배열을 전체 얕은 복사한다.

JavaScript

기존 배열(Array)에는 영향을 끼치지 않아서 깊은 복사(Deep Copy)로 보일 수 있지만, 원시 타입(Primitive type)을 저장한 1차원 배열(Array)일 뿐이다.
원시 타입(Primitive type)은 기본적으로 깊은 복사이다.
slice() 메서드(Method)는 기본적으로 얕은 복사를 수행한다.

JavaScript

만약 1차원 배열(Array)이 아닌 중첩 구조를 갖는 2차원 배열이면 얕은 복사를 수행하게 된다.

JavaScript

- 또 다른 예시이다. - 배열(Array) 안에 객체(Object)를 수정하고자 할 경우 얕은 복사를 수행하는 것을 볼 수 있다.

하지만 원시 타입(Primitive type)은 기본적으로 깊은 복사(Deep Copy)라 기존 변수(Variable)에 있는 값과는 다른 값을 도출하는 것을 볼 수 있다.

Object.assign() 매개변수(parameter)(생성할 객체, 복사할 객체)

메서드(Method)의 첫 번째 인자로 빈 객체(Object)를 넣어주고 두 번째 인자로 복사할 객체(Object)를 넣어주면 된다.

JavaScript

복사된 객체 copy 자체는 기존 object와 다른 객체(Object)지만 그 안에 들어가 있는 값은 기존 object안의 값과 같은 참조 값을 가리키고 있다.

확산 연산자(spread operator)

마찬가지로 얕은 복사이다.

JavaScript

Array.prototype.slice()

얕은 복사 방법의 대표적인 예라고 할 수 있다.

start부터 end 인덱스까지 기존 배열(Array)에서 추출하여 새로운 배열(Array)을 리턴하는 메서드(Method)이다.

만약 start와 end를 설정하지 않는다면, 기존 배열을 전체 얕은 복사한다.

JavaScript

const original = ['a', 2, true, 4, "hi"];
const copy = original.slice(); // r

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true 
copy.push(10); 

console.log(JSON.stringify(original) === JSON.stringify(copy)); // false 

console.log(original); // [ 'a', 2, true, 4, 'hi' ]
console.log(copy); // [ 'a', 2, true, 4, 'hi', 10 ]

기존 배열(Array)에는 영향을 끼치지 않아서 깊은 복사(Deep Copy)로 보일 수 있지만, 원시 타입(Primitive type)을 저장한 1차원 배열(Array)일 뿐이다.

원시 타입(Primitive type)은 기본적으로 깊은 복사이다.

slice() 메서드(Method)는 기본적으로 얕은 복사를 수행한다.

JavaScript

const original = [  
	[1, 1, 1, 1],  
	[0, 0, 0, 0],  
	[2, 2, 2, 2],  
	[3, 3, 3, 3],
]; 

const copy = original.slice();
console.log(JSON.stringify(original) === JSON.stringify(copy)); // true 
// 복사된 배열에만 변경과 추가.copy[0][0] = 99; 

copy[2].push(98); 
console.log(JSON.stringify(original) === JSON.stringify(copy)); // true 

console.log(original);
// [ [ 99, 1, 1, 1 ], [ 0, 0, 0, 0 ], [ 2, 2, 2, 2, 98 ], [ 3, 3, 3, 3 ] ]출력

console.log(copy);
// [ [ 99, 1, 1, 1 ], [ 0, 0, 0, 0 ], [ 2, 2, 2, 2, 98 ], [ 3, 3, 3, 3 ] ]출력

만약 1차원 배열(Array)이 아닌 중첩 구조를 갖는 2차원 배열이면 얕은 복사를 수행하게 된다.

JavaScript

const original = [
	{ a : 1, b : 2 }, true
];

const copy = original.slice(); 
console.log(JSON.stringify(original) === JSON.stringify(copy)); // true 
// 복사된 배열에만 변경

copy[0].a = 99;
copy[1] = false; 

console.log(JSON.stringify(original) === JSON.stringify(copy)); // false 

console.log(original); // [ { a : 99, b : 2 }, true ]
console.log(copy); // [ { a: 99, b: 2 }, false ]

- 또 다른 예시이다. - 배열(Array) 안에 객체(Object)를 수정하고자 할 경우 얕은 복사를 수행하는 것을 볼 수 있다.

하지만 원시 타입(Primitive type)은 기본적으로 깊은 복사(Deep Copy)라 기존 변수(Variable)에 있는 값과는 다른 값을 도출하는 것을 볼 수 있다.

Object.assign() 매개변수(parameter)(생성할 객체, 복사할 객체)

메서드(Method)의 첫 번째 인자로 빈 객체(Object)를 넣어주고 두 번째 인자로 복사할 객체(Object)를 넣어주면 된다.

JavaScript

const object = {
	a : "a",
	number : {
		one : 1,    
		two : 2,  
	}
}; 

const copy = Object.assign({}, object); 

copy.number.one = 3; // 내부 객체의 속성을 바꾸므로 복사되지 않음

console.log(object === copy); // false
console.log(object.number.one  === copy.number.one); // true

복사된 객체 copy 자체는 기존 object와 다른 객체(Object)지만 그 안에 들어가 있는 값은 기존 object안의 값과 같은 참조 값을 가리키고 있다.

확산 연산자(spread operator)

마찬가지로 얕은 복사이다.

JavaScript

const object = {
	a : "a",
	number : {
		one : 1,
		two : 2
	}
}; 

const copy = { ...object } 

copy.number.one = 3; // 내부 객체의 속성을 바꾸므로 복사되지 않음

console.log(object === copy); // false
console.log(object.number.one  === copy.number.one); // true

Array.prototype.slice()

Object.assign() 매개변수(parameter)(생성할 객체, 복사할 객체)

확산 연산자(spread operator)

Synapse Map Insight

얕은 복사

Array.prototype.slice()

Object.assign() 매개변수(parameter)(생성할 객체, 복사할 객체)

확산 연산자(spread operator)

Synapse Map Insight