[JavaScript] Array.prototype.filter()

filter 함수란?

---

filter()는 배열에서 특정 조건을 만족하는 요소만 추출하여 새로운 배열을 반환하는 메서드입니다.이 과정에서 기존 배열은 수정되지 않고 유지됩니다.

언제 사용하나요?

• 배열에서 조건에 맞는 데이터 추출하고 싶은 경우
• 배열에서 유효하지 않은 값을 제거하고 싶은 경우

사용방법

💡 filter() 함수를 사용하는 경우 원본 배열은 변경되지 않는다는 점을 꼭 기억해주세요!

filter() 함수는 array 배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 맞는 요소들을 필터링 하는 함수입니다. 필터링된 새로운 배열을 반환합니다.

• 콜백 함수가 true를 반환하면, 현재 요소(element)는 필터링된 배열에 포함됩니다.
• 콜백 함수가 false를 반환하면, 현재 요소(element)는 필터링된 배열에 포함되지 않습니다.

const newArray2 = array.filter(function(element) { 
    return 필터링_조건;
});

const newArray1 = array.filter((element) => { // 화살표 함수 사용
  return 필터링_조건;
});

• array : 원본 배열 ( filter 함수를 적용해도 변경되지 않습니다. )
• element : array 배열의 각 요소
• 필터링_조건 : array 배열의 각 요소에 대해 적용시킬 조건 📩 return 결과는 true 또는 false (boolean)여야 합니다.
  • true인 경우 해당 요소는 새 배열에 포함됩니다.
  • false인 경우 해당 요소는 제외됩니다.
• newArray : 필터링_조건 을 만족하는 요소들에 대한 새로운 배열

사용 예시

---

1. numbers 배열에서 짝수만 필터링하고 싶은 경우

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

const evenNumbers = numbers.filter(number => {
    // 다중 조건을 결합하여 필터링
    return number % 2 === 0
});

console.log(evenNumbers); 
// 출력: [2, 4, 6]

• numbers : 원본 배열 ( filter 함수를 적용해도 변경되지 않습니다. )
• ex. [1, 2, 3, 4, 5, 6]
• number : numbers 배열의 각 요소
  • ex. 1, 2, 3, 4, 5, 6
• number % 2 : numbers 배열의 각 요소에 필터링 적용할 조건 (짝수)
  • 1 (false), 2 (true), 3 (false), 4 (true), 5 (false), 6 (true)
• evenNumbers : true를 반환하는 요소(짝수)만 모아서 반환한 배열
  • ex. [2, 4, 6]

2. users 객체를 요소로한 배열에서 나이가 18 이상인 사용자만 필터링하고 싶은 경우

const users = [
  { name: '김오즈', age: 17 },
  { name: '박코딩', age: 20 },
  { name: '권자바', age: 15 },
  { name: '이노드', age: 22 },
];

const adults = users.filter((user) => {
	// 나이가 18세 이상인 user만 추출
	return user.age >= 18
});

console.log(adults);
// 출력: [{ name: '박코딩', age: 20 }, { name: '이노드', age: 22 }]

3. words 문자열을 요소로한 배열에서 단어에 'a'가 포함된 문자열만 필터링하고 싶은 경우

const words = ['apple', 'banana', 'cherry', 'date'];

// filter를 사용해 'a'가 포함된 단어만 추출
const wordsWithA = words.filter((word) => {
	return word.includes('a')
});

console.log(wordsWithA);
// 출력: ['apple', 'banana', 'date']

한걸음 더 나아가기

---

앞서 학습했던 map 메서드 모두 기억하시나요? 👩🏻‍🏫

map과 filter는 배열 메서드로 자주 사용되지만, 그 목적과 동작이 다릅니다.
map은 모두 변환, filter는 선택적 추출입니다.
아래에서 주요 차이점을 간단히 정리하고, 코드 예제를 통해 비교해 보겠습니다.

🔍 map과 filter의 주요 차이점

특징	map	filter
목적	배열의 각 요소를 변환하여 새 배열을 반환합니다.	배열의 요소 중 조건을 만족하는 요소만 새 배열로 반환합니다.
결과 배열 크기	원본 배열 요소의 개수와 동일한 개수를 반환합니다.	원본 배열 요소의 개수와 작거나 같은 개수를 반환합니다.
콜백 함수 반환값	새로운 요소 값 (변환된 값)	true 또는 false (조건 만족 여부)
원본 배열 변경 여부	원본 배열은 변경되지 않음	원본 배열은 변경되지 않음

💻 코드로 직접 비교해보기

1. 숫자로 이루어진 배열 : 2배로 변환하기(map) vs 짝수만 추출하기(filter)

• 2배로 변환하기(map)

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

// 각 요소를 2배로 변환
const doubled = numbers.map((number) => number * 2);

console.log(doubled); 
// 출력: [2, 4, 6, 8, 10]

• 짝수만 추출하기 (filter)

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

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

console.log(evens);
// 출력: [2, 4]

2. 문자열로 이루어진 배열 : 대문자로 변환하기(map) vs 글자 수가 5이상인 문자열만 추출하기 (filter)

• 대문자로 변환하기(map)

const words = ['hello', 'world', 'javascript'];

// 각 문자열을 대문자로 변환
const uppercasedWords = words.map((word) => word.toUpperCase());

console.log(uppercasedWords);
// 출력: ['HELLO', 'WORLD', 'JAVASCRIPT'

• 글자 수가 5이상인 문자열만 추출하기 (filter)

const words = ['hello', 'world', 'javascript'];

// 글자 수가 5 이상인 단어만 추출
const longWords = words.filter((word) => word.length >= 5);

console.log(longWords);
// 출력: ['hello', 'world', 'javascript']

3. map과 filter를 조합하여 사용해보기

• map과 filter를 조합해 사용하면 더 복잡한 작업을 처리할 수 있습니다.

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

// 1. 짝수만 추출 (filter)
// 2. 각 숫자를 2배로 변환 (map)
const result = numbers
  .filter((number) => number % 2 === 0) // 짝수 추출 [2,4]
  .map((number) => number * 2);         // 2배로 변환 [4,8]

console.log(result);
// 출력: [4, 8]