[js메서드] 배열.filter()

JavaScript의 filter() 메서드는 배열의 각 요소를 순회하면서 특정 조건에 해당하는 요소들로만 구성된 새로운 배열을 반환한다.

원본 배열을 변경하지 않고 새로운 배열을 반환한다는 점을 주의하자.

 

문법은 아래와 같다.

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

(* 코드 내 [] 안의 내용은 메서드 동작에 필수적이지 않으며, 실제 코드 입력 시 []는 생략함)

 

배열의 각 요소를 순회하며 callback함수를 실행한다.

callback 함수는 다음과 같은 인자들을 받을 수 있다.

index와 array 선택사항이다.

 

1. element: 배열 요소

2. index: 배열 요소의 인덱스

3. array: 필터 메서드를 호출한 배열

 

주의할 점은 callback 함수는 반드시 boolean 값을 반환해야 한다는 점이다.

아무 값이나 return할 수 없다.

filter()메서드가 적용되면 callback함수가 true를 반환한 요소들로만 구성된 새로운 배열이 반환된다.

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(function(num) { return num % 2 === 0; }); 
console.log(filteredNumbers); // [2, 4]

위 예시에서 .filter() 메서드는 numbers 배열의 요소를 순회하며 callback 함수는 각 요소가 2로 나누어 떨어지는지 확인하고, 

결과가 true인 요소들로만 구성된 배열을 반환했다.

 

아래는 또 다른 예시이다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

word.length 와 같이 요소의 속성을 활용할 수도 있다.

다만, 항상 return 값은 true/false과 같은 boolean이어야 한다는 점을 주의하자.

주로 요소에 관한 평가식이 올 수 있다.

 

공식 문서: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN