JavaScript _ 스프레드 연산자 ...[Array]

 

JavaScript에서는 배열에 새로운 항목을 추가하면서 기존 배열의 내용을 유지하려면 스프레드 연산자(...)를 사용하는 것이 가장 간단하고 직관적입니다. 이 연산자는 배열이나 객체를 복사하거나, 결합하거나, 새로운 배열을 생성하는 데 자주 사용됩니다. 배열 조작 시 불변성(immutability)을 유지하며 새로운 배열을 만들어 작업할 수 있습니다.

 

 

스프레드 연산자(...)란?

스프레드 연산자는 배열이나 객체의 모든 항목 또는 속성을 확장하여 새로운 배열이나 객체를 만드는 문법입니다.

• 배열의 모든 요소를 펼칩니다.
• 새로운 요소를 추가하거나 기존 요소를 조합하여 새로운 배열을 생성할 수 있습니다.

 

배열에 새로운 항목을 추가하기

const originalArray = [1, 2, 3];

// 배열의 시작에 항목 추가
const newArray1 = ["A", ...originalArray];
console.log(newArray1);  // ["A", 1, 2, 3]

// 배열의 중간에 항목 추가
const newArray2 = ["B", "C", ...originalArray.slice(1)];
console.log(newArray2);  // ["B", "C", 2, 3]

// 배열의 끝에 항목 추가
const newArray3 = [...originalArray, "D"];
console.log(newArray3);  // [1, 2, 3, "D"]

 

 

배열을 결합하기

스프레드 연산자를 사용하면 여러 배열을 결합하여 새로운 배열을 만들 수 있습니다.

const array1 = [1, 2];
const array2 = [3, 4];
const combinedArray = [...array1, ...array2];

console.log(combinedArray);  // [1, 2, 3, 4]

 

 

배열의 복사

스프레드 연산자를 사용하면 기존 배열을 복사하여 새로운 배열을 만들 수 있습니다.

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

console.log(copiedArray);  // [1, 2, 3]
console.log(originalArray === copiedArray);  // false (값은 같지만 참조가 다름)

 

 

스프레드 연산자와 불변성

스프레드 연산자를 사용하면 기존 배열을 직접 수정하지 않고 새로운 배열을 생성하므로 불변성을 유지할 수 있습니다.

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

console.log(originalArray);  // [1, 2, 3]
console.log(newArray);       // [1, 2, 3, 4]

 

 

---

 

 

스프레드 연산자(...)는 배열에 새로운 항목을 추가하거나 기존 배열을 복사 및 결합할 때 매우 유용합니다. 특히 React와 같은 프레임워크에서 상태 관리 시 불변성을 유지하는 방법으로 자주 사용됩니다. 이 문법을 활용하면 배열 조작을 간결하고 효율적으로 수행할 수 있습니다.