함께 성장하는 프로독학러
배열의 filter 메서드 본문
안녕하세요, 프로독학러 입니다.
이번 포스팅에서는 배열의 filter 메서드에 대해서 알아보도록 하겠습니다.
filter 메서드는 메서드의 이름과 같이 배열의 원소들 중 조건에 만족하는 원소들을 필터링 하는 메서드 입니다.
표현식부터 살펴보겠습니다.
var new_array = arr.filter(callback[, thisArg])
filter 메서드의 인자로는 콜백함수와 생략가능한 thisArg 값이 들어옵니다.
콜백함수는 기존의 배열에서 필터링을 할 수 있도록 하는 함수입니다.
이 함수의 인수는 element, index, array 입니다. 각각 배열의 원소, 해당 원소의 index값, filter 메서드를 행하는 대상 배열입니다.
세 인수 중 index와 array는 생략이 가능합니다.
filter 메서드의 두 번째 인자는 생략이 가능하며, 콜백 함수를 실행할 때 this로 사용할 객체를 의미합니다.
filter메서드는 콜백함수를 통해 필터링된 요소들로 이루어진 새로운 배열을 리턴값으로 가집니다.
이해를 돕기위해 아래의 예제를 보겠습니다.
1 2 | var arr = [1, 3, 5, 7, 9, 10]; console.log(arr.filter((e)=>e%5==0)); // (2) [5, 10] | cs |
변수 arr에 배열 [1, 3, 5, 7, 9, 10] 을 할당했습니다.
그리고 두 번째 줄에서 filter메서드를 이용해 5로 나누었을 때 나머지 값이 0인 원소들을 새로운 배열로 리턴했습니다.
따라서 콘솔에 찍히는 값은 5와 10을 원소로 하는 길이 2짜리 배열입니다.
*위의 예제에서 filter 메서드를 사용할 때 ES6의 arrow function 을 이용했습니다. arrow function에 대해서 알아보고 싶으신 분은 아래의 링크를 참조하세요.
*아래는 arrow function을 이용하지 않은 코드입니다.
1 2 3 4 5 | var arr = [1, 3, 5, 7, 9, 10]; console.log(arr.filter(function(e){ return e%5==0 })); // (2) [5, 10] | cs |
또한 filter 메서드는 필터링 된 값이 없으면 undefined를 리턴하는 것이 아닌 빈 배열을 리턴합니다.
1 2 3 4 5 | var arr = [1, 3, 5, 7, 9, 10]; console.log(arr.filter(function(e){ return e%6==0 })); // [] | cs |
여기까지 배열을 필터링해 새로운 배열을 리턴하는 filter메서드에 대해서 알아보았습니다.
감사합니다.
** 참고자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)
'Programming > javascript' 카테고리의 다른 글
배열과 문자열의 slice 메서드 (0) | 2018.04.14 |
---|---|
배열의 원소를 제거하는, splice 메서드 (0) | 2018.04.12 |
배열과 문자열의 indexOf 메서드 (0) | 2018.04.09 |
배열의 sort 메서드 (1) | 2018.04.09 |
자바스크립트, this가 무엇이냐 (1) | 2018.04.05 |