스프레드 문법과 Rest 파라미터

SMALL

스프레드 문법(Spread syntax)은 JavaScript에서 배열이나 객체 리터럴을 확장하여 여러 요소로 분해하거나 여러 속성으로 분해하는 데 사용됩니다. 이 문법은 ... 세 개의 점으로 표현됩니다. 스프레드 문법은 함수 호출, 배열 리터럴, 객체 리터럴에서 유용하게 사용될 수 있습니다.

함수 호출에서의 스프레드 문법

함수의 인자를 배열로 받고 있을 때, 스프레드 문법을 사용하여 배열의 각 요소를 개별 인자로 전달할 수 있습니다.

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

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

배열 리터럴에서의 스프레드 문법

배열을 합치거나 복사할 때 스프레드 문법을 사용하면 매우 편리합니다.

const fruits = ['apple', 'banana', 'cherry'];
const moreFruits = ['dragonfruit', 'elderberry'];

const combinedFruits = [...fruits, ...moreFruits];
console.log(combinedFruits); // ['apple', 'banana', 'cherry', 'dragonfruit', 'elderberry']

const copiedFruits = [...fruits];
console.log(copiedFruits); // ['apple', 'banana', 'cherry']

객체 리터럴에서의 스프레드 문법

객체의 속성을 다른 객체로 복사하거나 합칠 때 사용할 수 있습니다. 이는 객체를 쉽게 확장하거나 복사할 수 있게 해줍니다.

javascriptCopy code
const user = { name: 'John', age: 30 };
const updatedUser = { ...user, age: 31 }; // 기존 객체를 복사하고, age 속성을 업데이트합니다.
console.log(updatedUser); // { name: 'John', age: 31 }

const userDetails = { ...user, location: 'New York' }; // 기존 객체에 새 속성을 추가합니다.
console.log(userDetails); // { name: 'John', age: 30, location: 'New York' }

주의할 점

스프레드 문법은 얕은 복사(shallow copy)를 수행합니다. 즉, 객체 내부의 중첩된 객체는 참조를 공유하게 됩니다. 따라서 중첩된 객체가 있는 경우, 해당 객체를 수정하면 원본과 복사본 모두에 영향을 미칩니다.

스프레드 문법은 코드를 간결하게 작성할 수 있게 해주며, 배열이나 객체를 더 유연하게 다룰 수 있게 해줍니다. 함수 호출, 배열, 객체 리터럴에서의 사용 예시를 통해 JavaScript에서 스프레드 문법의 다양한 활용 방법을 살펴보았습니다.

Rest 파라미터

Rest 파라미터(Rest parameters)는 스프레드 문법(...)을 사용하여 함수의 인자를 배열로 받는 기능입니다. 스프레드 문법이 배열이나 객체를 개별 요소로 "펼치는" 데 사용되는 것과 대조적으로, Rest 파라미터는 여러 개의 인자를 하나의 배열로 "모으는" 데 사용됩니다. 이 기능은 주로 함수가 받을 인자의 개수가 가변적일 때 유용합니다.

Rest 파라미터의 기본 사용법

함수 정의에서 마지막 파라미터 앞에 **...**를 붙여서 Rest 파라미터를 선언할 수 있습니다. 이렇게 하면 해당 함수는 임의의 수의 인자를 배열로 받을 수 있게 됩니다.

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

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

이 예제에서 sum 함수는 여러 개의 숫자를 인자로 받고, 모든 숫자의 합을 반환합니다. 인자의 개수가 변할 수 있으므로, Rest 파라미터를 사용하여 모든 인자를 numbers 배열로 처리합니다.

Rest 파라미터와 일반 파라미터의 조합

Rest 파라미터는 다른 일반 파라미터와 함께 사용될 수 있습니다. 단, Rest 파라미터는 항상 마지막 파라미터여야 합니다.

function registerUser(name, age, ...languages) {
  console.log(`Name: ${name}, Age: ${age}, Languages: ${languages.join(', ')}`);
}

registerUser('John', 30, 'English', 'French', 'Spanish');
// Name: John, Age: 30, Languages: English, French, Spanish

이 예제에서 registerUser 함수는 이름과 나이를 개별 인자로 받고, 그 뒤에 오는 모든 인자를 languages 배열로 처리합니다.