[ 자바스크립트 Array 메서드 ] - filter()

 

 

 

 

 

자바스크립트에서 지원하는 배열 메서드를 하나하나 정리하기로 마음 먹었다.

대망의 1등이지만 1등만 기억하고 싶지는 않은(?) 메서드 filter()

 

---

▶ Array.filter()

filter() 메서드는 조건에 만족하는 요소들을 모아 새로운 배열로 반환해준다.

아래 예시는 arr 배열에서 100보다 작은 정수만을 모아 리턴하고 있다.

// arr 배열에서 5의 배수인 정수만 모아서 리턴
var arr = [10, 12, 15, 21, 30, 45, 56, 100, 150, 177];
var filterArr = arr.filter(function (item, index, arr) {
    return item < 100;
});

console.log(filterArr);

결과: [10, 12, 15, 21, 30, 45, 56]

 

▶ filter()메서드는 제공된 callback 함수(위 예시 코드에서 function() {} 부분)를 호출해, 조건에 만족하는 모든 값을 걸러내 이 값들로 이루어진 새로운 배열을 생성한다.

callback함수는 값이 있는 배열에 대해서만 정상적으로 호출되며, callback함수의 조건에 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않는다.

 

callback함수는 다음 세 인수와 함께 호출된다:

1. 요소의 값 (위의 'item')
2. 요소의 인덱스 (위의 'index')
3. 순회(traverse)되는 배열 객체 (위의 'arr')

 

위의 코드를 아래의 코드처럼 쓸 수 있다. 결과는 동일하다.

// arr 배열에서 5의 배수인 정수만 모아서 리턴
var arr = [10, 12, 15, 21, 30, 45, 56, 100, 150, 177];

function getData(value) {
    console.log(value); // arr 배열의 요소
    return value < 100;
}

var filtered = arr.filter(getData);

console.log(filtered);

 

 

또 다른 예로 배열에서 원하는 글자가 포함된 요소를 찾기 위한 코드이다.

var fruits = ["apple", "banana", "grapes", "mango", "orange"];

// 검색하고자 하는 글자가 포함된 배열의 요소를 찾을 때
function filterItems(word) {	// 'word' - 검색하고자 하는 글자
	return fruits.filter(function(item) {	// 'item' - fruits 배열 안 각각의 요소
  		  return item.toLowerCase().indexOf(word.toLowerCase()) > -1;
    });
};

console.log(filterItems('na'));
console.log(filterItems('g'));

결과: ["banana"]
결과: ["grapes", "mango", "orange"]

---

 

▶ 참고 문서

 

같이 보면 좋은 또 다른 배열 메서드

    ▶ Array.prototype.forEach()

    ▶ Array.prototype.every()

    ▶ Array.prototype.some()

    ▶ Array.prototype.reduce()