[JAVASCRIPT] 배열 필터링하는 방법(걸러내기) - filter

JAVASCRIPT

---

filter

자바스크립트 배열의 filter 메소드를 활용해서 요소를 필터링하는 방법입니다.

 

구문

result = arr.filter(callbackFn)

 

배열의 모든 요소를 순회하면서 콜백 함수(callbackFn)의 인자로 전달합니다. 콜백 함수가 true를 반환하면 요소가 유지되고 false를 반환하면 요소를 버립니다.

 

배열 arr

const arr = [ 1, 2, 3, 4, 5];

 

arr를 필터링하여 arr2를 생성하겠습니다.

const arr = [1, 2, 3, 4, 5];
console.log(arr); // [1, 2, 3, 4, 5]

const arr2 = arr.filter(number => true);
console.log(arr2); // [1, 2, 3, 4, 5]

배열의 요소에 관계없이 콜백 함수가 모두 true를 반환하도록 구현하였으므로 모든 요소가 유지됩니다.

 

이번엔 false를 반환해보겠습니다.

const arr = [1, 2, 3, 4, 5];
console.log(arr); // [1, 2, 3, 4, 5]

const arr2 = arr.filter(number => false);
console.log(arr2); // []

 false로 인해 arr배열에서 유지되는 요소가 없으므로 최종적으로 빈 배열이 생성됩니다.

 

 

조건에 따른 필터링 예시

 

3 이상의 숫자만 걸러냅니다.

const arr = [1, 2, 3, 4, 5];
console.log(arr); // [1, 2, 3, 4, 5]

const arr2 = arr.filter(number => number >= 3);
console.log(arr2); // [3, 4, 5]

 

짝수만 걸러냅니다.

const arr = [1, 2, 3, 4, 5];
console.log(arr); // [1, 2, 3, 4, 5]

const arr2 = arr.filter(number => number % 2 === 0);
console.log(arr2); // [2, 4]

---

MDN document - Array.prototype.filter()

Array.prototype.filter() - JavaScript | MDN