[Array] 배열 객체의 메소드 ' .find() '와 ' .filter() '의 차이

.find()

 

- Syntax

find(callbackFn)
find(callbackFn, thisArg)

 

- callbackFn이 'true'를 반환할 때까지 오름차순으로 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출, 조건을 만족하는 요소를 반환하고 배열 순회를 중지(제공된 배열에서 조건을 만족하는 첫 번째 요소를 반환)

- 조건을 만족하는 값이 없으면 'undefined' 반환

- find()는 호출되는 배열을 변경하지 않지만, callbackFn으로 제공된 함수는 변경할 수 있음

 

- 예제 1

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }

 

- 예제 2

const array1 = [5, 12, 8, 130, ];

const found = array1.find((element) => element === undefined);

console.log(found);
// undefined

 

 

 

 

.filter()

 

- Syntax

filter(callbackFn)
filter(callbackFn, thisArg)

 

-  순회 메서드로, 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출하고, callbackFn이 참 값을 반환하는 모든 값으로 새 배열을 구성

- 주어진 배열에서 조건을 만족하는 요소만을 필터링한 배열을 반환

- 복사 메서드로, this를 변경하지 않는 대신 원래 배열의 요소와 동일한 요소를 포함하는 얕은 복사본을 반환(필터링 된 요소 제외). 하지만, callbackFn으로 제공된 함수는 배열을 변경할 수 있음

 

- 예제 1

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// 필터링된 값은 [12, 130, 44]

 

- 예제 2

const words = ['spray', 'elite', 'exuberant', 'destruction', ];

const result = words.filter((word) => word === undefined);

console.log(result);
// []

 

 

 

 

공통 속성

 

- 배열의 length는 callbackFn을 처음 호출하기 전 저장됨

- 이미 방문한 인덱스를 변경해도 callbackFn이 해당 인덱스에 대해 다시 호출되지 않음

- 아직 방문하지 않은 기존 요소가 callbackFn에 의해 변경되는 경우, callbackFn에 전달된 값은 해당 요소가 방문될 당시의 값이 됨. 삭제된 요소는 'undefined'로 인식됨

 

 

 

 

- 참고

- findIndex()
: 배열에서 찾은 요소의 인덱스가 필요한 경우

- indexOf()
: 값의 인덱스를 찾아야 하는 경우(findIndex()와 유사하지만, 테스트 함수를 사용하는 대신 각 요소가 값과 동일한지 확인)

- includes()
: 배열에 값이 존재하는지 찾아야 하는 경우(테스트 함수를 사용하는 대신 각 요소가 값과 동일한지 확인)

- some()
: 제공된 테스트 함수를 만족하는 요소가 있는지 찾아야 하는 경우

 

 

 

 

- 출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Array.prototype.find() - JavaScript | MDN

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN