1. 자바스크립트 배열 메서드 filter()
Array 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링한다. 즉 기존 배열을 변경하지 않고 기존 배열의 일부만 포함하는 새로운 배열을 반환하는 복사 메서드이다.
조건에 만족하는 요소가 없으면 빈 배열을 반환한다.
조건 함수는 true 혹은 false, 즉 boolean을 반환하는 함수이다.
filter(): 기존 배열의 요소 중 조건 함수에서true를 반환하는 요소들만 포함한 얕은 복사본 배열을 생성하는 배열 메서드.
그런데 주의해야할 것은 filter()의 반환값은 얕은 복사본 배열이므로 반환되는 배열의 요소가 참조 타입이라면 해당 값을 수정하였을 때 원본 배열에 영향을 미칠 수 있다는 점이다.
1-1. filter() 기본 문법
filter() 메서드의 기본 문법은 다음과 같다.
const newArray = array.filter(callback(element, index, array), thisArg);이렇듯 이 메서드는 순서대로 콜백 함수(필수 인자)와 콜백 함수에 쓰일 this 값(선택 사항 인자)를 받는다.
물론 두 번째 인자인 this 값을 정의하는 thisArg는 콜백 함수가 화살표 함수가 아닌 function 키워드로 정의되었을 때에만 유효하다.
왜냐하면 화살표 함수는 자신만의 this를 가지지 않으며, 바깥 스코프의 this를 상속받기 때문이다. 따라서 화살표 함수로 작성하고 thisArg를 전달하면 이 값은 무시된다.
콜백 함수는 (현재 요소, 현재 요소의 인덱스, 참조 중인 원본 배열) 이렇게 세 가지의 인자를 가질 수 있다.
callback: 배열의 각 요소를 테스트하는 판별 함수 (필수)
element: 처리 중인 현재 요소.index: 처리 중인 현재 요소의 인덱스.array:map()메서드를 호출한 원본 배열.
thisArg: 콜백 함수 내부에서 사용될 this 값을 설정 (선택 사항)
예제
const numbers = [1, 2, 3, 4, 5];
// 짝수만 필터링
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)
2. 자바스크립트 배열 메서드 find()
find() 메서드는 판별 함수에서 true 값을 반환하는 요소를 찾아 배열을 순회한다는 점은 filter()와 같다. 하지만 filter()와 달리 find() 는 true 값을 반환하는 요소를 찾는 즉시 순회를 멈추고 해당 요소를 반환한다는 점이 다르다.
즉, Array 인스턴스의 find() 메서드는 제공된 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환한다. 이 반환값은 테스트 함수를 만족하는 값이 없으면 undefined가 반환된다.
이 메서드 또한 조건 함수는 true 혹은 false, 즉 boolean을 반환하는 함수이다.
find(): 기존 배열의 요소 중 조건 함수에서true를 반환하는 첫 번째 요소의 참조값을 즉시 반환
find() 메서드는 주어진 조건을 만족하는 첫 번째 요소의 참조값(원본 배열의 요소 자체)을 반환한다. 따라서 반환된 요소가 참조 타입(객체, 배열 등) 인 경우, 이를 수정하면 원본 배열의 해당 요소에도 영향을 미친다. 그러나 반환된 요소가 원시 타입(숫자, 문자열, 불리언 등) 이면, 이를 수정해도 원본 배열에는 영향을 미치지 않는다.
2-1. find() 기본 문법
find() 메서드의 기본 문법은 다음과 같다.
const foundElement = array.find(callback(element, index, array), thisArg);이렇듯 순서대로 콜백 함수(필수 인자)와 콜백 함수에 쓰일 this 값(선택 사항 인자)를 받는다.
물론 두 번째 인자인 this 값을 정의하는 thisArg는 콜백 함수가 화살표 함수가 아닌 function 키워드로 정의되었을 때에만 유효하다.
왜냐하면 화살표 함수는 자신만의 this를 가지지 않으며, 바깥 스코프의 this를 상속받기 때문이다. 따라서 화살표 함수로 작성하고 thisArg를 전달하면 이 값은 무시된다.
콜백 함수는 (현재 요소, 현재 요소의 인덱스, 참조 중인 원본 배열) 이렇게 세 가지의 인자를 가질 수 있다.
callback: 배열의 각 요소를 테스트하는 판별 함수 (필수)
element: 처리 중인 현재 요소.index: 처리 중인 현재 요소의 인덱스.array:map()메서드를 호출한 원본 배열.
thisArg: 콜백 함수 내부에서 사용될 this 값을 설정 (선택 사항)
예제
const numbers = [10, 15, 20, 25, 30];
// 20보다 큰 첫 번째 숫자를 찾음
const found = numbers.find(num => num > 20);
console.log(found); // 25
3. filter() 와 find()의 비교
filter()와 find() 모두 사용 자체로는 원본 배열에 영향을 미치지 않지만 참조 타입 요소를 반환할 경우, 반환값을 수정하면 원본 배열에 영향을 미칠 수 있다는 점을 유의해야한다. 반환값을 수정할 때 원본 배열 수정을 막으려면 반환된 값을 얕은 복사 또는 깊은 복사하여 사용하는 편이 안전하다.
| 구분 | filter() | find() |
|---|---|---|
| 목적 | 조건을 만족하는 모든 요소를 포함한 배열 생성 | 조건을 만족하는 첫 번째 요소 반환 |
| 반환값 | 조건을 만족하는 요소들로 구성된 새 배열 | 조건을 만족하는 단일 요소 |
| 반환 시점 | 배열의 모든 요소를 검사한 후 반환 | 조건을 만족하는 요소를 찾는 즉시 반환 |
| 조건 불충족 시 반환값 | 빈 배열 ([]) | undefined |
| 참조 타입 반환 | 새 배열에 포함된 요소는 원본 배열과 같은 참조값을 공유 | 반환된 요소가 참조 타입일 경우, 원본 배열과 같은 참조값을 공유 |
| 성능 | 조건을 만족하는 모든 요소를 찾기 위해 전체 배열을 순회 | 첫 번째 요소를 찾은 후 순회를 멈춤 |
글 작성 참고 사이트:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
글 작성 참고 서적: 자바스크립트 완벽 가이드 - 데이비드 플래너건 저자
https://product.kyobobook.co.kr/detail/S000001033131
