[JS] 배열, 객체 복사 방법

얕은 복사(shallow copy)

const obj1 = { a: 1, b: 2};
const obj2 = obj1;

console.log( obj1 === obj2 ); // true

위의 코드처럼 객체를 직접 대입하는 경우 두 객체가 같은 주소를 가지게 되는 것을 얕은 복사라고 한다.

두 객체는 같은 주소를 참조하기 때문에 한 객체의 프로퍼티를 변경하면 나머지 객체도 같이 변경된다.

 

 

깊은 복사(deep copy)

얕은 복사처럼 주소를 복사해서 공유하는 것이 아니라, 객체의 프로퍼티 값들만 복사하는 것을 깊은 복사라고 한다.

따라서 두 객체는 다른 주소를 갖게되어 한 객체의 프로퍼티를 변경하더라도 나머지 객체의 값은 변하지 않는다.

---

배열의 복사 방법 - 얕은 복사(depth1인 경우 깊은 복사)

• spread 연산자(...)
• slice()
• concat()
• Array.from()

 

spread 연산자 및 slice, concat, Array.from 메소드들은 배열을 복사하는 가장 간단한 방법이지만, depth가 1인 경우에만 깊은 복사가 이루어진다. 즉, 다차원 배열처럼 depth가 2 이상인 경우 얕은 복사가 이루어진다.

let arrA = [1, 2, 3];
let arrB = [...arrA];

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

 

---

 

 

객체의 복사 방법 - 얕은 복사(depth1인 경우 깊은 복사)

• spread 연산자(...)
• Object.assign()

 

배열과 마찬가지로 spread 연산자 및 Object.assign 메소드는 객체를 복사하는 가장 간단한 방법이지만, depth가 1인 경우에만 깊은 복사가 이루어진다. 즉, 객체의 프로퍼티안에 객체가 있는 등 depth가 2 이상인 경우 얕은 복사가 이루어진다.

var objectA = {
    name: 'Java'
}

var objectB = Object.assign({},objectA);

console.log("objectA : ", objectA);
console.log("objectB : ", objectB);

console.log("값 변경 후");

objectA.name = 'C Programming';
objectB.name = 'React';

console.log("objectA : ", objectA);
console.log("objectB : ", objectB);

---

 

JSON.parse() 및 JSON.stringify() 메소드 - 깊은 복사

JSON.stringify 메소드로 원본 객체를 문자열로 변환한 뒤, JSON.parse 메소드로 자바스크립트 Object로 파싱하는 방법이다. 이를 이용하면 depth가 2 이상인 배열 및 객체의 깊은 복사를 구현할 수 있다.

let arrA = [[1, 2, 3], ['A', 'B', 'C']];
let arrB = JSON.parse(JSON.stringify(arrA));

arrB[0][0] = 10;

console.log(arrA);
// [[1, 2, 3], ['A', 'B', 'C']]
console.log(arrB);
// [[10, 2, 3], ['A', 'B', 'C']]

---