[23] 전개 연산자(Spread Operator)

전개 연산자란?

• 전개 연산자는 배열이나 객체의 내용을 풀어서(spread) 다른 배열이나 객체에 복사하거나 값을 결합할 때 사용됩니다.
• 배열의 요소, 객체의 속성을 쉽게 복사하거나 병합할 수 있는 유용한 문법입니다.
• 전개 연산자는 ... 형태로 작성

 

(1) 배열에서의 전개 연산자

1.1 배열 결합

• 기존 배열을 합칠 때, concat() 대신 전개 연산자를 사용하면 더 간결하게 작성할 수 있습니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

// 기존 방식 (concat 사용)
const arrWrap = arr1.concat(arr2, arr3);
console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 전개 연산자 방식
const arrWrap2 = [...arr1, ...arr2, ...arr3];
console.log(arrWrap2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

결과: 배열의 요소들이 풀려서 합쳐집니다.

 

1.2 배열에 다른 배열 추가

• 기존 배열에 새로운 배열의 요소를 추가하고 싶을 때 push.apply를 사용합니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5];

// 기존 방식 (apply 사용)
Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5]

// 전개 연산자 방식
const arr3 = [1, 2, 3];
arr3.push(...arr2);
console.log(arr3); // [1, 2, 3, 4, 5]

결과: 전개 연산자를 사용하면 코드를 더 간결하게 작성할 수 있습니다.

 

1.3 원본 배열 유지 (불변성)

• 전개 연산자를 사용하면 원본 배열이 변경되지 않고 새 배열을 생성할 수 있습니다.
• 예제에서는 배열을 reverse()로 뒤집을 때, 원본 배열을 유지하는 방식을 보여줍니다.

// 원본 배열이 변경되는 경우
const arr1 = [1, 2, 3];
const arr2 = arr1.reverse();
console.log(arr1); // [3, 2, 1] (원본 변경됨)
console.log(arr2); // [3, 2, 1]

// 전개 연산자로 원본 배열 유지
const arr3 = [1, 2, 3];
const arr4 = [...arr3].reverse();
console.log(arr3); // [1, 2, 3] (원본 유지)
console.log(arr4); // [3, 2, 1]

• 결과: 원본 배열(arr3)이 변경되지 않고 새로운 배열(arr4)이 생성됩니다.

 

---