[JavaScript] filter 사용하기

filter함수는 명칭과 같이 콜백함수의 조건에 해당하는 모든 요소가 있는 새로운 배열을 반환해줍니다.

이런 기능을 하는 filter함수는 배열이나 JSON 객체내의 조건에 해당하는 값만을 추출할 때 유용하게 사용됩니다.

 

📌 filter 함수

filter함수는 javascript array에서 많이 사용되는 함수로 반복문의 역할을 수행합니다. filter함수에서는 반복시킨 배열에서 순차적으로 값에 접근합니다.

 

const newArr = arr.filter(( elemnent, index, array ) => { ··· });

 

filter함수의 매개변수로는 콜백함수가 들어갑니다. 콜백함수에서는 3개의 매개변수를 사용할 수 있습니다.

element: 현재 순회하는 array의 요소값

index : 그 요소의 인덱스 값

array : 사용되는 배열 객체

 

명확한 이해를 위해 예제를 보도록 하겠습니다. 

const arr = ['a', 'b', 'c', 'd'];

const newArr = arr.filter((element, index, array) => {
    console.log(element);
    console.log(index);
    console.log(array);    
})

결과는 다음과 같습니다.

 

다음 예제를 보겠습니다.

const arr = [1, 2, 3, 4, 5];

const newArr = arr.filter((element, index) => {
  return element < 3;
})
console.log(newArr);  // [1, 2]

위 예제에서는 배열에서 3보다 작은 값만을 추출해 새로운 배열을 생성합니다.

 

코드가 한 줄일 경우 { } 중괄호와 return을 생략할 수 있습니다.

아래 코드는 위 예제와 동일한 의미입니다.

const arr = [1, 2, 3, 4, 5];

const newArr = arr.filter((element, index) => element < 3)
console.log(newArr);  // [1, 2]

 

📌 filter 함수 사용시 참고사항

 

• filter는 순회하는 도중에 추가된 요소는 접근하지 않습니다. 반면 순회하는 도중 수정이 일어나면 변경된 값이 콜백함수에 전달되고 삭제된 요소는 접근하지 않습니다.
• filter는 중복값을 제거해주지 않습니다. (중복제거를 위해서 따로 Set을 사용할 수 있습니다.)

 

 

---

참고자료

https://aljjabaegi.tistory.com/312

https://programmer93.tistory.com/65