Javascript 객체 복사 (Object, Array)

객체의 복사

자바스크립트에서 변수에 객체 (객체, 배열)를 할당하는 방식은 참조를 만든다

let arr = [1,2,3];
let copy = arr;

copy[0] = 'a';

console.log(arr); // ['a',2,3]
console.log(copy); // ['a',2,3]

console.log(arr === copy); //true

이런 방식은 copy 가 arr 의 값을 참조하기에 완전히 같은 것이다

 

객체(Object) 복사

참조하지 않게 복사하려면 assign 과 spread 연산자를 사용한다

//assign 을 이용한 객체 복사
let obj = {name:'kim'};
let copy = Object.assign({}, obj);

console.log(obj === copy); 

copy.name = 'lee';

console.log(obj);
console.log(copy);

//Spread(...) 연산자를 이용한 객체 복사
let objSpread = {name:'kim'};
let copySpread = {...objSpread};

console.log(objSpread === copySpread);

copySpread.name = 'lee';

console.log(objSpread);
console.log(copySpread);

 

배열(Array) 복사

slice, concat, spread 연산자로 복사가 가능하다

let arrOrigin = [1, 2, 3];
let arrConcat = arrOrigin.concat();
let arrSlice = arrOrigin.slice();
let arrSpread = [...arrOrigin];

console.log(arrOrigin === arrConcat, arrOrigin === arrSlice, arrOrigin === arrSpread);

arrConcat[0] = 'a';
arrSlice[1] = 'b';
arrSpread[2] = 'c';

console.log(arrConcat);
console.log(arrSlice);
console.log(arrSpread);

 

주의사항

위의 복사 방식은 1차원 적인 객체는 잘 된다

하지만 중첩객체 (Nested Object) 에서는 안에 있는 Object 가 복사가 안되고 참조되어버린다

중첩객체는 Object 안에 Object, 배열안에 Object, Object 안에 배열 이다

 

중첩객체의 복사

1. 위의 복사 방식으로 복사 후에 안에 있는 객체를 또 복사 해준다

Object 안에 Array 의 경우 : Object 복사 후 안에있는 Array 를 또 복사

2. 재귀함수 만들어서 최하단 계층 까지 반복적으로 복사 하도록 

3. JSON 객체의 메소드를 활용한 복사

4. 외부 라이브러리 활용

• https://immutable-js.com/#nested-structures
• https://lodash.com/docs/4.17.15#cloneDeep

결론

복잡한 구조의 중첩객체를 사용하면 외부 라이브러리 사용해서 복사 하자