JavaScript filter()메서드

JavaScript filter() 메서드에 대해서

filter() 메서드는 무엇일까?

filter( ) 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 그래서 기존 배열은 유지되고 테스트에 통과한 요소들을 모아둔 새로운 배열이 만들어지는 것이다.

기본 구조는 아래와 같다.

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

callback 자리엔 각요소를 시험할 함수가 들어간다. true를 반환하면 요소를 유지하고, false를 반환하면 버린다.

element, index(optional), array(optional), thisArg(optional) 이렇게 매개변수는 3가지가 있다.

• element는 처리할 현재 요소
• index는 처리할 현재 요소의 인덱스
• array는 filter를 호출한 배열
• thisArg는 callback을 실행할 때 this로 사용하는 값

테스트 통과한 요소들은 새로운 배열로 만들어지고 만약에 모든 요소들이 통과하지 못하면 빈배열로 반환한다.

let array = [1,3,5,7,9]; 
let newArray = array.filter((x)=> x % 2 == 0); 

console.log(newArray);

//[]

array 안에 있는 숫자들은 전부 홀수인데 filter를 사용해 짝수인 숫자만 통과하도록 했다. 그 결과 콘솔로 찍어봤을 때 통과한 요소들이 없어 빈 배열로 반환했다는 것을 볼 수 있다.

thisArg 매개변수는 callback 함수 내에서 this키워드로 참조될 객체를 지정하는데 사용된다. 예시로 filter( ) 함수를 사용하여 객체 배열에서 특정 조건을 만족하는 요소를 필터링할 경우 callback 함수 내에서 this를 사용하여 객체의 프로퍼티에 접근할 수 있다. 이때 thisArg매개변수를 사용해 this로 참조될 객체를 지정하면 된다.

const person1 = {
  name: 'Alice',
  age: 30
};

const person2 = {
  name: 'Bob',
  age: 25
};

const people = [person1, person2];

function filterByAge(age) {
  return this.age === age;
}

const result = people.filter(filterByAge, person1);
console.log(result); // [{ name: 'Alice', age: 30 }]

filterByAge( ) 함수는 this.age를 사용하여 현재 처리 중인 객체의 age프로퍼티를 참조한다.

→ person1를 this로 받았기에 filterByAge( ) 함수 안에 있는 this.age는 person1.age를 의미한다.

그래서 person1.age === age 인 경우 true로 인식하고 새로운 배열을 반환한다. person1의 age는 30이므로 people ( [ person1, person2 ] ) 안에 있는 age와 같은지 비교한다.

30 === 30(person1) true

30 === 25(person2) false

person1에 들어 있는 요소들을 새로운 배열로 반환하는 것을 볼 수 있다.

thisArg 매개변수를 사용하지 않으면 callback함수 내에서 this는 전역 객체로 참조가 된다.

*filter의 thisArg를 사용할 땐 화살표 함수를 사용하면 안된다. 왜냐하면 화살표 함수는 this를 바인딩하지 않기 때문이다.

filter()의 예제

모든 작은 값 걸러내기

let array = [1,2,3,4,5,6,7,8,9,10];
let newArray = array.filter((x)=> x <= 5);

console.log(newArray);
//[1, 2, 3, 4, 5]

array에 들어있는 요소들이 filter 함수 안에 들어가서 각각의 요소가 5보다 작거나 같은지 비교하고 true이면 반환 false면 반환하지 않는다.

해당 값 삭제하기

let array = [1,2,3,4,5,6,7,8,9,10];
let removeArray = array.filter((x)=> x % 3 !== 0 && x % 2 !== 0 );
console.log(removeArray);
//[1, 5, 7]

2와 3의 배수인 요소를 걸러내도록 filter에 조건을 걸었다.

filter ( )함수에 대한 주관적인 생각

아직 걸음마를 떼는 초보자지만 코드를 작성하면서 느낀 건 filter함수로 if대신 사용하기 좋았고 알아서 요소 하나하나 비교해서 새로운 배열로 반환해 주는 게 참 편했다. 그리고 thisArg부분이 이해가 안 가서 이것저것 찾아보는데 찾으면서 느끼는 건 잘만 사용하면 좋을 거 같은데 아직 어렵다고 느껴진다. 그래서 thisArg를 사용해 코드 짜보는 걸 연습해야 할 것 같았다.

 

!노션에 정리했는데 가독성 좋게 보실거면 링크에 들어가셔서 보셔도 됩니다!