[Javascript] 스프레드 연산자와 레스트 파라미터 이해하기

자바스크립트의 스프레드 연산자와 레스트 파라미터 이해하기

자바스크립트의 ... 문법은 스프레드 연산자(Spread Operator)와 레스트 파라미터(Rest Parameter)로 사용됩니다. 이는 배열, 객체, 함수의 파라미터 등을 다루는 강력한 도구입니다. ... 문법을 통해 코드의 가독성과 유연성을 크게 향상시킬 수 있습니다.

스프레드 연산자 (Spread Operator)

스프레드 연산자는 배열이나 객체를 펼치는 역할을 합니다. 배열이나 객체의 요소를 개별 요소로 분리하여 사용할 수 있습니다.

배열에서의 사용

배열을 복사하거나, 배열을 결합할 때 유용합니다.

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

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

배열을 복사할 때도 유용합니다.

const original = [1, 2, 3];
const copy = [...original];

console.log(copy); // [1, 2, 3]
console.log(original === copy); // false (서로 다른 배열)

객체에서의 사용

객체를 복사하거나, 객체를 병합할 때도 사용할 수 있습니다.

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

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

객체를 복사할 때 유용합니다.

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

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

함수 호출에서의 사용

함수 호출 시, 배열을 개별 인자로 분리하여 전달할 수 있습니다.

function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(add(...numbers)); // 6

레스트 파라미터 (Rest Parameter)

레스트 파라미터는 함수의 인자 목록에서 나머지 인자들을 배열로 묶어줍니다. 이를 통해 가변 인자 함수를 쉽게 작성할 수 있습니다.

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

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

레스트 파라미터는 항상 마지막 파라미터여야 합니다.

function multiply(multiplier, ...numbers) {
  return numbers.map(num => num * multiplier);
}

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

스프레드 연산자와 레스트 파라미터의 차이점

• 스프레드 연산자: 배열이나 객체를 개별 요소로 분리하여 사용할 때 사용됩니다. 주로 함수 호출, 배열 결합, 객체 병합 등에 사용됩니다.
• 레스트 파라미터: 함수의 인자 목록에서 나머지 인자들을 배열로 묶어 사용할 때 사용됩니다. 가변 인자 함수 작성 시 유용합니다.

활용 예제

배열 결합 및 복사

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

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

const copy = [...arr1];
console.log(copy); // [1, 2]

객체 병합 및 복사

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const combinedObj = { ...obj1, ...obj2 };

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

const copyObj = { ...obj1 };
console.log(copyObj); // { a: 1 }

가변 인자 함수

function logAll(...args) {
  args.forEach(arg => console.log(arg));
}

logAll('Hello', 'World', '!', 1, 2, 3); 
// Hello
// World
// !
// 1
// 2
// 3

결론

자바스크립트의 ... 문법은 스프레드 연산자와 레스트 파라미터로 사용되어 코드의 가독성을 높이고 다양한 상황에서 유연하게 데이터를 다룰 수 있도록 합니다. 배열과 객체를 손쉽게 결합하고 복사할 수 있으며, 함수의 가변 인자를 다루는 데에도 매우 유용합니다. 이러한 기능을 잘 활용하면 더 깔끔하고 효율적인 코드를 작성할 수 있습니다.