JavaScript에서 객체 배열을 속성 값 기준으로 필터링하는 방법

JavaScript를 다룰 때 객체로 이루어진 배열에서 특정 키워드가 포함된 항목만 골라내야 하는 경우가 자주 있습니다. 이번 글에서는 검색어와 일치하는 속성 값을 가진 객체만 추출하는 방법을 알아보겠습니다.

문제 상황

다음과 같이 이름(name)과 국가(country) 정보를 담은 객체 배열이 있다고 가정해 보겠습니다.

const arr = [{
    name: 'Paul',
    country: 'Canada',
}, {
    name: 'Lea',
    country: 'Italy',
}, {
    name: 'John',
    country: 'Italy',
}];

여기서 우리가 원하는 것은 문자열 키워드를 기준으로 이 배열을 필터링하는 것입니다. 중요한 점은 검색 대상이 특정 속성에 국한되지 않고, 객체가 가진 모든 속성을 대상으로 해야 한다는 것입니다.

기대 동작

'lea'를 입력하면 → 모든 객체의 모든 속성을 순회하여 'lea'가 포함된 객체(예: name이 'Lea'인 객체)를 반환합니다.
'italy'를 입력하면 → 마찬가지로 전체 속성을 검사하여 'Italy'를 값으로 가진 객체들을 반환합니다.

해결 방법: filter()와 정규식 활용

배열의 filter() 메서드와 대소문자를 구분하지 않는 정규식(RegExp)을 조합하면 간단하게 구현할 수 있습니다.

const arr = [{
      name: 'Paul',
      country: 'Canada',
   }, {
      name: 'Lea',
      country: 'Italy',
   }, {
      name: 'John',
      country: 'Italy',
}];

const filterByValue = (arr = [], query = '') => {
   const reg = new RegExp(query, 'i'); // 'i' 플래그로 대소문자 무시
   return arr.filter((item) => {
      let flag = false;
      for (prop in item) {
         if (reg.test(item[prop])) {
            flag = true;
         }
      }
      return flag;
   });
};

console.log(filterByValue(arr, 'ita'));

코드 설명

정규식 생성: new RegExp(query, 'i')는 입력된 검색어로 정규식을 만들며, 두 번째 인자 'i' 덕분에 대소문자를 구분하지 않습니다. 따라서 'ita'로 검색해도 'Italy'와 매칭됩니다.
객체 순회: for...in 루프를 사용해 각 객체의 모든 속성 값을 하나씩 확인합니다.
매칭 여부 판단: reg.test()로 속성 값에 검색어가 포함되어 있는지 검사하고, 하나라도 일치하면 해당 객체를 결과에 포함시킵니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

[
   { name: 'Lea', country: 'Italy' },
   { name: 'John', country: 'Italy' }
]

'ita'라는 검색어가 국가 속성인 'Italy'와 일치했기 때문에, Lea와 John의 객체 두 개가 반환된 것을 확인할 수 있습니다.

마무리

이처럼 filter(), for...in, 그리고 RegExp를 조합하면 객체 배열의 어떤 속성이든 유연하게 검색할 수 있습니다. 실무에서는 검색 기능, 목록 필터링 등 다양한 상황에서 활용할 수 있는 유용한 패턴이니 꼭 익혀두시길 바랍니다.