설명

배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소를 모아 새로운 배열을 반환

구문

arr.filter(callback(element[, index[, array]])[, thisArg])

• arr : 순회하는 배열
• element : 현재 배열의 요소
• index : 현재 배열요소의 index - 생략가능
• array : filter함수를 호출한 배열 - 생략가능
• thisArg : callback을 실행할 때 this로 사용되는 값 - 생략가능

const num = [1,2,3,4,5]

num.filter((num, idx, source) => {
    console.log(num) //element
    console.log(idx) //index
    console.log(source) //array
})

/결과
1
0
[1,2,3,4,5]

2
1
[1,2,3,4,5]

3
2
[1,2,3,4,5]

4
3
[1,2,3,4,5]

5
4
[1,2,3,4,5]

예제

1. 배열 중 10이상의 숫자를 가진 요소의 개수

function countBiggerThanTen(numbers) {
         return numbers.filter((el) => el > 10).length;
}

const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count); // 5

2. 배열 중 홀수만 빼오기

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

let halls = nums.filter((el) => el%2 == 1)

console.log(halls) //[1,3,5,7,9]

3. 배열 중 여자인 배열의 name 값 가져오기

const members = [
               {
                   id: 1,
                   name : "marshall",
                   age: 50,
                   sex: 'male',
               },
               {
                   id: 2,
                   name : "abel",
                   age: 34,
                   sex: 'male',
               },
               {
                   id: 3,
                   name : "ariana",
                   age: 31,
                   sex: 'female',
               },
               {
                   id: 4,
                   name : "sam",
                   age: 35,
                   sex: 'female',
               },
               {
                   id: 5,
                   name : "taylor",
                   age: 35,
                   sex: 'female',
               },
            ]
 
let female = members.filter((mem) => mem.sex == 'female')
// 이때 female은 여자인 배열

female.forEach((a, i) => {
     console.log(female[i].name)
})
// 'ariana', 'sam;, 'taylor'

기타 응용

1. 삭제 기능 (리액트)

const onDelete = id => {
    const arr = list.filter(el => el.id !== id);
    setList(arr);
  };

내가 클릭한 id값과 다른 id값을 랜더링한다. 그러면 내가 클릭한 값은 보이지 않게 된다.

참고 사이트

https://developer-talk.tistory.com/2
https://7942yongdae.tistory.com/49
https://uhee-12.tistory.com/55