얕은 복사 ( Shallow copy)

객체가 담겨있는 변수를 다른 변수에 할당하면 call by reference (데이터 복사가 아닌 참조)가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다.

const person1 = {name:'daeeun'};
const person2 = person1;
person1.name = 'kim';
// result
person2.name // 'kim'
person1 === person2; // true - 같은 데이터 주소를 바라보고 있는 두 변수

데이터가 그대로 하나 더 생성된 것이 아닌 해당 데이터의 메모리 주소를 전달하게 돼서, 결국 한 데이터를 공유하게 되는 것이다.

깊은 복사 ( Deep copy)

한 데이터의 공유가 아닌, 똑같은 구조의 객체를 하나 더 생성하여 따로 사용하고자 할 때가 있다.
이럴때 깊은 복사를 사용한다.
데이터 참조가 아닌 객체의 형태를 그대로 복사하게 함으로써, 한 객체가 변경되도 다른 객체의 데이터에는 영향이 없게 된다.

1차원 (depth 1)

배열 복사

1.slice ()
2.concat()
3.전개 연산자
4.Array.from()

객체 복사

1.Object.assign()
2.전개 연산자

• 1차원인 이유

let arrA = ['a', 'b', ['c', 'd']];
let arrB = arrA.slice();
console.log(arrA); // ['a', 'b', ['c', 'd']]
console.log(arrB);//['a', 'b', ['c', 'd']]

arrA[0] = 'z';
arrB[0] = 'x';

arrA[2][0] = 'e';
arrB[2][1] = 'f';
console.log(arrA); //[ 'z', 'b', [ 'e', 'f' ] ]
console.log( arrB);//[ 'x', 'b', [ 'e', 'f' ] ]

모두 똑같이 1 depth에서는 잘 복사가 되지만 2depth 이상부턴 참조관계처럼 되어버린다.

완전한 깊은 복사

재귀적으로 깊은 복사를 수행

깊은 복사를 하려는 형태에 맞게 재귀 함수를 만들어서 복사를 해야한다.

사용하는 Object의 Depth가 길어질수록 Time Complexity(시간 복잡도)도 늘어나게 된다.

Lodash의 cloneDeep 함수 사용

자바스크립트 고차함수 집합 및 함수형 라이브러리이다.

Lodash의 cloneDeep 함수를 사용하면, 완벽하게 깊은 복사를 할 수 있다.

제일 편하다. 다만, lodash가 조금 무겁다...

JSON.parse()와 JSON.stringify()함수 사용

JSON.stringify 함수를 이용해서, Object 전체를 문자열로 변환 후, 다시 JSON.parse 함수를 이용해서 문자열을 Object 형태로 변환한다.

그러면 문자열로 변환하는 순간 참조 값이 끊기기 때문에 새로운 Object로 만들어 사용할 수 있다.

하지만 JSON 함수는 엄청나게 리소스를 잡아먹는 함수인 만큼, 성능이 좋지 않은 부분을 고려해야 한다