[JavaScript] filter() 함수 - 완벽 정리 및 사용 예제

JavaScript filter() 함수 - 완벽 정리 및 사용 예제

자바스크립트 Array.prototype.filter() 완벽 정리

안녕하세요, Array.prototype.filter()는 배열을 다룰 때 초보자부터 숙련자까지 모두 애용하는 강력한 도구인데요, 처음 보면 조금 헷갈릴 수 있지만 이 포스팅을 끝까지 읽으면 쉽게 이해하고 활용할 수 있을 거예요. 오늘은 filter() 함수가 무엇인지, 어떻게 사용하는지, 그리고 실습 예제와 결과를 통해 자세히 알아볼게요.

---

Array.prototype.filter()란?

Array.prototype.filter()는 JavaScript에서 배열의 요소 중 특정 조건을 만족하는 것들만 골라내어 새로운 배열로 반환해주는 메서드예요. 쉽게 말해, "배열에서 내가 원하는 것만 쏙쏙 뽑아서 새 배열로 만들어줘!"라고 명령하는 함수죠. 원본 배열은 그대로 두고, 필터링된 결과만 새로 만들어진다는 점에서 안전하고 편리해요. 웹 프론트엔드 개발에서는 검색 기능이나 데이터 정제할 때 자주 사용된답니다.

예를 들어, "숫자 배열에서 짝수만 뽑고 싶다"거나 "이름 목록에서 특정 글자가 포함된 것만 보고 싶다" 할 때 filter()가 딱 맞아요!

 

---

함수의 기본 구조와 파라미터

filter() 함수는 다음과 같은 형태로 사용됩니다:

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

조금 어려워 보이죠? 하나씩 천천히 풀어볼게요.

• callback: 각 배열 요소에 적용할 함수로, 조건을 판단해요.
  • element: 현재 처리 중인 배열의 요소 (필수).
  • index: 현재 요소의 인덱스 번호 (선택 사항).
  • array: 원본 배열 전체 (선택 사항, 드물게 사용).
• thisArg: callback 함수에서 this로 사용할 값 (선택 사항, 거의 안 씀).

초보자라면 element만 사용해도 충분하고, 나중에 필요하면 index를 추가로 활용할 수 있어요. 중요한 건 callback 함수가 true를 반환하면 그 요소가 새 배열에 포함되고, false면 제외된다는 점이에요.

 

---

예제

이제 실제로 filter()가 어떻게 작동하는지 예제를 통해 배워볼게요. 간단한 예제부터 시작해서 점점 실용적인 사례로 넘어가 보겠습니다!

예제 1: 짝수만 골라내기

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

const evens = numbers.filter(num => num % 2 === 0);

 

console.log(evens); // 결과: [2, 4, 6]

console.log(numbers); // 원본: [1, 2, 3, 4, 5, 6]

• 설명: numbers 배열에서 각 요소(num)를 확인해서 2로 나눴을 때 나머지가 0인 경우(짝수)만 새 배열 evens에 포함했어요. 원본 배열은 그대로 남아 있죠.

예제 2: 긴 이름만 뽑아내기

const names = ["지민", "태형", "정국", "진"];

const longNames = names.filter(name => name.length > 1);

 

console.log(longNames); // 결과: ["지민", "태형", "정국"]

• 설명: 이름의 길이(length)가 1보다 큰 경우만 골라냈어요. "진"은 한 글자라 제외되고, 나머지 이름들이 새 배열에 들어갔습니다.

예제 3: 인덱스를 활용해 홀수 번째 요소 뽑기

const fruits = ["사과", "바나나", "오렌지", "망고"];

const oddIndexed = fruits.filter((fruit, index) => index % 2 === 1);

 

console.log(oddIndexed); // 결과: ["바나나", "망고"]

• 설명: index를 사용해서 홀수 번째 위치(1, 3)에 있는 요소만 뽑았어요. index는 0부터 시작하니까 "사과(0)"와 "오렌지(2)"는 제외된 거예요.

---

HTML과 결합

만약 웹 페이지에서 필터링된 결과를 표시하고 싶다면, HTML과 결합할 수도 있어요. 예를 들어:

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

const evens = numbers.filter(num => num % 2 === 0);

document.querySelector("ul").innerHTML = evens.map(num => `<li>${num}</li>`).join("");

 

HTML 결과:

<ul>

         <li>2</li>

         <li>4</li>

         <li>6</li>

</ul>

 

---

주의할 점

1. 조건은 true/false로 판단: filter()는 callback 함수가 true를 반환할 때만 요소를 포함해요. 조건을 잘 설정해야 원하는 결과가 나옵니다.
   const wrong = [1, 2, 3].filter(num => num * 2); // 잘못된 예: [1, 2, 3]

   const right = [1, 2, 3].filter(num => num > 2); // 올바른 예: [3]
2. 원본 배열은 바뀌지 않아요: filter()는 새 배열을 반환할 뿐, 원래 배열은 그대로예요. 수정하려면 결과를 변수에 저장해서 사용하세요.
3. 빈 배열도 가능: 조건에 맞는 요소가 없으면 빈 배열([])이 반환돼요. 에러가 나는 게 아니니 안심하세요!

 

---

마무리

이제 Array.prototype.filter()에 대해 확실히 감이 잡히셨죠? 배열에서 원하는 데이터만 뽑아낼 때 이만큼 유용한 함수도 없어요. 검색 기능, 데이터 필터링 등 실무에서도 자주 쓰이니까 이번 기회에 꼭 익혀두세요. 연습 삼아 여러 조건을 만들어서 테스트해보는 것도 추천드립니다! 더 궁금한 점이나 추가 예제가 필요하시면 댓글로 남겨주세요. 다음 포스팅에서도 초보자를 위한 유익한 JavaScript 팁을 가져올게요. 즐거운 코딩 되세요!

 

 

 

 

[Javascript] Array.prototype.map 사용법 map() 함수 완벽 정리 | 자바스크립트
https://tkpark86.tistory.com/24

[Javascript] Array.prototype.map 사용법 map() 함수 완벽 정리 | 자바스크립트

 

 

 

[Javascript] 문자열 자르기 substr(), substring(), slice() 비교 자바스크립트 함수
https://tkpark86.tistory.com/23

[Javascript] 문자열 자르기 substr(), substring(), slice() 비교 자바스크립트 함수

 

 

 

 

 

 

 

 

#JavaScript #filter() #함수 #완벽정리 #사용예제 #자바스크립트 #예제 #HTML #배열 #Arrary