깊은 복사는 다른 객체를 생성해 낸다고 보아도 되겠다. [JS 문법 종합반 3주차 - 1]

얕은 복사는 중첩된 객체를 얕은 복사하면 문제가 있었다. 관련하여 게시물참조 https://gamunbidev.tistory.com/54

 

그런 문제를 해결하는 것이 깊은 복사다. 깊은 복사를 하면 복사당한 객체나 복사로 생긴 객체 하나를 수정하면 그 건드린 객체만 바뀐다. (얕은 복사에서는 하나를 수정하면 둘다 바뀌는 문제가 있었다.) 

 

여러 말 할 필요 없이 코드를 보자.

var user = {
	name: 'wonjang',
	urls: {
		portfolio: 'http://github.com/abc',
		blog: 'http://blog.com',
		facebook: 'http://facebook.com/abc',
	},
	arr: ['a', 'b']
};
// 깊은 복사
var copyObjectDeep = function (target) {
	var result = {};

	if (typeof target === 'object' && target !== null){
		// 이 if 부분이 중요하다. 이게 없으면 재귀함수이므로 무한반복 오류가 날 것이다. 
		// object가 아닌 파라미터를 받으면 else 구문으로 빠지기 때문에 함수가 끝날 수 있다.
	for (var prop in target) {
		result[prop] = copyObjectDeep(target[prop]);  
		// 재귀함수다. target[prop] 으로 target 객체 내의 또다른 객체를 또다시 함수에 넣어 실행한다.
	}
	} else {
		result = target;
	}
	return result;
}
user2 = copyObjectDeep(user)

user2.urls.portfolio = 'http://portfolio.com'

console.log(user)
console.log(user2)

아래 코드로 user2 를 수정했을 때 user2 의 내용만 바뀌는 것을 콘솔에서 확인할 수 있다. 

user2.urls.portfolio = 'http://portfolio.com'