[JS #2] 자바스크립트 배열 메서드 2: filter, reject, every, some

자바스크립트 배열 메서드인 forEach 와 map 을 정리한 이전글에 이어서 이번 글에서는 filter, reject(lodash), every, some 에 대해 이야기해보려고 한다.


filter 메서드는 map 과 마찬가지로 첫 번째 인자로 콜백 함수(콜백 함수의 첫 번째 인자는 순회하는 배열의 값(value), 두 번째 인자는 그 값의 인덱스(index), 세 번째 인자는 배열 자체(array)이다)를 받는데 이 콜백함수의 return 값은 Boolean, 즉 true 혹은 false 가 되어야 한다. 그리고 그 return 값이 true 일 경우, 그 배열의 값은 최종적으로 return 되는 배열에 포함되고 false 일 경우에는 제외된다.

  • 예시 코드

const data = [1, 2, 3, 4, 5]

const oddNumber = data.filter(val => { return val % 2 != 0 });

console.log(oddNumber); // [1, 3, 5]

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

코드에서 보이는 것처럼 filter 메서드의 인자로 전달된 함수는 조건자함수임을 알 수 있다. 또한 filter 는 메서드를 호출한 원래 배열을 변화시키지 않는다(filter() does not mutate the array on which it is called).

사용예는 1) 클라이언트로 부터 전달받은 검색조건에 따라 필터가 적용된 쿼리결과를 return 하고 싶을 때나 2) null 값이나 특정 자료형을 걸러내고 싶을 때 사용하면 좋다(lodash 의 isNil, isNull, isInteger 등과 함께 사용하면 굳).


every 와 some 메서드는 배열을 순회하면서 특정 조건을 배열의 값들이 만족시키는지 검사하는 메서드로서 호출한 배열이 결론적으로 조건을 만족시키는지(true), 만족시키지 못하는지(false)를 알려준다. every 와 some 의 차이는 every 가 배열의 모든 값이 조건을 만족해야, some 은 일부만 만족해도 true 를 return 한다.

  • 예시 코드

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

const isAllOdd = data.every(val => { return val % 2 != 0 });

console.log(isAllOdd); // false

const isSomeOdd = data.some(val => { return val % 2 != 0 });

console.log(isSomeOdd); // true


추가 1.

reject 는 filter 와 정확하게 반대로 작동한다 — 조건자 함수의 결과가 false 인 배열의 값들이 들어간 새로운 배열을 return (reject 는 자바스크립트에 내장된 메서드가 아닌 lodash 혹은 underscore 라이브러리로 사용 가능)

추가 2.

filter 메서드는 희소배열의 경우, 빈 원소를 건너뛰기 때문에 return 되는 배열에는 빈 원소가 없다(때문에 빈 원소를 제거하고 싶을 때 쓰면 굳)

추가 3.

every, some 메서드는 반환 값이 결정되면 원소 순회를 중단한다. 즉, every 메서드는 false 를 만족하는 첫 번째 원소를 만나면 순회를 중단하고 결과 값으로 false 를 return 한다(some 은 완전 반대 — true 를 만족하는 첫번재 원소를 만나면 순회를 중단하고 결과값으로 true 를 return)

추가 4.

Array.prototype.filter 가 어떻게 구현되었는지 확인해보려고 했지만, 아직 내부를 확인해보지 못했다. 우회적인 방법으로 lodash 의 filter 메서드 구현로직을 참고해보니 “빈배열을 하나 선언해서 거기에 조건을 충족시키는 value 들을 push 한 다음에 return 하는 것으로 확인”했다 — function filter()function arrayFilter() 를 유심히 살펴보면 알 수 있다