Array.prototype.find()
Array
인스턴스의 find()
메서드는 제공된 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환합니다. 테스트 함수를 만족하는 값이 없으면 undefined
가 반환됩니다.
- 배열에서 찾은 요소의 인덱스가 필요한 경우,
findIndex()
를 사용하세요. - 값의 인덱스를 찾아야 하는 경우,
indexOf()
를 사용하세요. (findIndex()
와 유사하지만, 테스트 함수를 사용하는 것 대신 각 요소가 값과 동일한지 확인합니다.) -
배열에 값이 존재하는지 찾아야 하는 경우,
includes()
를 사용하세요. 이 역시 테스트 함수를 사용하는 것 대신 각 요소가 값과 동일한지 확인합니다. - 제공된 테스트 함수를 만족하는 요소가 있는지 찾아야 하는 경우,
some()
을 사용하세요.
시도해보기
구문
js
find(callbackFn)
find(callbackFn, thisArg)
매개변수
반환 값
제공된 테스트 함수를 만족하는 배열의 첫 번째 요소입니다. 테스트 함수를 만족하는 요소가 없으면, undefined
가 반환됩니다.
설명
find()
메서드는 순회 메서드입니다. 이 메서드는 callbackFn
이 참 값을 반환할 때까지, 오름차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 callbackFn
함수를 한 번씩 호출합니다. 그런 다음 find()
는 해당 요소를 반환하고 배열 순회를 중지합니다. callbackFn
이 참 값을 반환하지 않으면, find()
는 undefined
를 반환합니다.
callbackFn
은 값이 할당된 인덱스뿐만 아니라 배열의 모든 인덱스에 대해 호출됩니다. 희소 배열의 빈 슬롯은 undefined
와 동일하게 동작합니다.
find()
는 호출되는 배열을 변경하지 않지만, callbackFn
으로 제공된 함수는 변경할 수 있습니다. 그러나 배열의 length는 callbackFn
을 처음 호출하기 전에 저장된다는 점에 유의하세요. 따라서,
callbackFn
은find()
호출이 시작되었을 때 배열의 초기 length 값을 초과하여 추가된 요소는 방문하지 않습니다.- 이미 방문한 인덱스를 변경해도
callbackFn
이 해당 인덱스에 대해 다시 호출되지 않습니다. - 배열의 아직 방문하지 않은 기존 요소가
callbackFn
에 의해 변경되는 경우,callbackFn
에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. 삭제된 (en-US) 요소는undefined
가 있는것 처럼 방문됩니다.
경고: 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).
find()
메서드는 범용입니다. this
값에는 length
속성과 정수 키 속성만 있을 것으로 예상합니다.
예제
배열에서 속성 중 하나로 객체 찾기
js
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 }
화살표 함수 및 구조 분해 사용
js
const inventory = [
{ name: "apples", quantity: 2 },
{ name: "bananas", quantity: 0 },
{ name: "cherries", quantity: 5 },
];
const result = inventory.find(({ name }) => name === "cherries");
console.log(result); // { name: 'cherries', quantity: 5 }
배열에서 소수 찾기
다음 예제는 배열의 요소 중 소수인 요소를 찾습니다(소수가 없는 경우에는 undefined
를 반환합니다.).
js
function isPrime(element, index, array) {
let start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
}
console.log([4, 6, 8, 12].find(isPrime)); // undefined, 소수 없음
console.log([4, 5, 8, 12].find(isPrime)); // 5
희소 배열에서 find() 사용하기
희소 배열의 빈 슬롯은 undefined
와 동일하게 동작합니다.
js
// 2, 3, 4 인덱스에 요소가 없는 배열로 선언
const array = [0, 1, , , , 5, 6];
// 값이 있는 요소만이 아닌 모든 인덱스를 표시합니다.
array.find((value, index) => {
console.log("방문 인덱스:", index, "값:", value);
});
// 방문 인덱스: 0 값: 0
// 방문 인덱스: 1 값: 1
// 방문 인덱스: 2 값: undefined
// 방문 인덱스: 3 값: undefined
// 방문 인덱스: 4 값: undefined
// 방문 인덱스: 5 값: 5
// 방문 인덱스: 6 값: 6
// 삭제된 요소를 포함한 모든 인덱스를 표시합니다.
array.find((value, index) => {
// 첫 번째 순회에서 요소 5 삭제
if (index === 0) {
console.log(array[5], "값인 array[5] 삭제");
delete array[5];
}
// 삭제된 요소 5를 포함하여 모든 인덱스를 방문합니다.
console.log("방문 인덱스:", index, "값:", value);
});
// 5 값인 array[5] 삭제
// 방문 인덱스: 0 값: 0
// 방문 인덱스: 1 값: 1
// 방문 인덱스: 2 값: undefined
// 방문 인덱스: 3 값: undefined
// 방문 인덱스: 4 값: undefined
// 방문 인덱스: 5 값: undefined
// 방문 인덱스: 6 값: 6
배열이 아닌 객체에서 find() 호출하기
find()
메서드는 this
의 length
속성을 읽은 다음 키가 length
보다 작은 음수가 아닌 정수인 각 속성에 접근합니다.
js
const arrayLike = {
length: 3,
"-1": 0.1, // -1 < 0 이므로 find()에서 무시됩니다.
0: 2,
1: 7.3,
2: 4,
};
console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x)));
// 7.3
명세서
Specification |
---|
ECMAScript Language Specification # sec-array.prototype.find |
브라우저 호환성
BCD tables only load in the browser