[JavaScript] arr.filter() - 배열에서 원하는 배열값들만 추려내기/반환하기 (ft. Array.prototype.filter())

스크립트로 배열을 다룰때 많은 값들을 가진 배열에서 원하는 조건에 맞는 값들만 뽑아내 사용하고 싶을때 Array.prototype.filter() 메서드를 사용하면 손쉽게 할 수 있다.

 

메서드 이름 그대로 배열에 필터링을 건다고 생각하면 쉽다.

 

▷ 구문

arr.filter(callback(element[, index[, array]])[, thisArg])

callback : callbackFunction 이며 function 안에서 조건에 따라 true를 반환하는 요소만 가지고 배열을 만들어준다.

element : 현재 요소 (ex. 반복문의 현재 요소)

index : 현재 요소의 인덱스

array : filter 함수를 사용하는 대상 배열

thisArg : callback을 실행할 때 this로 사용하는 값.

---

이제 filter() 메서드에 대해 어느정도 알아뒀다면

예제를 통해 접근해보자. 

 

▷ 예제1) 숫자로만 이루어진 배열

var numArr = [1,2,3,4,5,6,7,8,9,10];

numArr.filter(function(elem,index,arr){
	return elem < 5
});
// [1,2,3,4]

 

대상 배열에서 5보다 작은 값들을 필터링을 건것이다. 결과 값은 5보다 작은 [1, 2, 3, 4] 이 반환된다.

 

▷ 예제2) 객체로 이루어진 배열

var arr = [
  {id : 1, name : "mine"},
  {id : 2, name : "array"},
  {id : 3, name : "it"},
  {id : 4, name : "record"},
  {id : 5, name : "filter"},
  {id : 6, name : "array"},
  {id : 7, name : "filter"},
  {id : 8, name : "mine"},
  {id : 9, name : "it"},
  {id : 10, name : "record"},
];

arr.filter(function(elem,index,arr){
   return elem.id < 5 && elem.name == "record"
});
// result : [{id : 4, name : "record"}]

 

배열안에 각 객체를 대상으로 조건을 걸어 필터링 하는 예제이다.

이런식으로 사용되기 때문에 다양한 곳에서 활용이 가능해 보인다.

---

스크립트에서 객체나 배열을 다루는 경우가 굉장히 많기 때문에 이런것들을 하나하나 익혀놓으면 정말 많은 도움이 될거라 생각된다.

 

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

Array.prototype.filter() - JavaScript | MDN