JavaScript filter()와 includes()를 활용한 배열 필터링 방법

JavaScript에서 배열을 다룰 때 특정 요소를 제외한 새로운 배열을 만들어야 하는 경우가 자주 있습니다. 이때 filter() 메서드와 includes() 메서드를 함께 사용하면 간단하고 효율적으로 배열을 필터링할 수 있습니다.

기본 개념

filter()는 주어진 조건(콜백 함수)을 통과하는 요소들만 모아 새로운 배열을 반환합니다. includes()는 배열에 특정 값이 포함되어 있는지 확인하여 true 또는 false를 반환합니다. 두 메서드를 조합하면 '제외하고 싶은 목록에 포함되지 않은 요소만 남기는' 필터링이 가능합니다.

먼저 다음과 같은 이름 배열이 있다고 가정해 보겠습니다.

const names = ['John', 'David', 'Mike', 'Sam', 'Carol', 'Bob'];

이제 'David', 'Mike', 'Sam', 'Carol'을 제외한 나머지 요소만 남기도록 배열을 필터링해 보겠습니다.

var nameObject = names.filter((allNameObject) => !['David', 'Mike', 'Sam', 'Carol'].includes(allNameObject));

여기서 콜백 함수 앞의 느낌표(!)는 논리 부정 연산자입니다. 즉, 제외 목록에 포함되지 않은 요소만 filter()를 통과하게 됩니다.

전체 예제 코드

const names = ['John', 'David', 'Mike', 'Sam', 'Carol', 'Bob'];
console.log("원본 배열:");
console.log(names);

var nameObject = names.filter((allNameObject) => !['David', 'Mike', 'Sam', 'Carol'].includes(allNameObject));

console.log("필터링 후:");
console.log(nameObject);

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다.

node fileName.js

여기서는 파일 이름이 demo65.js라고 가정하겠습니다.

node demo65.js

실행 결과

프로그램을 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo65.js
원본 배열:
[ 'John', 'David', 'Mike', 'Sam', 'Carol', 'Bob' ]
필터링 후:
[ 'John', 'Bob' ]

코드 설명

실행 결과를 보면 원본 배열에서 'David', 'Mike', 'Sam', 'Carol' 네 개의 요소가 제거되고 'John'과 'Bob'만 남은 것을 알 수 있습니다.

names.filter(...): names 배열의 각 요소를 순회하며 콜백 함수를 호출합니다.
['David', 'Mike', 'Sam', 'Carol'].includes(allNameObject): 현재 순회 중인 요소가 제외 목록에 있는지 검사합니다.
!(...): 제외 목록에 없는 요소(true)만 새 배열에 포함시킵니다.

참고로 filter()와 includes()는 모두 원본 배열을 변경하지 않고 새로운 배열을 반환하기 때문에, 기존 데이터를 안전하게 유지하면서 작업할 수 있다는 장점이 있습니다.