자바스크립트 filter() 함수 사용법: index, 조건 여러개, 중복 제거, map 차이

자바스크립트 filter() 함수는, 기존 배열에서 특정 조건에 부합하는 요소들만 필터링한 새 배열을 얻을 수 있는 필수 메서드입니다. 이번 포스팅에서는 filter() 함수 사용법과 index 매개변수, 조건 여러개 활용, 중복 제거 방법, includes() 메서드 활용 그리고 map(), find() 메서드와의 차이에 대해 알아보겠습니다.

1. filter() 함수 기초와 index 매개변수

자바스크립트에서 filter() 메서드는 배열의 요소 중 특정 조건을 만족하는 요소만 추출하여 새 배열을 만드는 메서드입니다.

기본 구문은 아래와 같습니다.

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

filter() 메서드는 콜백 함수를 매개변수로 받고, 이 콜백 함수는 배열의 각 요소에 대해 실행되어 true 또는 false 값을 반환합니다. 이 때, 콜백 함수가 true 값을 반환하는 요소로만 구성된 새 배열을 반환합니다.

간단한 예제로 함수 사용법을 알아보겠습니다.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
console.log(evenNumbers); // Output: [2, 4]

예제에서는 number => number % 2 === 0 라는 화살표 함수를 콜백 함수로 받았습니다. 그리고 이 함수를 적용했을 때, true 값을 반환하는 2, 4 만으로 이루어진 새 배열을 리턴한 것을 알 수 있습니다.

콜백 함수는 forEach(), map() 함수와 마찬가지로, 선택적 매개변수 2가지를 사용할 수 있습니다. 아래 예제에서 index, array로 이름 지은 2번째, 3번째 매개변수이며, 각각 현재 요소의 인덱스와 배열 자체에 접근하기 위해 사용합니다. 파라미터 이름은 자유롭게 정할 수 있습니다.

const numbers = [10, 20, 30, 40, 50];
 
numbers.filter((number, index, array) => {
    return index % 2 === 0
});
 
// Output: [10, 30, 50]

예제의 filter() 함수는 index 파라미터로 현재 요소의 인덱스값을 기준 삼았고, 0, 2, 4번째 위치한 요소들만 리턴되는 조건을 정의했습니다.

2. 조건 여러개 활용하기

조건 여러개를 활용하는 방법은 2가지로 생각해볼 수 있습니다.

첫번째는 비교 연산자 &&를 활용해서 여러 조건을 설정하는 것입니다. 다음은 3의 배수이면서 5보다 큰 숫자, 즉 2가지 조건을 검사합니다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(number => number % 3 === 0 && number > 5);
 
console.log(filteredNumbers); // Output: [6, 9]

두번째는 여러개의 filter 함수를 체이닝해서 사용하는 것입니다. 다음과 같습니다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(number => number % 3 === 0).filter(number => number > 5);
 
console.log(filteredNumbers); // Output: [6, 9]

3. filter()를 활용한 중복 제거

filter() 함수를 활용하면 배열의 중복된 요소를 제거하는 작업도 간단하게 해결할 수 있습니다.

예제 코드부터 보겠습니다.

const array = [1, 2, 3, 2, 4, 3, 5, 1];
 
const uniqueArray = array.filter((element, index, array) => {
  return array.indexOf(element) === index;
});
 
console.log(uniqueArray);
// Output: [1, 2, 3, 4, 5]

위 예제의 콜백 함수는 섹션 1에서 보았던 index, array 파라미터를 모두 활용해서 알고리즘을 구성합니다.

Array.indexOf(element) 메서드는 배열에서 element 값과 일치하는 가장 작은 인덱스를 반환합니다. (존재하지 않으면 -1을 반환합니다)

만약, 현재 요소가 배열에 유일한 값이라면 array.indexOf() 메서드의 리턴값과 현재 요소의 index 값은 같습니다. 반대로, 콜백 함수의 리턴값이 false라면, 해당 값은 둘 이상 존재한다는 의미이며, 콜백 함수에 의해 걸러집니다.

