얕은 복사, 깊은 복사

// user 객체를 생성
var user = {
	name: '짱아',
	gender: '여성',
};

// 이름을 변경하는 함수 정의
// 입력값 : 변경대상 user 객체, 변경하고자 하는 이름
// 출력값 : 새로운 user 객체
// 특징 : 객체의 프로퍼티에 접근하는 것이 아니라, 아에 새로운 객체를 반환 -> 불변
var changeName = function (user, newName) {
	return {
		name: newName,
		gender: user.gender,
	};
};

// 변경한 user정보를 user2 변수에 할당하겠습니다.
// 불변이기 때문에 user1은 영향이 없어요!
var user2 = changeName(user, '유리');

// 결국 아래 로직이 수행되겠네요.
if (user !== user2) {
	console.log('유저 정보가 변경되었습니다.');
}

console.log(user.name, user2.name); // 짱아 유리
console.log(user === user2); // false 👍

changeName 함수는 새로운 객체를 만들기 위해

변경할 필요가 없는 gender 프로퍼티를 하드코딩으로 입력

 => 이러한 속성이 10개라면?

 

 

이를 위한 방법 '얕은복사'

// 얕은 복사
var copyObject = function (target) {
    var result = {};
    for (var prop in target) {
        result[prop] = target[prop];
    }
    return result;
}

var user = {
    name: "짱아",
    gender: "여성"
};

var user2 = copyObject(user);
user2.name = "유리";

if (user !== user2) {
    console.log('유저 정보 변경');
}

console.log(user.name, user2.name);
console.log(user === user2);

 

얕은 복사 : 바로 아래 단계의 값만 복사

문제점 : 중첩된 객체의 경우 참조형 데이터가 저장된 프로퍼티를 복사할 때, 주소값만 복사

 

중첩된 객체에 대해서는 완벽한 복사를 할 수 없다. 이것이 얕은 복사의 한계

 

 

객체의 프로퍼티 중,

기본형 데이터는 그대로 복사 + 참조형 데이터는 다시 그 내부의 프로퍼티를 복사

⇒ 재귀적 수행!

 

재귀적 수행이란? 함수나 알고리즘이 자기 자신을 호출하여 반복적으로 실행되는 것

var copyObjectDeep = function(target) {
	var result = {};
	if (typeof target === 'object' && target !== null) {
		for (var prop in target) {
			result[prop] = copyObjectDeep(target[prop]);
		}
	} else {
		result = target;
	}
	return result;
}
var obj = {
	a: 1,
	b: {
		c: null,
		d: [1, 2],
	}
};

var obj2 = copyObjectDeep(obj);

obj2.a = 3;
obj2.b.c = 4;
obj2.b.d[1] = 3;

console.log(obj);
console.log(obj2);