[자바스크립트] 배열(array) filter 함수의 개념및 사용법

 

 

 

 

 

 

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기

---

 

배열 reduce() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/256

[자바스크립트] 배열(array) reduce 함수의 개념및 활용도 높은 사용법

 

 

배열 join() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/254

[자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법

 

 

배열 map(), forEach() 인기 있는 메서드 사용법에 대해 알아보기

https://cometruedream.tistory.com/253

[자바스크립트] 배열(array)을 처리하는 인기있는 메소드 map(), forEach() 개념과 차이점

 

 

활용가치가 좋은 every(), some() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/250

[자바스크립트] 활용가치가 좋은 내장함수와 every(), some() 함수의 개념 및 활용법

 

 

🤷‍♂️ filter 함수란?

---

javascript의 filter() 함수는 배열을 순회하면서 특정 조건을 만족하는 요소만 추출하여 새로운 배열을 반환하는 함수입니다.

filter() 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고 콜백 함수의 반환 값이 true인 요소만 모아서 새로운 배열을 반환합니다.

 

filter() 메서드에 대해 자세히 이해하면

💡 배열의 자료구조에서 특정 조건을 만족하는 값만 새로운 배열로 반환받기를 원할 때 효율적으로 사용할 수 있는 배열 내장함수입니다.

 

300x250

 

🤷‍♂️ filter() 함수의 예제

---

다음과 같은 배열이 있습니다.

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

다음과 같은 배열에서 짝수의 결과값만 도출하고 싶을 때 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]

 

화살표 함수로 수정하고 코드를 더 간결하게 줄일 수 있습니다.

 

 

반대로 홀수값만 도출하고 싶을 때도 filter() 함수를 사용할 수 있습니다.

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

console.log(evenNumbers); 
//결과값 [1, 3, 5, 7, 9]

 

화살표 함수와 한 줄로 코드를 간결하게 구현해서 홀수에 만족하는 요소만 추출해서 새로운 배열로 반환합니다. 

 

🤷‍♂️ filter() 함수의 예제 2

---

주어진 배열에서 5 이상의 숫자만 추출하기

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

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

 

filter() 함수를 이용해서 간결한 코드로 원하는 결과 값을 도출할 수 있습니다.

 

🤷‍♂️ filter() 함수의 예제 3

---

조금 더 난이도를 높여서 객체 배열에 age 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
    }
]

 

객체 배열에서 age 18 이상인 객체만 찾아서 새로운 객체 배열로 반환합니다.

 

 

 

🤷‍♂️ 마지막으로

---

위에 예제들을 통해서 filter() 함수를 사용해서 원하는 배열로 필터링해서 사용할 수 있습니다.

filter() 함수를 잘 활용하면 복잡하고 성능에 안 좋은 for문, 반복문 없이도 간결하고 원하는 조건으로 원하는 결과값만 추출할 수 있습니다.

자바스크립트에 배열 내장함수를 잘 활용하면 코드를 간소화하고 성능측면에서도 좋은 코드를 작성할 수 있습니다.

 

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리