프로그래밍 월드/Javascript & jQuery

[Javascript] 자바스크립트의 filter에 대하여 알아보자.

용가리TM 2025. 3. 14. 16:31
반응형

1. 기본 문법

const newArray = originalArray.filter(callback(element[, index[, array]])[, thisArg]);
  • originalArray: 원본 배열.
  • callback: 배열의 각 요소에 대해 실행할 함수.
    • element: 현재 처리 중인 요소.
    • index (선택): 현재 요소의 인덱스.
    • array (선택): filter()를 호출한 배열 자체.
  • thisArg (선택): callback 함수 내에서 사용될 this 값.

2. 콜백 함수의 역할

콜백 함수는 배열의 각 요소마다 호출되며, 각 호출 시 다음과 같이 전달됩니다:

  • element: 현재 요소.
  • index: 현재 요소의 인덱스.
  • array: 원본 배열 전체.

콜백 함수는 true 또는 false를 반환해야 합니다.

  • true를 반환하면, 해당 요소는 새 배열에 포함됩니다.
  • false를 반환하면, 해당 요소는 제외됩니다.

예를 들어:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => {
  return num % 2 === 0;  // 짝수일 경우에만 true 반환
});
console.log(evenNumbers); // [2, 4]
 

3. thisArg 매개변수

두 번째 인자로 전달하는 thisArg는 콜백 함수 내부에서 this로 사용됩니다.

예를 들어, 객체의 속성을 비교할 때 유용합니다:

 
const context = { threshold: 10 };
const numbers = [5, 12, 8, 130, 44];

const filtered = numbers.filter(function(num) {
  return num > this.threshold;
}, context);

console.log(filtered); // [12, 130, 44]

4. 다양한 사용 예제

4.1. 배열 내의 객체 필터링

객체 배열에서 특정 조건을 만족하는 객체만 골라낼 수 있습니다.

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const usersOver30 = users.filter(user => user.age > 30);
console.log(usersOver30); // [ { name: 'Charlie', age: 35 } ]

4.2. 중첩 배열에서 특정 요소 제거

특정 값이 포함된 배열을 제거하는 경우:

const fruits = ['apple', 'banana', 'orange', 'banana'];
const filteredFruits = fruits.filter(fruit => fruit !== 'banana');
console.log(filteredFruits); // ['apple', 'orange']

4.3. 조건에 따른 복합 필터링

여러 조건을 조합하여 필터링할 수도 있습니다.

const items = [
  { name: 'Book', price: 12, inStock: true },
  { name: 'Pen', price: 2, inStock: false },
  { name: 'Notebook', price: 5, inStock: true }
];

const affordableInStock = items.filter(item => item.inStock && item.price < 10);
console.log(affordableInStock); // [ { name: 'Notebook', price: 5, inStock: true } ]

5. filter()의 특성과 주의 사항

  • 불변성 유지: filter()는 원본 배열을 변경하지 않고, 조건에 맞는 요소들로 새 배열을 생성합니다.
  • 희소 배열(Sparse Array): 배열 내에 비어있는 요소(holes)가 있는 경우, 해당 빈 요소들은 callback 함수에서 호출되지 않습니다.
  • 반환 값: 조건에 맞는 요소가 하나도 없으면 빈 배열 ([]) 을 반환합니다.
  • 고차 함수(Higher-Order Function): filter()는 콜백 함수를 인자로 받으므로, 다른 함수와 조합하여 사용하기 좋습니다.
  • 실행 순서: 배열의 각 요소에 대해 순서대로 콜백 함수가 호출됩니다. 따라서 인덱스에 의존하는 조건문 작성 시 주의해야 합니다.

6. filter()와 다른 배열 메서드 비교

  • map(): 배열의 각 요소를 변환하여 새 배열을 만듭니다. (길이는 동일)
  • reduce(): 배열의 모든 요소를 누적하여 하나의 값으로 축소합니다.
  • find(): 조건을 만족하는 첫 번째 요소만 반환합니다.
  • forEach(): 배열의 각 요소에 대해 주어진 함수를 실행하지만, 반환 값을 저장하지 않습니다.

filter()는 배열에서 특정 조건에 맞는 요소들만 골라내는 데에 최적화되어 있으며, 반환된 배열은 원본 배열과 별개이므로 후속 조작에 안전하게 사용할 수 있습니다.

7. 결론

JavaScript의 filter() 메서드는 배열 데이터를 다룰 때 매우 강력하고 유연하게 사용할 수 있는 도구입니다. 다양한 상황에서 원하는 조건에 맞는 데이터를 선별하고, 원본 배열을 건드리지 않으면서 새로운 배열을 생성할 수 있기 때문에, 코드의 가독성과 유지보수성을 높이는 데 큰 도움을 줍니다.

이처럼 filter()의 기본 사용법부터 고급 사용법까지 이해하면, 복잡한 데이터 필터링 작업도 간단하고 직관적으로 해결할 수 있습니다.

반응형