자바스크립트(JavaScript) 필터(filter)

(chatGPT를 통한 정리내용)

 

filter

 

filter는 자바스크립트 배열(Array)의 내장 메서드 중 하나로, 배열에서 특정 조건을 만족하는 요소들만 추출하여 새로운 배열을 반환합니다. 원본 배열은 변경되지 않고, 조건을 만족하지 않는 요소들은 제외됩니다.

 

filter 메서드의 특징

1. 콜백 함수 사용: filter는 콜백 함수를 사용하여 각 배열 요소를 조건에 따라 평가합니다.
2. 새로운 배열 반환: 조건을 만족하는 요소들만 포함된 새로운 배열을 반환합니다.
3. 원본 배열 변경 없음: filter는 원본 배열을 수정하지 않습니다.
4. 조건이 true인 요소만 포함: 콜백 함수에서 true를 반환하는 요소들만 최종 배열에 포함됩니다.

 

filter 문법

 

• callback
  각 배열 요소에 대해 실행할 함수입니다.
  • element: 현재 처리 중인 요소
  • index (선택): 현재 처리 중인 요소의 인덱스
  • array (선택): filter가 호출된 배열 자체
• thisArg (선택): 콜백 함수 내에서 this로 사용할 값

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

 

 

---

예제

예제 1: 간단한 숫자 배열에서 짝수만 추출

const numbers = [1, 2, 3, 4, 5, 6];

// 조건: 짝수만 추출
const evens = numbers.filter(number => number % 2 === 0);

console.log(evens); // [2, 4, 6]

설명:

• number => number % 2 === 0은 각 숫자를 2로 나눴을 때 나머지가 0인지 확인합니다.
• 조건을 만족하는 숫자(짝수)들만 새로운 배열 evens에 포함됩니다.

 

예제 2: 문자열 배열에서 특정 조건을 만족하는 요소 필터링

const fruits = ["apple", "banana", "cherry", "blueberry", "grape"];

// 조건: 이름에 "b"가 포함된 과일만 추출
const fruitsWithB = fruits.filter(fruit => fruit.includes("b"));

console.log(fruitsWithB); // ["banana", "blueberry"]

설명:

• fruit.includes("b")는 각 과일 이름에 "b" 문자가 포함되어 있는지 확인합니다.
• "banana"와 "blueberry"가 조건을 만족하므로 새 배열에 포함됩니다.

 

예제 3: 객체 배열에서 특정 조건을 만족하는 객체 추출

const users = [
  { id: 1, name: "Alice", isActive: true },
  { id: 2, name: "Bob", isActive: false },
  { id: 3, name: "Charlie", isActive: true },
];

// 조건: isActive가 true인 사용자만 추출
const activeUsers = users.filter(user => user.isActive);

console.log(activeUsers);
/*
[
  { id: 1, name: "Alice", isActive: true },
  { id: 3, name: "Charlie", isActive: true }
]
*/

설명:

• user.isActive가 true인 객체들만 새로운 배열에 포함됩니다.
• 원본 배열 users는 수정되지 않습니다.

 

예제 4: 필터링과 함께 인덱스 사용

const numbers = [10, 20, 30, 40, 50];

// 조건: 인덱스가 홀수인 요소만 추출
const oddIndexNumbers = numbers.filter((num, index) => index % 2 === 1);

console.log(oddIndexNumbers); // [20, 40]

설명:

• index % 2 === 1 조건은 배열의 홀수 번째 인덱스를 의미합니다.
• 해당 조건을 만족하는 요소들만 새 배열에 포함됩니다.

 

예제 5: 응용 - 숫자 중 특정 값보다 큰 값만 남기기

const scores = [55, 78, 95, 62, 88, 42];

// 조건: 70점 이상인 점수만 추출
const highScores = scores.filter(score => score >= 70);

console.log(highScores); // [78, 95, 88]

---

filter로 이해하기

filter는 아래 질문으로 생각하면 쉽게 이해할 수 있습니다:

"이 요소를 새 배열에 포함할까?"

콜백 함수가 true를 반환하면 포함, false를 반환하면 제외됩니다.

 

 

한눈에 보는 정리

 

• filter는 원본 배열을 유지하고, 조건에 맞는 요소들로 새로운 배열을 반환합니다.
• 배열의 각 요소를 반복하면서 조건을 검사하고, true를 반환한 요소들만 새 배열에 포함됩니다.
• 데이터 추출, 검색, 필터링 작업에서 매우 유용합니다.