JavaScript - 배열에서 조건을 만족하는 값 찾기 find, findIndex, filter

arr.find(fn)

• 배열을 하나하나 훑으면서 전달된 콜백 함수가 true가 되면, 해당하는 첫번째 요소를 반환.
• 만약 찾지 못하면, undefined를 리턴.

arr.findIndex(fn)

• 콜백 함수가 true가 되면, 해당하는 첫번째 요소의 인덱스를 반환. 없으면 -1을 반환.

arr.filter(fn)

• 콜백 함수가 만족하는 모든 요소를 배열로 반환.

let arr = [1, 2, 3, 4, 5];

// find를 쓸 경우
const result = arr.find((item) => {
    return item % 2 === 0;
});
console.log(result);    // 2

// findIndex를 쓸 경우
const result = arr.findIndex((item) => {
    return item % 2 === 0;
});
console.log(result);    // 1

// filter를 쓸 경우
const result = arr.filter((item) => {
    return item % 2 === 0;
});
console.log(result);    // [2, 4, 6]

 

 

다음과 같이 객체가 있는 경우엔 indexOf로는 찾기가 힘들잖아. 이럴 때 find와 findIndex, filter 메소드를 사용.

let userList = [
    { name: "Mike", age: 30 },
    { name: "Jane", age: 27 },
    { name: "Tom", age: 10 },
];


// find를 쓸 경우
const result = userList.find((user) => {
    if (user.age < 19) {
        return true;
    }
    return false;
});
console.log(result);    // { name: "Tom", age: 10 }


// findIndex를 쓸 경우
const result = userList.findIndex((user) => {
    if (user.age < 19) {
        return true;
    }
    return false;
});
console.log(result);    // 2


// filter를 쓸 경우
const result = userList.filter((user) => {
    if (user.age < 19) {
        return true;
    }
    return false;
});
console.log(result);    // { name: "Tom", age: 10 }