filter(필터): 배열의 성분이 불편해? / 자바스크립트 메서드

필터는 원하는 성분만 걸러준다.

filter

• filter 메서드란? :
  
  array(배열)의 성분을 필터링하여 새로운 배열을 만드는 메서드.
  인자는 콜백함수, 반환값은 배열이다.

 

• 기억할 것:
  
  기존의 배열성분을 수정하는 메서드가 아니다.
  필터링된 새로운 배열을 반환하는 메서드이다.

 

문법

            // 코드의 형태
            
            array.filter(callback함수);

            //새로 만들어진 배열을 저장할때

            const newArray = array.filter(callback함수);

        

 

 

filter 메서드의 인자

 

1. 인자는 callback 함수이다.

 

이미 정의되어 있는 함수명이나, 익명함수(arrow function)가 filter 메서드의 인자가 될 수 있다.

 

 

2. 콜백함수는 boolean값을 반환해야 한다.

 

true or false를 반환하는 함수가 사용되어야 한다..

 

 

3. 인자의 인자: 콜백함수의 인자는 배열의 성분이다.

 

콜백함수는 배열 성분의 인덱스 순서대로 인자로  받아들여 실행된다.

 

 

filter 메서드의 실행과정

        [2,4,6].filter((element) => element >2)

1. (element) => element >2 함수는 2,4,6을 차례대로 대입받는다.

 

2.차례대로 false, true, true 값을 반환한다.

 

3. filter 메서드가 새로운 배열을 만든다.

 

4. 콜백함수에의해 반환된 값이 true인 성분들만 새 배열에 저장된다.

*저장되는 순서는 기존의 배열과 일치한다.

 

5. [4, 6] 을 반환한다.

 

 

filter 메서드가 쓰이는 곳

기존의 배열을 유지하면서, 새로운 배열을 만들고 싶을 때 사용한다.

 

filter 메서드대신 쓰일 수 있는 것

기존의 배열을 아예 수정하고 싶다면 splice 메서드를 사용한다.

대상 배열의 성분별로 복잡한 작업을 할 때에는 map, reduce 또는 forEach를 사용하기도 한다.

 

 

 

읽어주셔서 감사합니다.

오류나 오탈자는 댓글을 통해 알려주세요.