Array.prototype.filter()

시작하며...

 map()에 이어 이번에는 filter에 대해 보겠습니다. 조건문에 익숙해졌는데 아래 방법도 많이 써서 익숙해지도록 해야겠습니다.

2021.04.08 - [개발노트/Javascript] - Array-prototype.map()

 

본론

 filter()는 주어진 함수의 테스트를 통과하는 모든요소들을 모아 새로운 배열로 반환합니다.

let value = ['abc' , 'bc', 'cd']

let result = value.filter(val => val.length > 6);

// result = ['abc']

 

callback

 true 요소만 나두고, false 요소는 버린 값을 반환합니다.

 element

 처리할 요소

 Index(optional)

 처리할 요소

 array(optional)

 filter를 호출한 배열

 

 반환값

 테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈배열을 반환합니다. 

 

Filter()는 배열 내 각 요소에 대해 한 번 제공된 Callback 함수를 호출하여, callback에서 true로 반환하는 값을 새로운 배열로 생성 합니다. 삭제 되었거나 값이 할당 된 적이 없는 인텍스에 대해서는 호출되지 않습니다. callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뜁니다.

 

// MDN 예제 소스 참고를 하였습니다.
// 1. 특정 값 찾기
function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

 

//2. json 형식에서 일부 값 찾기
var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); //isNan은 매개변수가 숫자인지 검사하는 함수
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries = 5

//3. 검색조건에 따른 배열 필터링
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(query){
 return fruits.filter(function(el) {
 	return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
    )};
 )
}

console.log(filterItems('ap')); // ['apple', 'grapes']

/**
 * 3번 문제를 ES2015 style로 
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']