find

이효범·2022년 4월 5일
0

ES6 - OOP & FRP

목록 보기
4/15
post-thumbnail

Array는 Array Class의 인스턴스이다. 따라서 Array Class에 정의되어 있는 메소드들을 활용할 수 있다. 주인장은 Array의 헬퍼 메소드들을 통해 OOP와 FRP의 기초에 대해 공부해보려 한다.

find

let heroes = [
    { id: 1, name: 'superman', type: 'Flying', cost: 400 },
    { id: 2, name: 'batman', type: 'Flying', cost: 320 },
    { id: 3, name: 'X-man', type: 'Mutant', cost: 200 },
    { id: 4, name: 'Ironman', type: 'Metal', cost: 530 },
    { id: 5, name: 'Antman', type: 'Insect', cost: 180 },
];

위의 hereos 중에서 batman의 정보를 가져오고 싶다면 find 메소드를 사용할 수 있다.

let foundHero = heroes.find(function (hero) {
    return hero.name === 'batman';
});
console.log(foundHero);

재미있는 점이, filter와 다른점이 무엇이냐이다. 다른 점은 예를 들어 batman이 하나 더 있다고 해보자. 두 번째 batman의 Id는 11이라고 해보자.
그렇다면 filter는 다음과 같이 array안에 모든 요소가 담긴다. 즉 있는 대로 모두 돌려준다.

let filter = heroes.filter(function (hero) {
    return hero.name === 'batman';
});
console.log(filter);
//[{ id: 2, name: 'batman', type: 'Flying', cost: 320 },
// { id: 11, name: 'batman', type: 'Flying', cost: 320 }]

이와 다르게 find는 array안에 넣지 않고, 그저 object의 형태의 한 요소만을 뽑아내며, 또한 만약 조건을 만족하는 여러가지의 것들이 있다면 그 중 제일 앞에 있는 것만을 가져와 리턴해준다. 이러한 점이 filter와 find의 차이점이다.

let foundHero = heroes.find(function (hero) {
    return hero.name === 'batman';
});
console.log(foundHero);
// { id: 2, name: 'batman', type: 'Flying', cost: 320 }

find 연습

1. 첫번째 연습문제
이전에 filter 연습문제에서 했던 것을 find를 이용해서 연습해보자.
filter 연습문제는 다음과 같다.

function commentPerWriter(comments, name) {
    function searchId(heroes, name) {
        return heroes.filter(function (hero) {
            return hero.name === name;
        });
    }
    let searchedHero = searchId(heroes, name);

    let sorted = comments.filter(comment => comment.idOfWriter === searchedHero[0].id);
    return sorted;
}

console.log(commentPerWriter(comments, 'superman'));

이를 find를 이용해서 값을 얻고자 한다면 다음과 같다.

function commentPerWriter(comments, name) {
    function searchId(heroes, name) {
        return heroes.find(function (hero) {
            return hero.name === name;
        });
    }
    let searchedHero = searchId(heroes, name);

    let sorted = comments.filter(comment => comment.idOfWriter === searchedHero.id);
    return sorted;
}

console.log(commentPerWriter(comments, 'superman'));

2. 두번째 연습문제
admin 권한을 가진 유저가 누구인지 find 해보자.

// 1. Find the user in the users's array who is an admin
let users = [
    { id: 1, admin: false },
    { id: 2, admin: true },
    { id: 3, admin: false },
];

let admin;

소스 코드

let admin = users.find(function (user) {
    return user.admin === true;
});
console.log(admin);

3. 세번째 연습문제

// 2. Find the account with a balance of more than 200
function findWhere(array, criteria) {}

// for example
let ladders = [
    { id: 1, height: 20 },
    { id: 2, height: 25 },
];

findWhere(ladders, { height: 24 }); // result: {id:2, height:25}

소스 코드

function findWhere(array, criteria) {
    let { height } = criteria;
    return array.find(function (el) {
        return el.height === height;
    });
}
profile
I'm on Wave, I'm on the Vibe.

0개의 댓글