JavaScript Spread

 

Spread Operator로 객체를 복사할 시, 복사한 객체의 값을 변경해도 원본에는 영향을 주지 않는다.(얕은 복사)

 

 

JavaScript에서 스프레드 문법은 배열이나 객체의 요소를 펼쳐서 전개하는 기능을 제공합니다.

 

스프레드 문법은 주로 배열이나 객체를 복사하거나 합치는 등의 작업에 사용됩니다.

 

배열에서 스프레드 문법을 사용하려면 세 개의 점 (...)을 사용합니다.

 

 

 

 

 

 

다음은 배열을 펼쳐서 복사하는 예시입니다:

 

 

  const array1 = [1, 2, 3];

  const array2 = [...array1];

  console.log(array2); // 출력: [1, 2, 3]

 

위 예시에서 ...array1은 array1 배열의 모든 요소를 펼쳐서 array2에 복사합니다.

 

 

또한, 여러 배열을 합치는 경우에도 스프레드 문법을 사용할 수 있습니다:

 

  const array1 = [1, 2, 3];

  const array2 = [4, 5, 6];

  const combinedArray = [...array1, ...array2];

 

  console.log(combinedArray); // 출력: [1, 2, 3, 4, 5, 6]

 

 

 

객체의 경우 중복된 속성 이름이 있을 때, 나중에 전개된 객체의 속성이 덮어쓰기를 합니다. 다음은 객체를 전개하는 예시입니다:

 

  const obj1 = { name: 'Alice', age: 25 };

  const obj2 = { occupation: 'Engineer', age: 30 };

  const mergedObj = { ...obj1, ...obj2 };

 

  console.log(mergedObj); // 출력: { name: 'Alice', age: 30, occupation: 'Engineer' }

 

 

위 예시에서 mergedObj는 obj1과 obj2의 속성을 모두 포함하며, obj2의 age 속성이 obj1의 age 속성을 덮어썼습니다.

스프레드 문법은 배열과 객체뿐만 아니라 함수 호출 시에도 사용할 수 있습니다. 함수의 인수로 배열이나 객체를 전개하여 전달할 수 있습니다.

 

이렇게 JavaScript의 스프레드 문법은 배열이나 객체를 전개하여 복사하거나 합치는 등의 유용한 작업을 수행할 수 있게 해줍니다.

 

 

 

 

공식문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN