FE/Javascript

[Javascript] Filter 함수 알아보기

Juliie 2021. 6. 25. 10:49

Array.prototype.filter

자신을 호출한 배열의 요소들에 대해 인수로 전달받은 함수를 호출한다, 그리고 그 결과가 true인 요소들을 모아서 새로운 배열을 반환한다

원본 배열은 변경 X

 

구문

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

 

매개변수

1. callback: 각 요소를 검사할 함수 - return값이 true면 유지 / false면 버림(다음 가지 인수를 가진다)

      1) element: 처리할 현재 요소

      2) index(optional): 처리할 현재 요소의 인덱스

      3) array(optional): filter() 호출한 배열

2. thisArg(optional): callback 실행할 this 사용되는

const vege = ["가지", "복숭아", "호박", "무우"];
const realVege = vege.filter(item => item.length == 2);

// 원본 배열
console.log(vege);
// expected output: Array ["가지", "복숭아", "호박", "무우"];

// filter()가 생성한 배열
console.log(realVege);
// expected output: Array ["가지", "호박", "무우"]

 

filter 메소드는 자신을 호출한 배열에서 필터링 조건을 만족하는 요소들로만 구성된 새로운 배열을 생성할 때 사용한다!

또한 특정 요소를 제거할 때도 filter 메소드를 활용할 수 있는데, 제거하려는 특정 요소가 중복되어 있다면 중복된 요소가 모두 제거된다

(하나만 제거하려면 indexOf - splice를 사용하자)