[JavaScript] filter() 사용법 알아보기 [JS기초 함수]

Filter()란?

배열에 각 요소에 대해 주어진 콜백 함수를 실행하고, 콜백 함수 내에 true로 반환되는 값들로 새로운 배열을 생성합니다. 

 

Array.filter() 구문

Array.filter( callback( element, index, array ) => {
	return 참이 되는 값;
    }

• element : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : filter를 호출한 배열 (위 예시에서는 Array)

Array.filter() 설명

 filter() 함수는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해 ture로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다.
callback 함수는 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다. 삭제됐거나, 변경된 값, 값이 할당 된 적이 없는 인덱스에 대해서는 호출되지 않습니다.
filter() 함수는 호출되는 배열을 변화시키지 않습니다. 

var Array = [1,2,3,4,5];
Array.filter((value)=>{
    return value > 2;
})
console.log(Array); // [1,2,3,4,5]

var newArray = Array.filter((value)=>{
    return value > 2;
})
console.log(newArray); // [3,4,5]

 

Array.filter() 작동 방식, 예제

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']
console.log(filterItems("an")); // ['banana', 'mango', 'orange']

fruits의 요소 중 query가 포함되어 있는 문자열을 찾아서 값을 반환하고 있다.

 

정리

filter() 함수는 배열 내에 내장 함수로 말그대로 필터를 해주는 역할을 한다. 어떠한 기준에 의해 배열을 분리하고 싶을 때 유용하게 사용할 것 같다.

 

Array.prototype.filter() - JavaScript | MDN (mozilla.org)

Array.prototype.filter() - JavaScript | MDN