[JS] 전개 구문(spread syntax)

전개 구문 (spread syntax)

...obj

 

: 반복 가능한 배열(array)이나 객체(object)의 요소들을 개별적으로 펼치는 데 사용

• 함수 호출, 배열 리터럴 등에 사용
• 배열, 객체 등을 합칠 때도 사용

let first = [1, 2, 3];
let second = [4, 5, 6];

console.log([...first, ...second]); // [1, 2, 3, 4, 5, 6]

 

 

 

 

✨ Rest 매개변수

: 함수에 전달된 나머지 인수를 배열로 수집하는 기능

• 함수 정의에서 사용

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

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

 

 

---

 

📌 배열

 

배열 병합

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

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

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

 

 

 

배열 복사

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // Output: [1, 2, 3]
console.log(originalArray === copiedArray); // Output: false (두 배열은 서로 다른 객체!!!)

 

 

 

배열 요소 추가

const array = [1, 2, 3];
const newArray = [0, ...array, 4];

console.log(newArray); // Output: [0, 1, 2, 3, 4]

 

 

 

예제 1) 배열 병합

function combineArray() {
  const numberList = [2, -2, 1];
  const countList = [101, 201, 301];


  // 두 배열의 병합
  const nList = numberList.concat(countList);
  
  console.log(nList); // Array(6) [ 2, -2, 1, 101, 201, 301 ]


  // [2, -2, 101, 201, 1] 같은 결과값을 원한다면?
  const myResult = numberList
    .slice(0, 2)
    .concat(countList.slice(0, 2).concat(numberList.at(-1)));
    
  console.log(myResult); // [2, -2, 101, 201, 1]


  // 전개 구문 사용 X
  const combineList = countList
    .slice(0, 2) // [101, 201]
    .concat(numberList) // [2, -2, 1] => [101, 201, 2, -2, 1]
    .concat(countList.slice(2)); // [301 => ][101, 201, 2, -2, 1, 301]
    
  console.log(combineList); // Array(6) [ 101, 201, 2, -2, 1, 301 ]


  // 전개 구문 사용 O
  const spreadCombineList = [
    ...countList.slice(0, 2),
    ...numberList,
    countList.at(-1)
  ];
  
  console.log(spreadCombineList); // Array(6) [ 101, 201, 2, -2, 1, 301 ]
}

 

 

---

📌 객체

 

객체 병합

1) spread syntax

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

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

console.log(mergedObj); // Output: { a: 1, b: 2, c: 3, d: 4 }

 

 

2) Object.assign()

• 원본 보호⭕

Object.assign(target, ...sources);

- target: 속성을 복사받을 대상 객체
- sources: 속성을 복사할 소스 객체들

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { d: 5 };

const target = Object.assign({}, obj1, obj2, obj3);
// 빈 {객체}를 만들고 거기에 obj1, obj2, obj3를 병합
// 겹치는 키는 최근 키로 덮어씌워짐

console.log(target); // { a: 1, b: 3, c: 4, d: 5 }

 

 

 

객체 복사

1) spread syntax

const originalObj = { a: 1, b: 2 };
const copiedObj = { ...originalObj };

console.log(copiedObj); // Output: { a: 1, b: 2 }
console.log(originalObj === copiedObj); // Output: false (두 객체는 서로 다른 객체!!!)

 

 

2) Object.assign()

• 원본 보호⭕

const original = { a: 1, b: { c: 2 } };

const copy = Object.assign({}, original);
// 빈 {객체}에 original를 복사

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

 

 

 

객체 요소 추가

const obj = { a: 1, b: 2 };
const updatedObj = { ...obj, b: 3, c: 4 };

console.log(updatedObj); // Output: { a: 1, b: 3, c: 4 }

 

 

 

예제 1) 객체 병합

function combineObject() {

  // 개발자가 작성한 기본 옵션
  const defaultOptions = {
    startIndex: 0,
    loop: false,
  };

  // 사용자가 작성한 커스텀 옵션
  const customOptions = {
    loop: true,
  };


  // Object.assign() - 원본 보호
  const combineOptions = Object.assign({}, defaultOptions, customOptions);
  console.log(combineOptions); // { startIndex: 0, loop: true }
  console.log(defaultOptions); // { startIndex: 0, loop: false }


  // 전개 구문 사용 O
  const spreadCombineOptions = {
    ...defaultOptions,
    ...combineOptions
  };

  console.log(spreadCombineOptions); // { startIndex: 0, loop: true }
}

 

 

---

📌 함수 

 

함수 호출

• 배열 요소를 개별 인수로 전달

function sum(x, y, z) {
    return x + y + z;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);

console.log(result); // Output: 6

 

 

---

 

전개 구문 - JavaScript | MDN

 

나머지 매개변수와 전개 구문

 

Object.assign() - JavaScript | MDN