[JavaScript] Rest/Spread 연산자 활용

JavaScript에서 ... 연산자는 Rest/Spread 연산자로 불리며, 배열과 객체에서 사용될 수 있습니다. 이 연산자는 코드를 더 간결하고 유지보수하기 쉽게 만들어줍니다. 이번 글에서는 ... 연산자의 사용법과 예제를 살펴보겠습니다.

Rest 파라미터

Rest 파라미터는 함수의 파라미터를 배열로 받을 수 있게 해주는 문법입니다. Rest 파라미터는 ... 연산자로 정의됩니다. 함수에서 마지막 파라미터에 ... 연산자를 사용하면, 그 이전의 모든 파라미터는 배열로 묶여서 해당 파라미터에 전달됩니다.

function sum(a, b, ...rest) {
  let sum = a + b;
  for (let i = 0; i < rest.length; i++) {
    sum += rest[i];
  }
  return sum;
}

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

 

위의 코드에서 sum() 함수는 a와 b 파라미터는 일반적인 방법으로 전달되지만, 그 이후의 파라미터들은 rest 변수에 배열로 묶여 전달됩니다. sum() 함수는 이후의 파라미터들을 모두 더한 값을 반환합니다.

Spread 문법

Spread 문법은 배열이나 객체의 요소를 복사해서 다른 배열이나 객체에 붙여넣을 수 있도록 합니다. Spread 연산자는 ...으로 표현되며, 배열이나 객체를 확장하는 데 사용됩니다.

배열에서의 Spread

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

const allNumbers = [...numbers, ...moreNumbers];

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

위의 코드에서 numbers 배열과 moreNumbers 배열을 Spread 연산자로 전달하여 새로운 배열 allNumbers를 생성합니다.

객체에서의 Spread

const person = { name: "Alice", age: 30 };
const newPerson = { ...person, email: "alice@example.com" };

console.log(newPerson); // { name: 'Alice', age: 30, email: 'alice@example.com' }

위의 코드에서는 person 객체를 Spread 연산자로 전달하여 email 프로퍼티를 추가한 newPerson 객체를 생성합니다.

결론

Rest/Spread 연산자는 JavaScript 코드를 더 간결하고 가독성 좋게 만들어줍니다. Rest 파라미터를 사용하면 함수의 파라미터를 배열로 받아서 코드를 간단하게 작성할 수 있습니다. Spread 문법은 배열이나 객체를 확장할 때 유용하며, 객체의 복사본을 생성할 때도 사용할 수 있습니다. 이러한 문법을 사용하면 코드를 더욱 효율적이고 유지보수하기 쉽게 작성할 수 있습니다.

다음은 Rest/Spread 연산자를 사용한 예시 코드입니다.

// Rest 파라미터를 사용한 함수
function calculateTotal(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr);
}

console.log(calculateTotal(1, 2, 3)); // 6

// Spread 연산자를 사용한 배열 확장
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];

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

// Spread 연산자를 사용한 객체 확장
const person = { name: "Alice", age: 30 };
const newPerson = { ...person, email: "alice@example.com" };

console.log(newPerson); // { name: 'Alice', age: 30, email: 'alice@example.com' }

Rest/Spread 연산자는 ES6부터 도입된 문법으로, 지원하는 브라우저가 한정적일 수 있습니다. 따라서 ES6 이전 버전의 JavaScript를 사용해야 할 경우에는 다른 방식으로 코드를 작성해야 합니다.

하지만, 대부분의 최신 브라우저에서는 Rest/Spread 연산자를 지원하므로, 이러한 문법을 적극적으로 활용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.

 

본 글은 ChatGPT로 작성되었습니다.