자바스크립트 filter() 함수의 특징과 활용에 대한 내용

자바스크립트를 개발하다 보면 배열 객체를 다루는 일이 정말 많다. 배열 안의 특정 요소를 필터링하거나 특정 조건에 부합하는 요소만 따로 추출해 처리해야 하는 경우가 많다. 이러한 상황에 적합한 함수가 바로 filter() 함수다. 함수 명 그대로 필터를 시켜주는 기능을 하는데, 배열을 기준으로 특정 조건에 부합하는 요소만 모아서 반환시켜 주는 방식이다.
그렇다면 filter() 함수는 어떤 특징이 있는지, 어떤 상황에 활용되는지 자세히 살펴보도록 하자.

---

filter() 함수의 개념과 특징

filter() 함수는 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 함수가 true를 반환하는 요소로 새로운 배열을 생성해 반환하는 기능이다. 이 함수는 주어진 조건에 따라 배열을 필터링하는 데 유용하게 사용된다.


조건 충족 요소 반환
filter() 함수는 조건을 충족하는 각 요소를 포함하는 새로운 배열을 반환한다. 새로운 배열은 원본 배열의 일부 요소로 구성된다.

원본 배열 변경 없음
filter() 함수는 원본 배열을 변경하지 않고 새 배열을 생성하여 조건에 부합한 결과를 반환한다.

조건 함수
filter() 함수에 전달되는 함수는 각 요소에 대해 호출되며, true 또는 false를 반환하게 된다. true를 반환하면 요소가 결과 배열에 포함되고 false를 반환하면 포함되지 않는다.


위의 정리한 바와 같이 filter() 함수의 특징은 원본 배열을 변경하지 않고 조건 함수에 부합하는 요소만 가져와 새 배열을 생성해 반환한다는 것이 가장 큰 특징이다. 이로 인해 일반 순회 함수와 다른 특징을 가지며, 다양한 상황에서 활용이 좋은 함수다.

---

특정 범위 내의 요소 필터링

// 원본 배열
const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

// 특정 범위의 숫자만을 필터링하는 함수
function filterNumbersInRange(arr, min, max) {
  return arr.filter(function(number) {
    return number >= min && number <= max;
  });
}

// 30 이상 70 이하의 숫자만을 필터링
const filteredNumbers = filterNumbersInRange(numbers, 30, 70);

console.log(filteredNumbers); 
// [30, 40, 50, 60, 70]

위의 코드는 10부터 100까지의 값을 포함한 배열 내에서 특정 범위 내의 요소만 filter() 함수를 활용해 필터링하는 예제 코드다.
범위는 30이상 70 이하에 속하는 요소만 추출하는 조건이고, filter가 적용되면 결괏값은 30, 40, 50, 60, 70만 새 배열에 포함되어 반환된다.
이때, 원본 배열은 유지가 된 상태에서 새 배열을 만들어 반환한다.

위와 같은 예제를 통해 어떠한 데이터 배열 내에서 범위를 지정해 범위에 속한 요소만 추출해 올 수 있도록 활용할 수 있다.

---

특정 부서에 속한 직원 필터링

// 원본 배열
const employees = [
  { id: 1, name: "Alice", department: "Engineering" },
  { id: 2, name: "Bob", department: "HR" },
  { id: 3, name: "Charlie", department: "Engineering" },
  { id: 4, name: "David", department: "Marketing" },
  { id: 5, name: "Eva", department: "Engineering" }
];

// 특정 부서에 속한 직원만 필터링하는 함수
function filterEmployeesByDepartment(arr, department) {
  return arr.filter(function(employee) {
    return employee.department === department;
  });
}

// Engineering 부서에 속한 직원만 필터링
const engineeringEmployees = filterEmployeesByDepartment(employees, "Engineering");

console.log(engineeringEmployees);

위의 코드는 부서 목록에서 filter() 함수를 활용해 특정 부서에 속한 직원만 추출하는 예제 코드다.
원본 배열 내의 요소는 Object 객체 형태로 구성되어 있고, 요소 내의 department를 기준으로 특정 부서를 필터링할 수 있다.
특정 부서로 “Engineering”를 지정하였고, 해당 부서에 속한 직원은 1, 3, 5번 요소에 속한 직원을 새 배열에 추가하여 반환하게 된다.

이와 같이 부서 목록 내에서 특정 조건 (부서, 권한, 나이, 성별 등)에 속한 직원만 추출해야 하는 등 다양하게 활용될 수 있다.

