[JavaScript] 얕은 복사(Shallow copy)와 깊은 복사(Deep copy)

얕은 복사(Shallow copy)

객체를 복사할 경우 복사된 값이 같은 참조를 가리키고 있는 것을 말한다.

let person = [{ name: ["Alex", "John", "Rose"] }];
let copy = person.slice();

//얕은 복사 
console.log(person === copy); // false 기존 객체와 복사한 객체의 주소가 서로 다르다.
console.log(person[0].name === copy[0].name); // true 기존 객체의 0번째 인덱스 객체의 주소와 복사한 객체의 0인덱스 객체의 주소는 같다.

person 객체를 얕은 복사로 복사를 할 경우 복사된 값이 같은 주소를 가리키고 있다. 따라서 우리가 기존 요소의 공유 속성 값을 선택적으로 변경하게 되면 기존 객체의 값도 변경되게 된다.

copy[0].name = ["Alex", "John", "Herry"]; // 공유 속성 값을 선택적으로 변경
console.log(person[0]); // [ 'Alex', 'John', 'Herry' ]

위의 코드처럼 얕은 복사의 경우 복사된 copy객체의 값을 변경을 했음에도 기존 person객체의 값도 같이 변경이 된다.

copy[0] = { name: ["Alex", "John", "Herry"] }; // 새로운 객체를 재할당(주소가 다르다)
console.log(person[0]); // [ 'Alex', 'John', 'Rose' ] 기존 객체의 값이 변경되지 않음
console.log(copy[0]); // [ 'Alex', 'John', 'Herry' ] 복사된 객체의 값만 새로 할당됨

얕은 복사를 하는 명령어

... , Array.prototype.concat(), Array.prototype.slice(), Array.from(), Object.assign(), Object.create()

 

깊은 복사(Deep copy)

깊은 복사는 원본 개체의 참조와 동일한 참조를 공유하지 않는 복사본을 말한다.

JSON.stringify() JavaScript 개체 또는 값을 JSON 문자열로 변환한다.

JSON.parse() JSON 문자열을 구문 분석하여 문자열에서 설명하는 JavaScript 값 또는 개체를 구성한다.

let person = ["age", { name: ["Alex", "John", "Rose"] }];
let copy = JSON.parse(JSON.stringify(person));

copy[1].name = ["Alex", "John", "Herry"]; // 공유 속성 값을 선택적으로 변경을 해도
console.log(person[1].name); // [ 'Alex', 'John', 'Rose' ] 기존 객체의 값은 그대로 이다.

깊은 복사를 하는 명령어

JSON.stringify() , JSON.parse(), structuredClone()