카테고리 별로 분류

만약 캘린더에 당직, 연차  두개의 카테고리가 있다고 가정할 때 

당직과 연차 이 카테고리에 해당되는 갯수? 가 몇개인지 표시하고 싶을 때 

 

무엇을 써야할까 

 

map ? 

 

map은 배열의 모든 요소를 순회하면서 각 요소에 대해 콜백 함수를 호출한다.

콜백 함수에서 반환된 값들을 모아서 새로운 배열을 생성하고

원본 배열과 길이가 동일하며, 각 요소들은 콜백 함수에 의해 가공된 값으로 대체된다.

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

const doubledNumbers = numbers.map((num) => num * 2);
// doubledNumbers는 [2, 4, 6, 8, 10] 배열이 됨

 

 

답은 filter 다.

filter 는 배열의 모든 요소를 순회하면서 콜백 함수를 호출한다.

콜백 함수에서 true를 반환하는 요소만 모아서 새로운 배열을 생성한다.

반환된 배열은 원본 배열보다 작거나 같을 수 있다.

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

const evenNumbers = numbers.filter((num) => num % 2 === 0);
// evenNumbers는 [2, 4] 배열이 됨

 

 

그러면 이번에는 실제 코드에 적용해보쟈

 

이렇게 임의로 넣은 더미 데이터에서

카테고리에 당직과 연차가 있다.

 

그 다음에 코드부터 보자 

 

 const selectedCategoryCount = events.filter((event) => 
    event.category === '당직').length;

1. selectedCategoryCount 라는 변수를 선언하고 

 

2. events 배열에서 '당직' 카테고리에 해당하는 요소들로 새로운 배열을 생성한다.

 

3. 새로운 배열의 길이를 length 속성을 이용하여 구한다.

 

4. selectedCategoryCount 변수에 '당직' 카테고리에 해당하는 요소들의 개수가 저장된다!

 

그러면 이 selectedCategoryCount를 뿌려주면 된다.