Javascript find()문법

Javascript find() 문법이란?

find()문법에 대해서

배열 내에서 제공된 콜백 함수로부터 true를 반환하는 첫 번째 요소를 반환한다.

즉, 배열에서 조건에 해당하는 첫 번째 요소를 찾아서 반환한다.

만약 요소를 찾지 못하면 undefined를 반환한다.

arr.find(callback(element[, index[, array]])[, thisArg])

• callback : 각 요소를 검사할 콜백함수이다. 다음 세가지 매개 변수를 받는다.
  • element : 현재 요소
  • index : 현재 요소의 인덱스
  • array : 검색하는 배열
• thisArg : callback에서 this로 사용할 객체

find()메서드는 배열의 첫 번째 요소부터 순차적으로 실행하며, 콜백 함수에서 true를 반환하는 요소를 찾으면 검색을 중지하고 해당 요소를 반환한다.

이 때 반환하는 값은 요소 그 자체이다. 콜백 함수에서 반환하는 것이 true 또는 false가 아니라 요소 자체를 반환해야 한다.

예제)

const numbers = [1,2,3,4,5]

const even = numbers.find((num)=>num%2 === 0);

console.log(even);
//2

위의 예제에서 알 수 있듯이 find() 메서드는 배열 numbers에서 짝수인 첫 번째 요소를 찾아 반환한다.

find()문법 언제 활용하면 좋을까?

특정 조건을 만족하는 첫 번째 요소를 찾을 때

const users = [
	{id:1,name:"Alice"},
	{id:2,name:"Bob"},
	{id:3,name:"Charlie"}
]

const user = users.find(u => u.name === 'Bob');
console.log(user);
//{ id:2,name:'Bob' }

예시로 find()메서드를 이용해 첫 번째 요소를 찾을 때까지 배열을 순회할 필요가 없다.

 

배열에서 값을 찾을 때

배열에서 값을 찾을 때예시로 배열 내에서 특정 값이 있는지 확인할 수 있다.

const numbers = [1,2,3,4,5];

const hasThree = numbers.find(n=>n===3);
console.log(hasThree);

//3

 

객체 배열에서 특정 속성을 찾을 때

예시로 name속성이 Bob인 객체를 찾기

const users = [
	{id:1,name:"Alice"},
	{id:2,name:"Bob"},
	{id:3,name:"Charlie"}
];

const user = users.find(u=>u.name === 'Bob');
cosole.log(user);
//{ id:2,name:"Bob" }

 

객체 배열에서 조건에 따라 여러 값을 찾을 때

예시로 배열 내에서 여러 개의 값을 찾는 경우, filter()와 find()메서드를 조합해 사용할 수 있다.

const numbers = [1,2,3,4,5];

const even = numbers.filter(n=>n%2===0);
const firstEven = even.find(n=>n>2);

console.log(firstEven);
//4

filter()메서드로 배열에서 짝수만 추출한 후 find()메서드를 통해 2보다 큰 첫 번째 요소를 찾는다.