Arrayに書き込み可能な有用な関数「filter」

Array.prototype.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를 실행할 때 추가된 배열을 기준으로 필터를 하는게 아니기 때문이다.