[javascript] 객체의 속성 값을 기준으로 객체 필터링하기

07 Dec 2023

javascript

자바스크립트에서는 객체의 속성 값을 기준으로 다양한 방법으로 객체를 필터링할 수 있습니다. 이번 포스트에서는 객체의 속성 값을 기준으로 객체를 필터링하는 방법을 알아보겠습니다.

1. filter 메소드 사용

자바스크립트의 Array 객체는 filter 메소드를 제공하여 배열의 요소를 필터링할 수 있습니다. 이를 이용하면 객체의 속성 값을 기준으로 객체를 필터링할 수 있습니다.

아래는 filter 메소드를 사용하여 객체 배열에서 특정 속성 값을 가진 객체들만 필터링하는 예제입니다.

const objects = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' },
  { name: 'orange', color: 'orange' }
];

const filteredObjects = objects.filter(obj => obj.color === 'red');

console.log(filteredObjects); // [{ name: 'apple', color: 'red' }]

위 예제에서는 objects 배열에서 color 속성 값이 'red'인 객체들만 필터링하여 filteredObjects 배열에 담고 있습니다.

2. reduce 메소드 사용

reduce 메소드를 사용하면 배열의 각 요소를 하나의 값으로 축약할 수 있습니다. 객체를 필터링하기 위해서는 reduce 메소드를 사용하여 조건에 해당하는 객체만 배열에 추가해주면 됩니다.

아래는 reduce 메소드를 사용하여 객체를 필터링하는 예제입니다.

const objects = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' },
  { name: 'orange', color: 'orange' }
];

const filteredObjects = objects.reduce((filtered, obj) => {
  if (obj.color === 'yellow') {
    filtered.push(obj);
  }
  return filtered;
}, []);

console.log(filteredObjects); // [{ name: 'banana', color: 'yellow' }]

위 예제에서는 objects 배열에서 color 속성 값이 'yellow'인 객체들만 필터링하여 filteredObjects 배열에 담고 있습니다.

결론

자바스크립트에서 객체의 속성 값을 기준으로 객체를 필터링하는 방법을 알아보았습니다. filter 메소드나 reduce 메소드를 사용하여 손쉽게 객체를 필터링할 수 있습니다.

더 자세한 내용은 아래 참고 자료를 확인해주세요.