객체에서 전개 연산자 사용

객체에서 전개 연산자를 사용하는 것을 예시 코드와 함께 정리해보도록 하겠습니다.

 

 

Spread Operator - 전개 연산자

 

 

 

 

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"] };

const person2 = person1;

위의 예시 코드는 person1 객체를 person2에 할당한 것입니다.

 

이렇게 객체를 할당하게 되면 person2 객체에 할당된 것은 객체 자체가 아니라 객체가 저장된 메모리 공간 주소를 할당하게 되는 것입니다.

 

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"] };

const person2 = person1;

person1.age = 28;

console.log(person2); // {name: 'SH', hobbies: Array(2), age: 28} 출력

때문에 person1 객체에 프로퍼티를 추가하게 되면 같은 메모리 공간을 참조하는 person2 객체 또한 변하게 됩니다.

 

 

이때 전개 연산자를 사용하여 객체 안의 각 요소를 새로운 객체 안에 추가할 수 있습니다.

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"] };

const person2 = { ...person1 };

person1.age = 28;

console.log(person2); // {name: 'SH', hobbies: Array(2)} 출력

전개 연산자를 이용해 원본 객체의 요소를 새로운 객체에 추가를 해주니 원본 객체에 새로운 프로퍼티를 추가해주어도

 

새로운 객체는 영향을 받지 않는 것을 확인할 수 있습니다.

 

이는 person2 객체는 person1 객체와는 별개의 메모리 공간을 사용하기 때문입니다.

 

 

주의하실 점은 spread 연산자를 이용한 복사의 경우 shallow(얕은) 복사이기 때문에 객체 안에 배열이 있는 경우에는 배열은 복사된 것이 아닌 참조값을 유지하게 됩니다.

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"] };

const person2 = { ...person1 };

person1.age = 28;

person1.hobbies[0] = "Coding";

console.log(person2);

즉 person2 객체에 추가된 hobbies : ["Sports", "Cooking"]에서 배열은 여전히 메모리 공간의 주소이기 때문에

 

person1.hobbies[0] = "Coding" 으로 배열의 값을 바꾸게 되면 person2 객체 또한 영향을 받게 됩니다.

 

 

 

이때 추가적인 전개 연산자를 사용해주시면 객체 안의 배열 또한 원본과 분리된 새로운 배열을 만들어 복사한 배열 안 요소를 추가할 수 있습니다.

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"] };

const person2 = { ...person1, hobbies: [...person1.hobbies] };

person1.hobbies[0] = "Coding";

console.log(person2);

이렇게 객체 안 배열에서 전개 연산자를 한 번 더 사용하게 되면 새로운 메모리 공간을 사용하는 배열을 생성하여 원본 배열의 값이 바뀌어도 영향을 받지 않게 됩니다.