배열의 filter 메서드

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 배열의 filter 메서드에 대해서 알아보도록 하겠습니다.

filter 메서드는 메서드의 이름과 같이 배열의 원소들 중 조건에 만족하는 원소들을 필터링 하는 메서드 입니다.

표현식부터 살펴보겠습니다.

var new_array = arr.filter(callback[, thisArg])

filter 메서드의 인자로는 콜백함수와 생략가능한 thisArg 값이 들어옵니다.

콜백함수는 기존의 배열에서 필터링을 할 수 있도록 하는 함수입니다.

이 함수의 인수는 element, index, array 입니다. 각각 배열의 원소, 해당 원소의 index값, filter 메서드를 행하는 대상 배열입니다.

세 인수 중 index와 array는 생략이 가능합니다.

filter 메서드의 두 번째 인자는 생략이 가능하며, 콜백 함수를 실행할 때 this로 사용할 객체를 의미합니다.

filter메서드는 콜백함수를 통해 필터링된 요소들로 이루어진 새로운 배열을 리턴값으로 가집니다.

이해를 돕기위해 아래의 예제를 보겠습니다.

var arr = [1, 3, 5, 7, 9, 10];
console.log(arr.filter((e)=>e%5==0)); // (2) [5, 10]

변수 arr에 배열 [1, 3, 5, 7, 9, 10] 을 할당했습니다.

그리고 두 번째 줄에서 filter메서드를 이용해 5로 나누었을 때 나머지 값이 0인 원소들을 새로운 배열로 리턴했습니다.

따라서 콘솔에 찍히는 값은 5와 10을 원소로 하는 길이 2짜리 배열입니다.

*위의 예제에서 filter 메서드를 사용할 때 ES6의 arrow function 을 이용했습니다. arrow function에 대해서 알아보고 싶으신 분은 아래의 링크를 참조하세요.

<arrow function>

*아래는 arrow function을 이용하지 않은 코드입니다.

var arr = [1, 3, 5, 7, 9, 10];
console.log(arr.filter(function(e){
                            return e%5==0
                        }));
// (2) [5, 10]

또한 filter 메서드는 필터링 된 값이 없으면 undefined를 리턴하는 것이 아닌 빈 배열을 리턴합니다.

var arr = [1, 3, 5, 7, 9, 10];
console.log(arr.filter(function(e){
                            return e%6==0
                        }));
// []

여기까지 배열을 필터링해 새로운 배열을 리턴하는 filter메서드에 대해서 알아보았습니다.

감사합니다.

** 참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)