자바스크립트 - 얕은 복사, 깊은 복사 (전개 연산자 ...)

자바스크립트를 공부하다가 등장한 ...

과연 이게 무슨 뜻인지 이해가 되지 않아 찾아보았다.

아래는 전반적인 전개 연산자 설명이고, 지금 당장 나한테 필요한 부분에 대해서 먼저 포스팅하겠다.

 

결론 : 전개 연사자는 깊은 복사에 가깝다. (가까운 이유는 아래 설명) (별도의 메모리 공간을 가진 배열 생성, 값을 바꿔도 원래 그대로,)

const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = { ...originalObject };

copiedObject.a = 3;

console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(copiedObject);   // { a: 3, b: { c: 2 } }


copiedObject.b.c = 55;

console.log(originalObject); // { a: 1, b: { c: 55 } }
console.log(copiedObject);   // { a: 3, b: { c: 55 } }
// 두 단계를 거치면, 깊은 복사가 일어나지 않음

 

하지만 전개연산자를 활용하여도 두단계 이상의 depth부터는 깊은복사가 이루어지지 않는다..!

 

 

두 단계 이상의 깊은 복사하는 법,

자바스크립트에서 깊은 복사를 수행하는 방법 중 하나는 JSON.stringify()와 JSON.parse()를 사용하면 된다.

• 기타 다른 방법들도 있으나 여기서는 JSON.stringfy()와 JSON.parse()만 설명
• 그외 다른 방법
  • lodash의 clone deep
  • Object.assign() 이용

const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = JSON.parse(JSON.stringify(originalObject));

copiedObject.b.c = 3;

console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(copiedObject);   // { a: 1, b: { c: 3 } }

 

---

 

 

자바스크립트의 전개 연산자(...)는 배열, 객체, 함수 인자 등 여러 곳에서 사용되는 유용한 기능입니다. 이 연산자를 사용하면 데이터를 확장하거나 분해할 수 있으며, 코드를 간결하게 작성하고 가독성을 높일 수 있습니다. 전개 연산자는 ES6(ECMAScript 2015)에서 도입되었습니다.



1. 배열 확장 (Array Spreading):
배열의 요소를 다른 배열에 포함시키거나 배열을 복제할 때 사용됩니다.

 

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // arr1의 요소를 포함한 새로운 배열 생성
console.log(arr2); // [1, 2, 3, 4, 5]

2. 함수 인자 (Function Arguments):

함수 호출 시 전달된 인자를 배열로 다룰 때 사용됩니다. 함수 내에서 arguments 객체 대신 사용할 수 있습니다.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

 

3.객체 확장 (Object Spreading):

객체의 속성을 다른 객체에 복사하거나, 새로운 속성을 추가할 때 사용됩니다.

const person = { name: 'Alice', age: 30 };
const extendedPerson = { ...person, city: 'New York' };
console.log(extendedPerson);
// { name: 'Alice', age: 30, city: 'New York' }

4. 배열 분해 (Array Destructuring):
배열을 개별 변수로 분해할 때 사용됩니다.

 

const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first, second, third); // 1 2 3

 

5.함수 인자 분해 (Function Argument Destructuring):

function printPerson({ name, age }) {
  console.log(`이름: ${name}, 나이: ${age}`);
}

const person = { name: 'Bob', age: 25 };
printPerson(person); // 이름: Bob, 나이: 25

함수의 인자로 전달된 객체를 분해하여 개별 변수로 사용할 때 사용됩니다.

전개 연산자는 코드를 간결하게 만들고, 데이터 조작을 더 쉽게 하며, 반복적인 코드를 줄이는 데 도움을 줍니다. 이를 잘 활용하면 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.