[ JavaScript ] - Array에 쓸 수 있는 유용한 함수 "filter"

Array.prototype.filter()

filter()는 필터로 걸러진 배열을 반환한다.
( 필터로 걸러진 요소를 담아 새 배열을 반환!)

Syntax

// Arrow function
filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function(element) { /* ... */ })
filter(function(element, index) { /* ... */ })
filter(function(element, index, array){ /* ... */ })
filter(function(element, index, array) { /* ... */ }, thisArg)

📌예)

let members = [ 
  {name:'Chi',age:20},
  {name:'Bob',age:17},
  {name:'David',age:31},
  {name:'Naomi',age:6}
];

//age가 20이상인 member를 알고싶다면?
const result = members.filter(member => member.age >=20 );
console.log(result); 
//output: [{name: 'Chi', age: 20}, {name: 'David', age: 31}]


//age가 100이상인 member를 알고싶다면?
const result2 = members.filter(member => member.age >= 100);
console.log(result2); 
//output : [] 
// =>필터를 통과한 결과가 없으면 빈 배열을 반환한다. 


// 번외
const result3 = members.filter( (member,index,arr) => {
    arr.push({name:'Jen',age:40})
    return member.age >=20
});
console.log(result3); 
// output : [{name:'Chi',age:20}, {name:'David',age:31}]
console.log(members);
/*
[ 
  {name:'Chi',age:20},
  {name:'Bob',age:17},
  {name:'David',age:31},
  {name:'Naomi',age:6},
  {name: 'Jen', age: 40}
  {name: 'Jen', age: 40}
  {name: 'Jen', age: 40}
  {name: 'Jen', age: 40}
];
*/
//=> filter의 세번째 인자로 필터링 대상인 배열이 들어갈 수 있다.
//=> result3의 결과를 보면, 'Jen'의 age가 20이상임에도 필터링 결과엔 포함되지않았다.
//=> 애초에 filter를 실행할 때 추가된 배열을 기준으로 필터를 하는게 아니기 때문이다.

참고
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter