[Java Script] Array filter() 함수 사용방법

리액트 강의를 들으면서 자바스크립트 실무 사용 방법을 조금씩 익혀가고 있다. 

필터가 배열 함수인지도 모르고 조건에 따라 걸러내는 방법으로 쓰다가 length로 값을 반환하는 방법을 보고 설마 배열을 새로 만드는 함수인가 싶어 좀 더 찾아보았다. 내가 쓰는 함수가 무엇인지 아는 것은 정말 중요한 거 같다.. 나중에 map에 대해서도 정리할 생각이다.

 

이번에는 array 함수 중 filter 함수에 대해 정리하고자 한다.

 

filter()의 정의

filter 주어진 함수의 조건을 만족하는 모든 요소들을 모아서 새로운 배열로 생성, 반환하는 함수이다.

배열 numbers에 있는 값들 중 2 보다 큰 수를 가진 값을 filter 통해 걸러내었다.

filter는 순차적으로 접근하여 조건을 통과한 요소만 배열에 포함시키고 통과하지 못한 요소는 건너뛴다.

어떤 요소도 통과하지 못한 경우에는 빈 배열을 반환한다.

const numbers = ['1', '2', '3', '4', '5', '6'];

const result = numbers.filter(numbers => numbers > 2);

console.log(result);
// [object Array] (4) ["3","4","5","6"]

for 문으로도 작성이 가능한 예제이나(빈 배열을 만들고 push를 통하여) filter 순회를 따로 작성하지 않아도 된다는 장점이 있어 for문 보다 권장되는 방법이다.

 

filter()의 사용방법

filter는 callback함수를 통해 주어진 3가지 인자(요소값, index, 순회되는 배열 객체)와 함께 호출된다.

불리언 타입인 true와 false를 통해 원하는 조건을 만족하는 새로운 배열을 만들 수 있다.

const numbers = [1];

numbers.filter((element, index, array) =>{
  // element : 처리할 요소값
  // index : array에서 요소의 인덱스
  // array : 순회되는 배열 객체
  
  console.log(element);
  // 1
  
  console.log(index);
  // 0
  
  console.log(array);
  // [1]

});

 

 

 

아직은 filter의 예시 코드를 작성하는 수준까지는 어려운 듯 하다.

할당하기로 한 시간이 오버되었으니 참고하였던 사이트를 첨부하고 나중에 더 보완해야겠다. 

프로그래머 YD블로그 https://7942yongdae.tistory.com/49

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