배열은 자바스크립트에서 가장 기본적인 데이터 구조 중 하나입니다. 때로는 배열의 요소를 특정 기준으로 그룹화하고, 그룹화된 데이터를 필터링하여 작업해야 할 수도 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 배열의 요소를 특정 기준으로 그룹화하고 필터링하는 방법에 대해 알아보겠습니다.

그룹화하기

배열의 요소를 특정 기준으로 그룹화하기 위해서는 reduce 메소드를 사용합니다. reduce 메소드는 배열의 각 요소에 대해 콜백 함수를 호출하고, 콜백 함수의 반환 값을 누적해서 최종 결과를 반환합니다. 이를 활용하여 배열을 그룹화할 수 있습니다.

다음은 숫자 배열을 짝수와 홀수로 그룹화하는 예제입니다.

const numbers = [1, 2, 3, 4, 5, 6];

const groupedNumbers = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc.even.push(curr); // 짝수 그룹에 추가
  } else {
    acc.odd.push(curr); // 홀수 그룹에 추가
  }
  
  return acc;
}, { even: [], odd: [] });

console.log(groupedNumbers); 
// 출력: { even: [2, 4, 6], odd: [1, 3, 5] }

위 예제에서는 reduce 메소드를 사용하여 even과 odd라는 두 그룹으로 초기값을 지정합니다. 그 후, 배열의 각 요소를 확인하면서 짝수는 even 그룹에, 홀수는 odd 그룹에 추가합니다. 최종적으로 groupedNumbers 변수에는 그룹화된 결과가 저장됩니다.

필터링하기

그룹화된 배열에서 특정 조건을 만족하는 요소를 필터링하기 위해서는 filter 메소드를 사용합니다. filter 메소드는 배열의 각 요소에 대해 주어진 조건 함수를 적용하고, 조건을 만족하는 요소만을 반환합니다.

다음은 그룹화된 배열에서 3보다 작은 숫자들을 필터링하는 예제입니다.

const filteredNumbers = groupedNumbers.odd.filter(num => num < 3);

console.log(filteredNumbers);
// 출력: [1]

위 예제에서는 filteredNumbers 변수에 groupedNumbers 배열의 odd 그룹에서 조건을 만족하는 요소만을 필터링하여 저장합니다. 이 경우, 3보다 작은 숫자인 1은 조건을 만족하므로 반환됩니다.

마무리

이와 같이 자바스크립트를 활용하여 배열의 요소를 특정 기준으로 그룹화하고 필터링할 수 있습니다. 이를 통해 배열을 더욱 효과적으로 다룰 수 있으며, 복잡한 데이터 처리 작업을 보다 간단하게 수행할 수 있습니다.