[JavaScript] Spread Operator 및 Rest Parameter(...) 개념 및 사용방법

Spread Operator는 배열이나 객체의 요소를 하나씩 분리하여 해당 요소들을 필요한 곳에 전개할 수 있게 해준다. 반면, Rest Parameter는 함수에 전달된 인수들을 배열로 조합해주어, 가변적인 수의 인수를 함수 내에서 쉽게 처리할 수 있도록 돕는다. 이 두 기능은 비슷해 보일 수 있지만, 사용 목적과 방식에서 차이를 보인다.

1. Spread Operator

Spread Operator(전개 연산자)는 배열이나 객체의 요소를 개별 요소로 확장할 수 있게 해준다. 문법적으로는 세 개의 점(...)으로 표시된다. 이 연산자의 가장 큰 장점은 배열이나 객체를 다룰 때 코드의 양을 줄이고, 가독성을 높여준다는 것이다. 기본적으로 Spread Operator는 함수 호출, 배열 리터럴, 객체 리터럴의 문맥에서 사용할 수 있다.

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

위 예제에서 볼 수 있듯이, numbers 배열의 모든 요소가 moreNumbers 배열로 복사되며, 추가적인 요소들이 더해진다. 이처럼 Spread Operator를 사용하면 기존의 데이터를 쉽게 확장하거나 복사할 수 있다.

Spread Operator 활용

￭ 배열 복사 및 병합

Spread Operator는 배열을 간단히 복사하거나 병합할 때 유용하게 사용된다. 예를 들어, 아래와 같이 두 배열을 병합하는 경우가 있다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
const combinedArr = [...arr1, ...arr2]; // ['a','b','c','d','e','f']

또한, 배열을 복사할 때도 Spread Operator를 사용하여 쉽게 할 수 있다.

const original = [1, 2, 3];
const copy = [...original]; // [1, 2, 3]의 복사본

￭ 객체 복사 및 속성 확장

객체에 대해서도 Spread Operator를 사용할 수 있다. 객체의 속성을 복사하거나, 새로운 속성을 추가할 때 매우 유용하다.

const person = { name: 'John', age: 30 };
const updatedPerson = { ...person, job: 'Developer' };
//{name: 'John', age: 30, job: 'Developer'}

이 예에서는 기존 person 객체에 job 속성을 추가하여 새로운 객체를 생성하고 있다.

￭ 함수 인수로의 사용

함수에 여러 인자를 전달할 때 Spread Operator를 사용하면 배열의 각 요소를 개별 인자로 전달할 수 있다. 이는 특히 다양한 수의 인수를 받아야 하는 함수에서 유용하다.

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

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

위 예제는 numbers 배열의 각 요소를 sum 함수의 인수로 전달한다.

2. Rest Parameter

Rest Parameter는 함수에 전달된 인수들을 배열로 처리할 수 있게 해주는 기능이다. 함수가 정해지지 않은 수의 인수를 받아야 할 때 매우 유용하다. 간단히 말하면, 함수의 매개변수로 사용되며, 전달받은 인수들을 배열로 묶어준다.

function showColors(...colors) {
  console.log(colors);
}

showColors("red", "green", "blue"); //["red","green","blue"]를 출력한다.

위 코드에서 showColors 함수는 여러 색상 이름을 인수로 받아 배열로 출력한다. 여기서 ...colors는 전달받은 모든 색상 이름들을 colors 배열에 담아 처리한다.

Rest Parameter 활용

￭ 가변 인자 함수의 구현

Rest Parameter를 사용하면, 다양한 수의 인수를 받는 함수를 쉽게 구현할 수 있다. 예를 들어, 여러 숫자를 입력받아 그 합을 계산하는 함수는 다음과 같이 작성할 수 있다.

function sumNumbers(...numbers) {
  let total = 0;
  for(let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sumNumbers(1, 2, 3, 4)); // 10을 출력한다.

이 함수는 전달받은 모든 숫자의 합을 계산하여 반환한다. ...numbers는 전달받은 숫자들을 배열로 만들어 numbers에 저장한다.

￭ 함수 내에서 인수 객체의 대체

Rest Parameter를 사용하면 함수에 전달된 인수들을 배열로 다룰 수 있다. 이 기능을 활용함으로써, 함수 내에서 인수들을 더욱 효율적으로 처리할 수 있다.

function logArguments(...args) {
  console.log(args); // 진짜 배열로 출력된다.
}

logArguments("interesting", "JavaScript"); // ["interesting", "JavaScript"]를 출력한다.

이 코드에서 ...args는 함수로 전달된 모든 인수를 하나의 배열 args로 모은다. 그 결과, args 배열에 대해 console.log를 호출하면 함수에 전달된 모든 인수들이 배열 형태로 출력된다. 이러한 방식으로, Rest Parameter를 사용하면 어떤 배열 메서드든지 args에 직접 적용할 수 있게 된다.

끄적끄적

이 블로그 검색