Array.prototype.find()

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

Array.prototype.find() - JavaScript | MDN

https://www.w3schools.com/jsref/jsref_find.asp

JavaScript Array find() Method

 

find() 메서드는 테스트를 통과하는 첫 번째 요소의 값을 반환한다.

반환할 내용이 없으면 undefined를 반환한다.

사실 첫 번재 요소의 값을 반환한다는 제약이 있기 때문에, 테스트를 통과한 모든 값을 가져오는 것도 아니고,

배열을 반환시키고 싶으면 filter를 써야 하기 때문에, 사실 쓸일이 크게 없을 것 같다.

 

찾은 요소의 값 대신 찾은 요소의 인덱스를 반환시키려면 findIndex() 메서드를 쓰고,

배열 요소의 위치를 찾고 싶으면 indexOf() 메서드를 사용하면 되며,

해당 배열에 찾는 요소가 있는지 찾고 싶으면 indexOf()나 includes() 메서드를 사용하면 된다.

 

구문은 다음과 같다. 사실상 filter와 동일하다. 

arr.find(callback[, thisArg])

---

매개변수

callback배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받습니다.element콜백함수에서 처리할 현재 요소.indexOptional콜백함수에서 처리할 현재 요소의 인덱스.arrayOptionalfind 함수를 호출한 배열.thisArg선택 항목. 콜백이 호출될 때 this로 사용할 객체.

반환 값

주어진 판별 함수를 만족하는 첫 번째 요소의 값. 그 외에는 undefined.

설명

find 메서드는 callback 함수가 참을 반환 할 때까지 해당 배열의 각 요소에 대해서 callback 함수를 실행합니다. 만약 어느 요소를 찾았다면 find 메서드는 해당 요소의 값을 즉시 반환하고, 그렇지 않았다면 undefined를 반환합니다. callback은 0 부터 length - 1 까지 배열의 모든 인덱스에 대해 호출되며, 값이 지정되지 않은 요소도 포함하여 모든 인덱스에 대해 호출됩니다. 따라서, 희소 배열 (sparse arrays)의 경우에는 값이 지정된 요소만 탐색하는 다른 메소드에 비해 더 비효율적입니다.

callback은 다음의 세가지 인자를 가지고 호출됩니다: 요소의 값, 요소의 인덱스, 순회의 대상이 되는 배열. 

thisArg 파라미터가 주어진 경우에는 제공되었다면  thisArg가 callback안에서 this로 사용되고, 그렇지 않은 경우 undefined 가 this로 사용됩니다. 

find는 호출의 대상이 된 배열을 변경(mutate)하지 않습니다.

find가 처리할 배열 요소의 범위는 첫 callback이 호출되기 전에 먼저 결정됩니다. find메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 callback이 호출되지 않습니다. 아직 callback이 호출되지 않았던 배열 요소가 callback에 의해서 변경된 경우, find가 해당 요소의 인덱스를 방문할 때의 값으로 callback함수에 전달될 것입니다. 즉, 삭제된 요소에도 callback이 호출됩니다.

---

설명 부분을 쫌 읽어보면 좋을 것 같다.

 

그나마 활용성이 있는 예제를 가져왔다.

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

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

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