JavaScript ES6 스프레드 연산자로 배열 요소 필터링하기

JavaScript ES6는 개발자들이 코드 작성을 더 간결하고 효율적으로 할 수 있도록 다양한 새로운 기능들을 도입했습니다. 그 중 하나가 스프레드 연산자입니다. 이 강력한 기능은 배열과 객체를 확장하고, 복사하고, 결합하는 데 아주 유용하게 쓰입니다. 이번 글에서는 스프레드 연산자를 사용하여 배열 요소를 필터링하는 다양한 방법에 대해 살펴보겠습니다.

스프레드 연산자 기본 개념

스프레드 연산자는 배열이나 객체와 같은 이터러블(iterable) 객체의 각 요소를 분리하여 함수 인수 또는 다른 배열이나 객체로 확장할 수 있는 문법입니다. 스프레드 연산자는 세 개의 점(...)으로 표현됩니다.

javascript
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [...numbers];
console.log(newNumbers); // [1, 2, 3, 4, 5]

위의 예제에서는 배열 numbers의 모든 요소를 스프레드 연산자를 사용하여 newNumbers 배열로 복사했습니다. 이처럼 스프레드 연산자는 기존 배열이나 객체를 변경하지 않고 새로운 배열이나 객체를 만들 때 유용합니다.

배열 요소를 필터링하는 기본 방법

JavaScript에서는 filter 메서드를 사용하여 배열에서 특정 조건을 만족하는 요소들만 추출할 수 있습니다. filter 메서드는 주어진 함수의 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

위의 예제에서는 짝수인 요소들만 evenNumbers 배열에 저장되었습니다. 그러나 스프레드 연산자를 사용하면 배열 요소를 필터링하는 보다 다양한 방법을 구현할 수 있습니다.

스프레드 연산자를 사용한 배열 요소 필터링

스프레드 연산자는 배열 요소를 선택적으로 필터링하면서 새로운 배열을 쉽게 생성할 수 있게 합니다. 다양한 예제를 통해 구체적으로 알아보겠습니다.

주어진 인덱스의 요소를 제외한 배열 생성

배열에서 특정 인덱스에 위치한 요소를 제외한 새로운 배열을 만들고 싶다면 다음과 같이 스프레드 연산자를 사용할 수 있습니다.

javascript
const numbers = [1, 2, 3, 4, 5];
const indexToRemove = 2; // 3을 제거
const filteredNumbers = [
  ...numbers.slice(0, indexToRemove),
  ...numbers.slice(indexToRemove + 1)
];
console.log(filteredNumbers); // [1, 2, 4, 5]

위 예제에서는 numbers 배열에서 인덱스 2에 위치한 요소(값 3)를 제외한 새로운 배열 filteredNumbers를 생성했습니다. slice 메서드를 사용하여 인덱스 이전과 이후의 요소들을 각각 잘라서 결합했습니다.

중복된 요소 제거

다음 예제에서는 배열에서 중복된 요소를 제거하고 고유한 값들만 남기는 방법을 살펴보겠습니다.

javascript
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

위 예제에서는 Set 객체를 사용하여 중복된 요소를 자동으로 제거한 뒤, 스프레드 연산자를 사용하여 다시 배열로 변환했습니다. 이렇게 하면 배열의 고유한 값들을 쉽고 빠르게 구할 수 있습니다.

특정 조건을 만족하는 요소만 포함된 객체 배열 생성

배열 내부에 있는 객체들의 특정 조건을 만족하는 요소들만 필터링하여 새로운 배열을 만들 수도 있습니다.

javascript
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];
const adults = people.filter(person => person.age >= 21);
console.log(adults);
// [ { name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 } ]

const adultsNewFormat = [...adults.map(person => ({ ...person, adult: true }))];
console.log(adultsNewFormat);
// [ { name: 'Alice', age: 25, adult: true }, { name: 'Charlie', age: 30, adult: true } ]

위 예제에서는 성인인 사람들만 필터링한 배열 adults를 생성한 뒤, 이 배열의 각 객체에 adult 속성을 추가한 배열 adultsNewFormat을 만들었습니다. 이렇게 스프레드 연산자와 map을 결합하여 새로운 포맷으로 배열을 재생성할 수 있습니다.

결론

JavaScript ES6의 스프레드 연산자는 배열과 객체를 다루는 작업을 훨씬 더 쉽고 간결하게 만들어 줍니다. 스프레드 연산자를 사용하면 배열 요소를 선택적으로 필터링하거나, 배열에서 특정 요소를 제거하며, 객체 배열의 포맷을 변경하는 등의 다양한 작업을 효율적으로 수행할 수 있습니다. 이 글이 스프레드 연산자를 활용하는 데 있어 도움이 되었기를 바랍니다.