---

제품 목록에서 다중 조건 필터링

// 원본 배열
const products = [
  { id: 1, name: "Laptop", category: "Electronics", price: 1200 },
  { id: 2, name: "Smartphone", category: "Electronics", price: 800 },
  { id: 3, name: "Headphones", category: "Electronics", price: 100 },
  { id: 4, name: "Book", category: "Books", price: 20 },
  { id: 5, name: "Sneakers", category: "Fashion", price: 50 }
];

// 특정 카테고리에 속한 제품들 중에서 특정 가격 이상인 제품들을 필터링하는 함수
function filterProducts(arr, category, minPrice) {
  return arr
    .filter(product => product.category === category)
    .filter(product => product.price >= minPrice);
}

// Electronics 카테고리에서 500달러 이상인 제품들 필터링
const filteredProducts = filterProducts(products, "Electronics", 500);

console.log(filteredProducts);

위의 코드는 제품 목록을 기준으로 다중 조건 필터링하는 예제 코드다. 위의 다른 예제들과 다르게 이 예제는 체이닝 방식으로 코드를 구성하였다.
filter() 함수를 체이닝을 걸어 2중으로 조건을 걸러 최종 결과값을 추출하는 방식인데, 먼저 category가 “Electronics”인 요소를 새 배열에 담아 반환하면 반환된 배열을 기준으로 다시 filter() 함수를 사용해 price가 500 이상인 요소를 최종적으로 반환하게 되는 것이다.

위의 방식대로 처리한다면 코드가 훨씬 간결해지고 확장성이 좋다. 체이닝 방식을 잘 활용한다면 filter()를 연달아 사용하는 방식 외에도 순회 함수나 다른 함수를 적절히 섞어서 효율적으로 결괏값을 추출할 수 있다.

함수 체이닝
함수 체이닝은 여러 함수를 연속적으로 호출하여 하나의 흐름으로 연결하는 프로그래밍 기법이다.
이때, 이전 함수의 반환 값을 다음 함수의 입력값으로 전달하여 연속적으로 작업을 수행하는 방식이다.

 

---

filter() 함수 사용 시 주의사항

filter() 함수를 사용하는 방법과 특징에 대해서 정리해 봤는데, 함수의 기능은 활용도가 높다는 것을 알 수 있었다. 그러나 이러한 활용도 높은 함수라도 정확히 이해하지 않고 사용한다면 잠재적인 오류와 예기치 못한 이슈가 발생할 수 있다. filter() 함수 사용 시 여러 가지 주의사항에 대해서 알아보자.


콜백 함수의 반환 값
콜백 함수는 반드시 true 또는 false를 반환해야 한다. 그렇지 않으면 예기치 못한 결과가 발생할 수 있다.

브라우저 호환성
filter() 함수는 ECMAScript 5에서 도입되었으므로, 모든 브라우저에서 지원되지 않을 수 있다. 그렇기 때문에 해당 함수를 사용하고자 한다면 개발하는 서비스의 권장 브라우저를 확인하는 것이 중요하다.

메모리
큰 배열을 필터링하는 경우 메모리 사용에 주의해야 한다. 필터링은 새로운 배열이 원본 크기보다 훨씬 작더라도 전체 배열을 모두 순회하면서 결과값을 추출하기 때문에 filter() 함수가 적용되는 데이터의 최대 용량을 파악하고 사용하는 것이 좋다.

배열 요소의 타입
필터링하고자 하는 배열의 요소들이 예상한 형태와 일치하는지 확인해야 한다. 모든 요소가 같은 타입이어야 하며, 필터링 조건에 맞는지 확인해야 한다.

---

마무리

자바스크립트의 배열 데이터 필터링에 유용한 filter() 함수에 대해서 정리해 봤다. 현재까지 화면 개발을 하면서 정말 많이 유용하게 사용하고 있는 함수 중 하나다. 원본 데이터를 변경하지 않으면서 필터링된 새 배열을 반환해 주기 때문에 한 화면에서 비즈니스를 처리할 때 정말 유용한 것 같다.
또한, 함수 체이닝을 활용해 기능을 조금 더 유연하게 코드를 작성할 수 있다. 여러 개의 조건을 연결하여 필터링하거나 여러 단계의 데이터 처리를 하나의 흐름으로 연결할 수 있어 코드의 가독성과 유지보수성을 높이는 데 도움이 될 것이다.