많은 웹 애플리케이션에서 데이터 필터링 기능은 중요한 부분입니다. 사용자가 원하는 조건에 따라 데이터를 필터링하여 보여주는 것은 매우 일반적인 요구사항입니다. 이 글에서는 자바스크립트를 사용하여 데이터 필터링 기능을 구현하는 방법을 알아보겠습니다.

데이터 구조 설정

우선, 데이터를 필터링하기 위해 적절한 구조로 데이터를 준비해야 합니다. 예를 들어, 다음과 같은 배열 데이터가 있다고 가정해봅시다.

const data = [
  { name: 'Apple', category: 'fruit' },
  { name: 'Banana', category: 'fruit' },
  { name: 'Carrot', category: 'vegetable' },
  // ... 
];

위의 예시에서는 과일과 채소의 카테고리를 가진 객체들의 배열이 있습니다. 이 데이터를 이용하여 필터링 기능을 구현하는 것을 목표로 하겠습니다.

필터링 함수 구현

이제, 사용자의 입력에 따라 데이터를 필터링하는 함수를 구현해 보겠습니다.

function filterData(data, category) {
  return data.filter(item => item.category === category);
}

위의 함수는 주어진 데이터와 카테고리에 따라 필터링된 결과를 반환합니다. 이제 이 함수를 이용하여 실제로 데이터를 필터링해 보겠습니다.

const filteredData = filterData(data, 'fruit');
console.log(filteredData);

위의 코드는 과일 카테고리에 해당하는 데이터만 필터링하여 콘솔에 출력하는 예제입니다.

결과 확인

위의 코드를 실행하면 다음과 같이 과일에 해당하는 데이터만이 출력될 것입니다.

[
  { name: 'Apple', category: 'fruit' },
  { name: 'Banana', category: 'fruit' }
]

마무리

이러한 방식으로, 자바스크립트를 이용하여 데이터 필터링 기능을 간단히 구현할 수 있습니다. 사용자의 입력에 따라 다양한 조건으로 데이터를 필터링하기 위해서는 조금 더 복잡한 로직이 필요할 수 있지만, 기본적인 필터링 기능은 위의 예시처럼 간단하게 구현할 수 있습니다.

참고 자료

• MDN Web Docs - Array.prototype.filter()