자바스크립트의 스프레드 연산자 (...)는 배열, 객체, 함수 호출 등의 여러 상황에서 값을 확장하거나 펼치는 데 사용되는 유용한 문법입니다. 스프레드 연산자는 ES6(ECMAScript 2015)에서 도입되었습니다.
배열에서의 스프레드 연산자
스프레드 연산자는 배열의 요소를 개별 요소로 분리하여 사용할 수 있습니다.
배열 복사
기존 배열을 쉽게 복사할 수 있습니다.
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]배열 결합
여러 배열을 하나의 배열로 결합할 수 있습니다.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]배열에서의 스프레드 연산자 활용 예제
const numbers = [1, 2, 3, 4, 5];
const maxNumber = Math.max(...numbers);
console.log(maxNumber); // 5객체에서의 스프레드 연산자
객체에서도 스프레드 연산자를 사용하여 객체의 속성을 확장하거나 복사할 수 있습니다. 이 기능은 ES2018(ES9)에서 도입되었습니다.
객체 복사
기존 객체를 쉽게 복사할 수 있습니다.
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // { a: 1, b: 2 }객체 결합
여러 객체를 하나의 객체로 결합할 수 있습니다.
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const combinedObject = { ...object1, ...object2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }객체에서의 스프레드 연산자 활용 예제
const defaultSettings = {
volume: 50,
brightness: 70,
};
const userSettings = {
volume: 80,
};
const settings = { ...defaultSettings, ...userSettings };
console.log(settings); // { volume: 80, brightness: 70 }함수 호출에서의 스프레드 연산자
스프레드 연산자를 사용하여 배열을 함수의 인수로 쉽게 전달할 수 있습니다.
배열을 인수로 전달
const numbers = [1, 2, 3, 4, 5];
function sum(a, b, c, d, e) {
return a + b + c + d + e;
}
const result = sum(...numbers);
console.log(result); // 15스프레드 연산자와 나머지 매개변수의 차이
스프레드 연산자는 배열을 개별 요소로 분리하는 반면, 나머지 매개변수는 여러 개의 인수를 배열로 모읍니다.
나머지 매개변수 예제
function sum(...args) {
return args.reduce((acc, curr) => acc + curr, 0);
}
const result = sum(1, 2, 3, 4, 5);
console.log(result); // 15결론
스프레드 연산자는 배열과 객체의 요소를 쉽게 확장하고 결합하는 강력한 도구입니다. 배열의 복사와 결합, 객체의 복사와 결합, 함수 호출 시 인수 확장 등 다양한 상황에서 유용하게 사용할 수 있습니다. 스프레드 연산자를 사용하면 코드의 가독성과 유지보수성이 향상됩니다.