자바스크립트 Array filter 정의 및 사용법

 

 

자바스크립트의 filter() 메서드는 배열의 요소를 특정 조건에 따라 필터링하는 데 매우 유용합니다. 일반적으로 대량의 데이터에서 특정 조건을 만족하는 요소들만 선별해야 할 때, filter() 메서드를 사용합니다. 예를 들어, 학생 성적 데이터에서 합격한 학생들만 추출하거나, 특정 조건을 만족하는 상품 목록을 필터링하는 등의 작업에서 이 메서드를 활용할 수 있습니다. 이러한 작업은 데이터 분석, 검색 기능 구현, 그리고 다양한 데이터 처리 시나리오에서 필수적입니다. 본 글에서는 자바스크립트의 filter() 메서드 정의와 사용법, 그리고 실전 예제를 통해 이 메서드의 활용법을 자세히 살펴보겠습니다.

 

자바스크립트 Array Filter 정의 및 사용법

자바스크립트의 filter() 메서드는 배열의 각 요소를 검사하여 조건에 맞는 요소들로 새로운 배열을 만드는 데 사용됩니다. 이 메서드는 원래 배열을 변경하지 않고, 주어진 조건을 만족하는 요소들로만 구성된 새로운 배열을 반환합니다.

filter() 메서드 정의

filter() 메서드는 콜백 함수를 인수로 받습니다. 이 콜백 함수는 배열의 각 요소에 대해 호출되며, true 또는 false 값을 반환합니다. 이 반환 값이 true인 요소들은 새 배열에 포함됩니다.

 

👉filter() 메서드 문법

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

 

 

• callback: 배열의 각 요소에 대해 실행할 함수로, 해당 함수는 세 가지 인수를 가질 수 있습니다.
  • element: 현재 처리 중인 요소.
  • index (Optional): 현재 처리 중인 요소의 인덱스.
  • array (Optional): filter가 호출된 배열 자체.
• thisArg (Optional): callback을 실행할 때 this로 사용할 값.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

👉filter() 메서드 사용법 예제

 

1.기본 사용 예제

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);

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

 

짝수만 남기는 예제이다.

실제 개발에서도 filter란 이름 답게 내가 원하는 값들만 남기기 위해 filter를 많이 사용한다.

 

2.객체 배열 필터링

const students = [
  { name: 'John', grade: 85 },
  { name: 'Jane', grade: 93 },
  { name: 'Jim', grade: 58 },
  { name: 'Jack', grade: 75 }
];

const passingStudents = students.filter(student => student.grade >= 60);

console.log(passingStudents);
// [{ name: 'John', grade: 85 }, { name: 'Jane', grade: 93 }, { name: 'Jack', grade: 75 }]

이 예제에서는 학생 객체 배열에서 합격한 학생들만 필터링하여 passingStudents 배열에 저장합니다.

 

3.thisArg 사용 예제

const obj = {
  minGrade: 70,
  isPassingGrade(grade) {
    return grade >= this.minGrade;
  }
};

const grades = [65, 70, 75, 80, 85];
const passingGrades = grades.filter(function(grade) {
  return this.isPassingGrade(grade);
}, obj);

console.log(passingGrades); // [70, 75, 80, 85]

이 예제에서는 thisArg로 obj를 사용하여 obj.isPassingGrade 메서드를 filter 콜백 함수 내에서 사용합니다.

 

 

주의사항

• 원본 배열 불변성: filter() 메서드는 원본 배열을 변경하지 않고, 새로운 배열을 반환합니다.
• 콜백 함수의 반환 값: 콜백 함수는 반드시 boolean 값을 반환해야 하며, true인 경우에만 새 배열에 포함됩니다.

 

 

자바스크립트의 filter() 메서드는 배열에서 조건에 맞는 요소들로만 구성된 새로운 배열을 만드는 데 유용합니다. 다양한 조건을 설정하고 필터링할 수 있어 데이터 처리와 분석에 매우 효과적입니다. 

실제로 개발할 때 많이 사용하는 메서드이니 이번 글을 통해서 익숙해지세요.

 

 

줄바꿈

CSS와 JavaScript에서 문자열 줄 바꿈 구현하는 방법

 

바텀시트 구현하기

 

React에서 바텀시트(Bottom Sheet) 구현하기: 상세 가이드

객체를 배열로 바꾸는 방법

 

객체를 배열로 바꾸는 방법 feat.JavaScript