[js] 배열 .filter() 메소드 ( 배열, 객체에서 필터링 )

[js] Array.prototype.filter() 메소드를 사용하여 여러가지 상황에서 사용할 수 있는 필터링 예제

 

Array.prototype.filter()란?

 filter() 메소드는 함수에 의해 구현된 테스트를 통과하는 배열의 요소로만 필터링된 원 배열의 일부에 대한 얕은 복사본을 만든다.

 

문법 (arrow 함수만 )

filter((element) => { /* … */ })
filter((element, index) => { /* … */ })
filter((element, index, array) => { /* … */ })

 

---

 

Array.prototype.filter() 예제

1. 배열 요소의 길이가 6보다 큰 배열을 출력하는 예제

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

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

console.log(result);

 

출력값

Array ["exuberant", "destruction", "present"]

 

 

2. 특정 숫자보다 작은 값을 제외하는 필터링 예제

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

위 예제에서는 filter()를 사용하여 값이 10보다 작은 모든 요소가 제거된 필터링된 배열을 만든다.

 

출력값

[12, 130, 44]

 

 

3. 배열에서 모든 소수 찾기

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num > 1;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

위 예제는 배열의 모든 소수를 반환한다.

 

 

4. JSON에서 유효하지 않은 항목 필터링하는 예제

const arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  {},
  { id: null },
  { id: NaN },
  { id: "undefined" },
];

let invalidEntries = 0;

function filterByID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}

const arrByID = arr.filter(filterByID);

console.log("Filtered Array =", arrByID);

console.log("Number of Invalid Entries =", invalidEntries);

위 예제에서는 filter()를 사용하여 0이 아닌 숫자 ID를 가진 모든 요소로 필터링된 JSON을 생성한다.

 

출력값

Filtered Array = [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
Number of Invalid Entries = 5

 

5. 배열에서 검색

const fruits = ["apple", "banana", "grapes", "mango", "orange"];

/**
 * Filter array items based on search criteria (query)
 */
function filterItems(arr, query) {
  return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}

console.log(filterItems(fruits, "ap"));
console.log(filterItems(fruits, "an"));

위 예제에서는 filter()를 사용하여 검색 기준(단어 포함여부)에 따라 배열 내용을 필터링한다.

 

출력값

['apple', 'grapes']
['banana', 'mango', 'orange']

 

 

6. 희소 배열에서 filter() 사용

console.log([1, , undefined].filter((x) => !x));
console.log([1, , undefined].filter((x) => x !== 2));

위 예제에서 filter()는 빈 슬롯을 건너뛴어 ' '가 출력이 되지 않는 것을 알 수 있다.

 

출력값

[undefined]
[1, undefined]

 

 

7. 배열이 아닌 객체에서 filter() 호출

const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
};
console.log(Array.prototype.filter.call(arrayLike, (x) => x <= "b"));

위 예제는 filter() 메서드는 this의 길이 속성을 읽은 다음 각 정수 인덱스에 액세스한다.

 

출력값

[ 'a', 'b' ]

 

 

8. 초기 배열에 영향이 갈 때(수정, 추가 및 삭제)

// 각 단어 수정
let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];

const modifiedWords = words.filter((word, index, arr) => {
  arr[index + 1] += " extra";
  return word.length < 6;
});

console.log(modifiedWords);
// 길이 6 아래에 세 개의 단어가 있지만 extra가 추가되었으므로 하나가 반환된다.
// ["spray"]

// 새 단어 추가
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const appendedWords = words.filter((word, index, arr) => {
  arr.push("new");
  return word.length < 6;
});

console.log(appendedWords);
// 이제 'words' 자체에 문자 길이가 6 미만인 단어가 훨씬 많아졌음에도 불구하고 3개만 조건에 맞는다.
// ["spray" ,"limit" ,"elite"]

// 단어 삭제
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const deleteWords = words.filter((word, index, arr) => {
  arr.pop();
  return word.length < 6;
});

console.log(deleteWords);
// 필터가 도달하기 전에 'words'에서 제거되었기 때문에 'elite'는 추가되지 않는다.
// ["spray" ,"limit"]

위 예제에서는 배열이 수정될 때 필터 메서드의 동작을 테스트한다.

 

출력값

["spray"]
["spray" ,"limit" ,"elite"]
["spray" ,"limit"]