JavaScript의 내장 함수 - filter()

JavaScript의 filter 함수는 배열에서 조건을 충족하는 요소들만을 추출하여 새로운 배열을 반환하는 매우 유용한 메서드입니다. 이 함수는 콜백 함수를 통해 각 요소에 대해 평가를 수행하며, 평가 결과가 true인 요소만 최종 배열에 포함됩니다. filter는 원본 배열을 변경하지 않고, 조건에 맞는 요소들로만 이루어진 새로운 배열을 반환한다는 점에서 매우 강력합니다.
이번 글에서는 filter 함수의 동작 원리, 다양한 사용 사례, 그리고 성능상의 고려 사항 등을 중점으로 다뤄보도록 하겠습니다.

1. filter 함수의 기본 사용법

filter 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하며, 이 함수의 반환값이 true인 요소들로 새로운 배열을 생성합니다.

문법

array.filter(callback(element[, index[, array]])[, thisArg])

• callback: 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 세 가지 인수를 받을 수 있습니다:
  • element: 처리할 현재 요소.
  • index (선택적): 처리할 현재 요소의 인덱스.
  • array (선택적): filter가 호출된 배열 자체.
• thisArg (선택적): 콜백 함수 내부에서 this로 사용할 값.

간단한 예시

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

이 예시에서, filter는 num % 2 === 0이라는 조건을 만족하는 짝수만을 추출하여 새로운 배열을 반환합니다.

2. 다양한 사용 예제

이제 기본 사용법을 알아보았으니 다양한 사용 사례를 확인해보도록 하겠습니다.

2.1 객체 배열에서 조건에 맞는 요소 필터링

filter는 객체 배열을 다룰 때도 매우 유용합니다. 예를 들어, 사용자 리스트에서 특정 나이 이상의 사용자들만을 필터링할 수 있습니다.

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 },
];

const adults = users.filter((user) => user.age >= 30);
console.log(adults);
// [{ name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }]

위 예시에서는 user.age >= 30 조건을 만족하는 사용자들만 새로운 배열로 반환됩니다.

2.2 중복 요소 제거

filter 함수는 중복 요소를 제거하는 데에도 사용될 수 있습니다. indexOf와 함께 사용하여 배열 내에서 중복된 값들을 걸러낼 수 있습니다.

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

const uniqueNumbers = numbers.filter(
  (value, index, self) => self.indexOf(value) === index
);

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

위 예제에서 self는 filter 메서드가 호출된 원본 배열을 나타냅니다. 이 예시에서는 self를 사용하여 각 요소가 처음으로 나타나는 위치와 현재 위치(index)를 비교하여 중복된 요소들을 제거합니다.

2.3 빈 값 필터링

배열에서 null, undefined, NaN 등 빈 값을 제거할 때에도 filter를 사용할 수 있습니다.

const mixedArray = [1, null, "hello", undefined, 5, NaN];

const filteredArray = mixedArray.filter(Boolean);
console.log(filteredArray); // [1, 'hello', 5]

Boolean은 입력된 값을 논리값으로 변환하는 함수로, 거짓 같은 값(null, undefined, NaN 등)을 모두 걸러냅니다.

3. filter의 성능 고려 사항

filter 함수는 배열의 각 요소에 대해 한 번씩 순회하면서 조건을 확인합니다. 따라서 매우 큰 배열에 대해서는 성능이 중요한 고려 사항이 될 수 있습니다. 성능을 최적화하기 위해 filter 사용 시 몇 가지 팁을 고려할 수 있습니다.

3.1 콜백 함수의 간결화

filter 함수에 전달되는 콜백 함수는 가능한 한 간결하게 유지하는 것이 좋습니다. 복잡한 논리나 계산을 포함할 경우 성능에 영향을 미칠 수 있습니다. 예를 들어, 불필요한 계산이나 복잡한 비교 연산을 줄여 성능을 개선할 수 있습니다.

// 복잡한 비교 연산
const slowFilter = array.filter((item) => complexCalculation(item));

// 간결한 비교 연산
const fastFilter = array.filter((item) => simpleCondition(item));

3.2 배열의 크기

배열의 크기가 매우 큰 경우, filter를 사용하는 대신 효율적인 데이터 구조를 사용하는 것이 좋을 수 있습니다. 예를 들어, 매우 큰 배열에 대해 필터링을 자주 수행해야 한다면, 초기부터 조건에 맞는 데이터를 선택적으로 저장하는 방식이 성능을 높일 수 있습니다.

4. filter와 다른 배열 메서드와의 비교

filter는 자주 사용되는 배열 메서드 중 하나로, 다른 메서드들과 차이점을 이해하는 것도 중요합니다.

4.1 filter vs map

map은 배열의 각 요소를 변환하여 새로운 배열을 반환하는 반면, filter는 조건을 만족하는 요소들만을 추출하여 새로운 배열을 반환합니다.

// map: 배열 요소를 변환
const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]

// filter: 조건을 만족하는 요소만 반환
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // [2]

4.2 filter vs reduce

reduce는 배열을 순회하면서 누산값을 생성합니다. filter와 달리 새로운 배열을 반환하지 않으며, 배열 요소를 기반으로 하나의 값을 생성할 때 사용됩니다.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

5. 결론

JavaScript의 filter 함수는 조건에 맞는 배열 요소를 손쉽게 필터링할 수 있는 강력한 도구입니다. 다양한 배열 작업에서 필터링은 필수적이며, filter는 이를 간결하고 직관적으로 처리할 수 있는 메서드입니다. 객체 배열, 중복 제거, 빈 값 처리 등 다양한 상황에서 filter는 매우 유용하게 사용될 수 있으며, 성능을 고려하여 적절하게 사용한다면 코드의 가독성과 효율성을 모두 높일 수 있습니다. filter와 다른 배열 메서드들(map, reduce)과의 차이점을 이해하는 것도 중요하며, 상황에 맞게 적절한 메서드를 선택하는 것이 좋습니다.