[javascript] 참조와 복사 (깊은 복사와 얕은 복사)

원시값의 복사

원시값 (string, number, boolean)의 경우 복사를 하고 복사본의 값을 바꿔도 원본의 값이 달라지지 않는다.

var fruit = 'orange';
var fruitCopy = fruit;

fruitCopy = 'strawberry'
console.log(`fruit = ${fruit}`);
console.log(`fruitCopy = ${fruitCopy}`);

결과

fruit = orange
fruitCopy = strawberry

객체의 복사

그러나 객체의 경우 복사를 하고 복사본의 값을 변경할 경우
원본의 내용이 변경된다.
객체는 대입하면 참조(얕은복사) 관계가 되기 때문이다.

//객체의 경우
var fruit = {
	name: 'orange'
}
var fruitCopy = fruit;

fruitCopy.name = 'strawberry'

console.log(fruit.name); //strawberry
console.log(fruitCopy.name); //strawberry

//배열의 경우
var fruit = ['orange', 'strawberry', 'banana'];
var fruitCopy = fruit;

fruitCopy[0] = 'apple'

console.log(fruit[0]); //apple
console.log(fruitCopy[0]); //apple

//함수의 경우
var favorite = function(){}
favorite.fruit = 'strawberry'
favoriteCopy = favorite;

favoriteCopy.fruit = 'orange'

console.log(favorite.fruit); //orange
console.log(favoriteCopy.fruit); //orange

참조(얕은 복사)관계가 있는지 확인

obj === obj2 가 true일 경우 참조 (얕은 복사) 관계가 있는 것!

객체 복사

1. 1단계만 복사

• 2단계 이상일 경우 참조(얕은 복사)

❓ 2단계 이상이란?: 객체안의 객체가 있을 경우

var obj1 = {
  a : 1,
  b : {c : 1}
}

예제

var obj1 = {a : 1}
var obj2 = {};

//1. 
Object.keys(obj).forEach(function(key){
	obj2[key] = obj[key];
}); 

//2. 
Object.assign(obj2, obj);

배열의 경우

var arr1 = [1,2,3]
var arr2 = arr1.slice();

2. 깊은복사

• But, 성능이 좋지 않으며 프로토타입은 복사할 수 없다.

var obj3 = JSON.parse(JSON.stringify(obj1));
var arr3 = JSON.parse(JSON.stringify(arr1));