자바스크립트 고차함수 - find(), findindex()

ksge7 2020. 10. 6. 15:59

find 메서드

자바스크립트 고차 함수 중에서 filter를 통해서 검색 기능을 구현할 수 있다고 했다.

그리고 배열 메서드 중 filter를 이용한 검색 기능과 비슷한 기능을 하는 메서드가 있다.

find 메서드를 이용하면 배열에서 조건에 해당하는 첫번째 값을 반환한다.

사용법은 다음과 같다.

<body>
    <script>

        let hero = [
            {name: "헐크", age: "34"},
            {name: "배트맨", age: "37"},
            {name: "스파이더맨", age: "27"},
            {name: "슈퍼맨", age: "39"},
            {name: "아이언맨", age: "31"},
            {name: "아이언맨", age: "34"},
        ];

        let find = hero.find(function(item){
            return item.name == "아이언맨";
        });
        // find메서드를 이용하면 배열 안에서 원하는 요소를 추출할 수 있다.
        
        console.log(find);
        // {name: "아이언맨", age: "31"} 출력
        // 아이언맨 객체가 두 개지만 그중 더 앞선 순서의 객체가 출력
        
    </script>
</body>

<body>
    <script>

        let hero = [
            {name: "헐크", age: "34"},
            {name: "배트맨", age: "37"},
            {name: "스파이더맨", age: "27"},
            {name: "슈퍼맨", age: "39"},
            {name: "아이언맨", age: "31"},
            {name: "아이언맨", age: "34"},
        ];

        function findname(name){
            return hero.find(function(item){
                return item.name == name;
            })
        };
        // find 메서드를 새로 만든 함수의 리턴값으로 설정

        console.log(findname("스파이더맨"));
        // {name: "스파이더맨", age: "27"} 출력

    </script>
</body>

다른 배열 메서드와 마찬가지로 호출한 배열의 요소, 인덱스, 배열을 콜백함수를 통해 전달받을 수 있다.

<body>
    <script>

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

        let find = num.find(function(item, index, array){
            console.log("아이템:"+item+" 인덱스:"+index+" 호출배열:"+array)
        });
        // find의 콜백함수는 find를 호출한
        // 배열 요소, 인덱스, 배열을 파라미터로 받을 수 있다.

    </script>
</body>

findindex 메서드

findindex는 find와 기능이 같다. 다만 배열의 value가 아닌 인덱스 값을 넘겨준다.

<body>
    <script>


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

        let num2 = num.findIndex(function(item){
            return item == 5;
        });
        
        console.log(num2) // 4출력

    </script>
</body>

<body>
    <script>

        let hero = [
            {name: "헐크", age: "34"},
            {name: "배트맨", age: "37"},
            {name: "스파이더맨", age: "27"},
            {name: "슈퍼맨", age: "39"},
            {name: "아이언맨", age: "31"},
            {name: "아이언맨", age: "34"},
        ];

        let heroindex = hero.findIndex(function(item){
            return item.name == "아이언맨";
        });

        console.log(heroindex);  // 4출력

    </script>
</body>

다른 배열 메서드와 마찬가지로 호출한 배열의 요소, 인덱스, 배열을 콜백함수를 통해 전달받을 수 있다.

<body>
    <script>

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

        let findindex = num.findIndex(function(item, index, array){
            console.log("아이템:"+item+" 인덱스:"+index+" 호출배열:"+array)
        });
        
        // findindex의 콜백함수는 find를 호출한
        // 배열 요소, 인덱스, 배열을 파라미터로 받을 수 있다.

    </script>
</body>