자바스크립트 배열 filter 함수를 예제를 통해서 알아보자. array.filter

JavaScript의 Array.filter 함수는 배열의 요소 중 특정 조건을 만족하는 요소만 추출하여 새로운 배열을 생성하는 함수입니다. 이 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 콜백 함수의 반환 값이 true인 요소만 모아 새로운 배열을 만듭니다.

예를 들어, 다음과 같은 배열이 있다고 가정해봅시다.

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

이 배열에서 짝수만 추출하고 싶다면, 다음과 같이 Array.filter 함수를 사용할 수 있습니다.

const evenNumbers = numbers.filter(function (number) {
  return number % 2 === 0;
});

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

또는 화살표 함수를 사용하여 더 간결하게 작성할 수도 있습니다.

const evenNumbers = numbers.filter(number => number % 2 === 0);

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

이처럼 Array.filter 함수를 사용하면 원하는 조건을 만족하는 요소만 추출하여 새로운 배열을 생성할 수 있습니다. 이 과정에서 원래의 배열은 변경되지 않습니다.

더 많은 예제

예제 1: 배열에서 5보다 큰 숫자만 추출하기

const numbers = [1, 5, 10, 15, 20];
const greaterThanFive = numbers.filter(number => number > 5);

console.log(greaterThanFive); // [10, 15, 20]

예제 2: 배열에서 길이가 4 이상인 문자열만 추출하기

const words = ["apple", "banana", "cherry", "date", "fig", "grape"];
const longerThanFour = words.filter(word => word.length >= 4);

console.log(longerThanFour); // ["apple", "banana", "cherry", "grape"]

예제 3: 객체 배열에서 나이가 18 이상인 사용자만 추출하기

const users = [
  { name: "Kim", age: 16 },
  { name: "Lee", age: 25 },
  { name: "Park", age: 30 },
  { name: "Choi", age: 14 },
  { name: "Jeon", age: 19 },
];

const adults = users.filter(user => user.age >= 18);

console.log(adults);
// [
//   { name: "Lee", age: 25 },
//   { name: "Park", age: 30 },
//   { name: "Jeon", age: 19 },
// ]

이와 같이 Array.filter 함수는 다양한 조건에 맞는 요소만 새로운 배열로 생성하는 데 사용할 수 있습니다. 이 함수를 활용하면 복잡한 반복문 없이도 간결하게 원하는 조건을 만족하는 요소를 추출할 수 있습니다.