자바스크립트 filter()

filter() 메서드는 자바스크립트에서 배열(Array)에 사용되는 매우 유용한 함수입니다. filter()는 배열의 각 요소를 순회하며, 주어진 조건을 만족하는 요소들만 새로운 배열로 반환합니다. 즉, 원래 배열을 변경하지 않고, 조건에 맞는 요소들로 구성된 새로운 배열을 만들어냅니다.

기본 문법:

let newArray = array.filter(callback(element, index, array), thisArg);

• callback: 각 배열 요소에 대해 호출되는 함수입니다. callback 함수는 true 또는 false를 반환해야 하며, true인 경우 해당 요소는 새로운 배열에 포함되고, false인 경우 포함되지 않습니다.
  • element: 현재 처리 중인 배열의 요소.
  • index (선택 사항) : 현재 요소의 인덱스.
  • array (선택 사항) : filter를 호출한 원래 배열.
• thisArg (선택 사항) : callback 함수 내에서 사용할 this 값을 설정할 수 있습니다.

간단한 예시:

1. 짝수만 걸러내기: 배열에서 짝수만 남기고, 나머지를 제거하는 경우입니다.

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4, 6]

여기서 num % 2 === 0이라는 조건을 사용하여, 짝수인 숫자들만 새로운 배열로 반환했습니다.

 

2. 문자열 길이가 5 이상인 요소만 필터링: 배열에서 문자열의 길이가 5 이상인 것만 남기고 필터링하는 예시입니다.

let words = ["apple", "banana", "cherry", "kiwi"];
let longWords = words.filter(word => word.length >= 5);
console.log(longWords); // 출력: ["apple", "banana", "cherry"]

여기서 word.length >= 5 조건을 만족하는 문자열만 새로운 배열에 포함되었습니다.

 

3. 객체 배열에서 특정 조건으로 필터링: 객체 배열에서 조건에 맞는 객체들만 필터링하는 예시입니다. 예를 들어, 나이가 18 이상인 사용자만 필터링할 수 있습니다.

let users = [
  { name: "John", age: 25 },
  { name: "Jane", age: 17 },
  { name: "Doe", age: 30 }
];

let adults = users.filter(user => user.age >= 18);
console.log(adults); // 출력: [{ name: "John", age: 25 }, { name: "Doe", age: 30 }]

이 코드는 user.age >= 18 조건을 만족하는 사용자들만 필터링해서 새로운 배열을 만듭니다.

filter()의 주요 특징:

1. 원본 배열을 변경하지 않음: filter()는 원본 배열을 변경하지 않고, 조건에 맞는 요소들로 새로운 배열을 반환합니다. 즉, 불변성을 유지합니다.
2. 조건에 맞는 요소만 반환: 조건이 true인 요소만 반환되며, false인 요소는 새로운 배열에 포함되지 않습니다.
3. 빈 배열도 반환 가능: 만약 조건을 만족하는 요소가 없으면, 빈 배열을 반환합니다.
4. 모든 배열 요소를 순회: 배열의 모든 요소를 한 번씩 순회하면서 조건을 확인합니다.

요약:

• filter()는 배열의 각 요소에 대해 주어진 조건을 검사한 후, 조건에 맞는 요소들로 새로운 배열을 반환하는 메서드입니다.
• 원본 배열은 변경되지 않고, 새로운 배열만 반환됩니다.
• 조건을 만족하지 않으면 빈 배열이 반환됩니다.

이를 통해 배열에서 원하는 데이터를 쉽게 추출하거나 필터링할 수 있습니다.