JavaScript에서 여러 조건 필터링

JavaScript의 filter() 메서드에서 각 항목이 모든 조건을 만족할 때만 true를 반환하는 조건식을 사용하세요. 실행 중에 조건이 정해진다면 요청된 속성-값 쌍을 하나씩 비교하고, 조건이 미리 정해져 있다면 비교식을 &&로 연결하면 됩니다. 두 경우 모두 filter()는 조건에 맞는 항목을 담은 새 배열을 반환합니다.

JavaScript에서 여러 조건 필터링

filter() 메서드는 인덱스에 값이 할당된 배열 요소마다 콜백을 호출하고, 콜백 결과가 참으로 평가되는 요소를 남깁니다. 요소를 true나 false로 바꾸지는 않으며 원본 배열도 변경하지 않습니다. 콜백에는 현재 요소, 인덱스, 배열이 전달되지만 대부분의 조건식에는 요소만 있으면 충분합니다. 반환 배열은 새 배열이지만, 그 안의 객체는 원본 배열에 있던 객체와 같은 참조입니다.

filter(callbackFn)

여기서 callbackFn은 각 요소를 검사해 참 또는 거짓으로 평가되는 값을 반환하는 조건식입니다. 조건에 맞는 요소가 없으면 빈 배열이 반환됩니다. 값이 할당되지 않은 인덱스에는 콜백이 호출되지 않으므로 희소 배열의 빈 슬롯은 건너뜁니다. 콜백의 전체 서명과 동작은 MDN의 filter() 문서에서 확인할 수 있습니다.

전통적인 방법 사용

조건 집합이 폼이나 다른 데이터 원본에서 제공된다면 객체에 조건을 저장한 다음 각 항목이 그 조건을 만족하는지 검사할 수 있습니다. 아래 예제는 요청된 각 키가 사용자 객체 자체의 속성이고 값도 정확히 일치해야 통과합니다. 두 조건인 이름과 주소가 모두 맞는 Aleena가 결과에 포함됩니다.

const criteria = {
  address: 'India',
  name: 'Aleena'
};
const users = [
  {name: 'John Doe', email: 'johndoe@mail.com', age: 25, address: 'USA'},
  {name: 'Aleena', email: 'aleena@mail.com', age: 35, address: 'India'},
  {name: 'Mark Smith', email: 'marksmith@mail.com', age: 28, address: 'England'}
];

const filteredUsers = users.filter((user) => {
  return Object.entries(criteria).every(([key, value]) =>
    Object.prototype.hasOwnProperty.call(user, key) && user[key] === value
  );
});

console.log(filteredUsers);

[
  {
    name: 'Aleena',
    email: 'aleena@mail.com',
    age: 35,
    address: 'India'
  }
]

Object.entries(criteria)는 속성-값 쌍을 제공하고, every()는 모든 쌍이 조건을 통과해야 true를 반환합니다. 엄격한 동등 비교 연산자(===)는 값뿐 아니라 타입도 일치해야 한다는 뜻입니다. 속성이 없으면 요청된 값과 일치하지 않습니다. 조건 객체가 비어 있으면 every()는 각 사용자에 대해 true를 반환하므로 모든 사용자가 결과에 포함됩니다. 이 방식은 필드마다 별도의 비교식을 추가하지 않아도 조건 키 집합에 맞춰 동작합니다.

자체 속성인지 확인하므로 객체의 프로토타입에서 상속된 속성은 요청된 키의 일치로 처리되지 않습니다. 중첩된 데이터는 중첩 값을 직접 비교하거나 해당 필드에 맞는 조건 함수를 제공하세요. 이 예제는 최상위 값만 비교합니다.

filter() 메서드 사용

조건이 미리 정해져 있다면 조건식을 직접 작성하고 논리 AND 연산자(&&)로 연결하세요. 사용자를 결과에 남기려면 각 비교가 모두 true여야 합니다. 아래 예제는 필요한 데이터를 모두 포함하며, 동적 조건 예제와 같은 사용자 한 명을 찾습니다.

const filter = {
  address: 'India',
  name: 'Aleena'
};
const users = [
  {name: 'John Doe', email: 'johndoe@mail.com', age: 25, address: 'USA'},
  {name: 'Aleena', email: 'aleena@mail.com', age: 35, address: 'India'},
  {name: 'Mark Smith', email: 'marksmith@mail.com', age: 28, address: 'England'}
];

const filteredUsers = users.filter(
  (user) => user.name === filter.name && user.address === filter.address
);

console.log(filteredUsers);

[
  {
    name: 'Aleena',
    email: 'aleena@mail.com',
    age: 35,
    address: 'India'
  }
]

필드와 비교 방식이 프로그램의 로직에 고정되어 있다면 이처럼 직접 조건을 작성하세요. 요청되는 필드가 달라질 수 있다면 동적 조건 방식을 사용하면 됩니다. 원본 JSFiddle 데모도 확인할 수 있습니다.

조건식은 항목을 결과에 포함할지 결정하는 데 집중하세요. 남길 항목에는 참으로 평가되는 값을, 제외할 항목에는 거짓으로 평가되는 값을 반환하면 됩니다. &&는 단락 평가를 하므로 앞선 비교가 통과해야 뒤의 비교가 실행됩니다. 의미를 명확하게 유지하면서, 적은 비용으로 많은 항목을 제외할 수 있는 비교를 앞에 두면 됩니다.