4. includes() 활용한 콜백 함수 정의하기

String.includes(string) 메서드는 해당 문자열에 string 값이 포항되어 있는지 여부를 반환합니다. filter() 메서드와 함께 사용하면, 문자열 배열에서 특정한 부분 문자열을 포함하는 요소만 골라내기에 적합한 메서드입니다.

간단한 예제로 살펴보겠습니다.

const subjects = ["기초 영문법", "기초 중국어", "중급 일본어", "고급 프랑스어", "기초 화성학"]
 
const basics = subjects.filter(subject => subject.includes("기초"))
 
console.log(basics)
// Output: [ '기초 영문법', '기초 중국어', '기초 화성학' ]

위 예제에서 includes 메서드는 "기초" 문자열을 포함한 과목들에 대해서만 true 값을 반환합니다. 이에 따라, 5개의 수강 과목 중 "기초" 문자열을 포함한 과목들만 필터링할 수 있었습니다.

이처럼, 다양한 경우에 두 메서드를 함께 사용해서 시너지를 얻을 수 있습니다.

5. map() 차이

filter() 함수는 forEach(), map(), reduce()와 함께 사용할 수 있는 배열 메서드입니다. 각각의 메서드는 저마다의 기능이 있기 때문에 차이점을 잘 알고 사용하는 것이 중요합니다.

각 메서드에 대한 더 자세한 설명은 해당 포스트에서 확인해주세요.

forEach(): 배열의 모든 요소를 순회하며 지정한 콜백 함수를 실행합니다.
map(): 각 요소에 콜백 함수를 적용하여, 콜백 함수의 리턴값들로 이루어진 새 배열을 반환합니다.
reduce(): 이전 값과 현재 값을 결합하는 함수를 적용하여 배열의 값을 하나의 값으로 합산합니다.

map() 함수와 가장 큰 차이는, 콜백 함수와 리턴하는 배열에 있습니다.

map() 함수의 콜백 함수는 새로운 요소를 리턴하며, 이 값들이 새 배열을 구성합니다. 그래서 배열의 길이는 항상 동일합니다. filter() 함수의 콜백 함수는 참거질을 리턴하며, 이 값에 의해 새 배열에 포함될 요소들이 결정됩니다. 새 배열의 길이는 항상 기존 배열보다 작거나 같으며 요소값은 변하지 않습니다.

6. find() 차이

Array.find(condition) 메서드는 배열에서 콜백 함수 condition에 정의된 조건에 맞는 요소를 찾아 값을 반환합니다. 여러 요소가 있다면, 가장 작은 인덱스의 요소 하나만 반환하고, 찾지 못하면 undefined를 반환합니다.

콜백 함수는 filter() 함수와 마찬가지로, 다음의 형태를 갖습니다.

const result = array.find(callback((element, index, array) => {
  // Condition logic
  // Return true or false
}))

사용 예제도 보겠습니다.

const numbers = [1, 2, 3, 4, 5, 6];
 
const firstEvenNumber = numbers.find((number) => {
  return number % 2 === 0;
});
 
console.log(firstEvenNumber);
// Output: 2

조건에 맞는 가장 작은 인덱스의 값 2를 반환했습니다.

이처럼, find() 메서드는 조건에 맞는 값을 찾는다는 점에서는 같지만, filter() 메서드와 다르게 하나의 값만 반환한다는 점을 기억하길 바랍니다.

7. 마치며

특정 배열에서 조건에 부합하는 요소들만 필터링할 수 있는 filter 함수에 대해 살펴보았습니다. 이 메서드를 단독으로 사용할 때도 강력하지만, 다른 배열 메서드와 함께 사용할 때 더 많은 가능성이 있는 만큼, 다양한 함수, 메서드들과 연계해서 사용하는 방법을 모색해보길 바랍니다.

map()reduce()