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

07 Dec 2023

javascript

이번에는 JavaScript에서 객체의 속성을 기준으로 정렬하고, 필터링하는 방법에 대해 알아보겠습니다. 배열에 저장된 객체들을 특정 속성 값을 기준으로 정렬하고 싶을 때 매우 유용하게 사용할 수 있습니다. 이를 통해 원하는 조건에 맞는 객체들만 선택하여 작업할 수 있습니다.

예시 코드

다음은 예시 코드입니다. 이 코드는 배열에 저장된 객체들을 “age” 속성을 기준으로 내림차순으로 정렬한 후에, “age” 속성 값이 30보다 큰 객체들만 필터링합니다.

const users = [
  { name: 'John', age: 25 },
  { name: 'Adam', age: 30 },
  { name: 'Sarah', age: 28 },
  { name: 'Kate', age: 35 }
];

const filteredUsers = users
  .sort((a, b) => b.age - a.age) // "age" 속성을 내림차순으로 정렬
  .filter(user => user.age > 30); // "age" 속성 값이 30보다 큰 객체만 필터링

console.log(filteredUsers);

실행 결과는 다음과 같습니다.

[
  { name: 'Kate', age: 35 },
  { name: 'Adam', age: 30 }
]

설명

sort() 메소드를 사용하여 배열을 정렬합니다. sort() 메소드는 비교 함수를 인수로 받습니다. 비교 함수는 두 개의 인수를 받아 비교하고, 음수를 반환하면 첫 번째 인수를 앞으로, 양수를 반환하면 두 번째 인수를 앞으로 정렬합니다. 따라서 b.age - a.age와 같은 형태로 사용하면 “age” 속성 값을 기준으로 내림차순으로 정렬할 수 있습니다.
filter() 메소드를 사용하여 배열을 필터링합니다. filter() 메소드는 주어진 함수의 반환 값이 참인 요소들로 이루어진 새로운 배열을 생성합니다. 위 예시 코드에서는 user.age > 30인 객체들만 선택하여 필터링하였습니다.

이와 같은 방식으로 JavaScript에서 객체의 속성 값을 기준으로 정렬하고, 필터링할 수 있습니다.

참고 자료

[Array.prototype.sort() - JavaScript MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
[Array.prototype.filter() - JavaScript MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)