자바스크립트는 웹 개발의 핵심 언어로서, 다양한 기능과 기능을 통해 데이터를 처리하고 조작하는 데 사용됩니다. 이 중 데이터 필터링과 정렬 기능은 매우 중요하며, 사용자가 원하는 방식으로 데이터를 선택하고 정리할 수 있게 해줍니다.

이번 글에서는 자바스크립트를 사용하여 데이터를 필터링하고 정렬하는 데 쓰이는 몇 가지 기능과 예제를 살펴보겠습니다.

1. 데이터 필터링

데이터 필터링은 주어진 기준에 따라 데이터를 선택하는 과정을 의미합니다. 자바스크립트를 사용하면 배열이나 객체에 대해 다양한 필터링 기능을 적용할 수 있습니다.

1.1. 배열 필터링

자바스크립트의 배열 메서드 filter()를 사용하여 조건에 맞는 요소들로 이루어진 새로운 배열을 생성할 수 있습니다. 예를 들어, 배열에서 특정 조건을 만족하는 숫자들만 선택할 수 있습니다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filteredNumbers = numbers.filter(num => num % 2 === 0);

console.log(filteredNumbers); // [2, 4, 6, 8, 10]

위의 예제에서는 filter() 메서드를 사용하여 numbers 배열에서 짝수만 선택하고, filteredNumbers 배열에 저장합니다.

1.2. 객체 필터링

객체의 속성을 기준으로 필터링하는 경우에는 filter() 메서드 대신 Object.entries()를 사용할 수 있습니다. 예를 들어, 특정 조건을 만족하는 학생들만 선택할 수 있습니다.

const students = {
  1: { name: "John", age: 20, grade: "A" },
  2: { name: "Jane", age: 22, grade: "B" },
  3: { name: "Tom", age: 19, grade: "A" },
  4: { name: "Emma", age: 21, grade: "C" },
};

const filteredStudents = Object.entries(students).filter(([id, info]) => info.grade === "A");

console.log(filteredStudents);
/*
[
  [1, { name: "John", age: 20, grade: "A" }],
  [3, { name: "Tom", age: 19, grade: "A" }]
]
*/

위의 예제에서는 students 객체에서 grade가 “A”인 학생들만 선택하여 filteredStudents 배열에 저장합니다. Object.entries() 메서드는 객체를 배열로 변환하는데, 이를 활용하여 객체 속성을 기준으로 필터링할 수 있습니다.

2. 데이터 정렬

데이터 정렬은 주어진 기준에 따라 데이터를 순서대로 나열하는 과정을 의미합니다. 자바스크립트를 사용하면 배열을 정렬하는 다양한 방법을 적용할 수 있습니다.

2.1. 숫자 배열 정렬

숫자 배열을 오름차순이나 내림차순으로 정렬하기 위해서는 sort() 메서드를 사용합니다.

const numbers = [5, 2, 9, 1, 8, 3, 7, 6, 10, 4];

const ascendingNumbers = numbers.sort((a, b) => a - b);
console.log(ascendingNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const descendingNumbers = numbers.sort((a, b) => b - a);
console.log(descendingNumbers); // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

위의 예제에서는 sort() 메서드를 사용하여 numbers 배열을 오름차순과 내림차순으로 정렬한 후, 각각 ascendingNumbers와 descendingNumbers 배열에 저장합니다.

2.2. 객체 배열 정렬

객체 배열을 특정 속성 기준으로 정렬하는 경우에는 sort() 메서드와 비교 함수를 활용합니다. 예를 들어, 학생들을 나이 순으로 정렬할 수 있습니다.

const students = [
  { name: "John", age: 20, grade: "A" },
  { name: "Jane", age: 22, grade: "B" },
  { name: "Tom", age: 19, grade: "A" },
  { name: "Emma", age: 21, grade: "C" },
];

students.sort((a, b) => a.age - b.age);

console.log(students);
/*
[
  { name: "Tom", age: 19, grade: "A" },
  { name: "John", age: 20, grade: "A" },
  { name: "Emma", age: 21, grade: "C" },
  { name: "Jane", age: 22, grade: "B" }
]
*/

위의 예제에서는 students 배열을 나이 순으로 정렬합니다. sort() 메서드의 비교 함수를 활용하여 a.age - b.age의 결과가 음수이면 a를 먼저, 양수이면 b를 먼저 나열하게 됩니다.

이와 같이 자바스크립트를 사용하여 데이터를 필터링하고 정렬하는 기능을 구현할 수 있습니다. 데이터 처리에는 많은 다른 메서드와 기능들이 존재하며, 프로젝트에 맞게 조합하여 사용하면 보다 효율적인 개발이 가능합니다.