[JS] 배열 메서드 중 고차함수

Sehyeon Park·2022년 5월 17일
0

forEach, find, filter, map , reduce, sort, some, every

filter 메서드에 들어가는 콜백 함수는 truthy 또는 falsy를 리턴할 수 있습니다. 그러나 filter 메서드에 들어가는 콜백 함수는 조건을 명확하게 밝히는것을 권장합니다. 따라서 true/false 를 리턴하도록 구현하는것을 권장함

forEach 함수

for문을 대체할 수 있는 고차함수라고 할 수 있다.
forEach는 자신의 내부에서 반복문을 실행한다. 즉 반복문을 추상화한 메소드이다.

반복문을 통해 자신을 호출한 배열을 순회하면서, 수행해야 할 처리를 콜백 함수로 전달받아 반복한다.

const numbers = [1, 2, 3];
const pows = [];

//forEach 메소드는 numbers배열을 모든 요소를 순회, 콜백함수 반복호출 한다.
numbers.forEach(item => pows.push(item * 2));
console.log(pows) ; // [1, 4, 9]

forEach는 numbers 모든 요소를 순회하며, 콜백 함수를 반복 호출한다.
numbers의 배열 요소가 3개이므로 콜백도 3번 일어난다. 이때 콜백을 호출하는 forEach 메소드는 콜백 함수에 인자를 전달할 수 있다.

참고로 forEach 메소드는 원본배열을 변경하지 않는다.
그러나 콜백함수를 통해서 원본 배열을 변경할 수는 있다.

또한 for문과 달리 break, countinue를 사용할 수 없다.
배열의 모든 요소를 순회하며, 중간에 멈출 수 없다.

find 함수

자바스크립트 고차 함수 중에서 filter를 통해서 검색 기능을 구현할 수 있다고 했다.
그리고 배열 메서드 중 filter를 이용한 검색 기능과 비슷한 기능을 하는 메서드가 있다.

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

findindex 메서드

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

이때 배열 번호 [0,1,2,3,4...] 순으로 인덱스값이 출력된다.

some 메서드

some 메서드는 배열 안의 요소 중 some이 파라미터로 받은 콜백함수의 조건에 맞는 요소가 단 한 개라도 있으면 true를 반환한다.

<body>
    <script>

        let num = [2,4,6,8,10];

        let some = num.some(function(item){ 
        // some은 아예 해당안되면 false
            return item > 10;
        });

        console.log(some); // false 출력

    </script>
</body>
 

<body>
    <script>

        let num = [2,4,6,8,10];

        let some = num.some(function(item){ 
        // some은 일부만 해당되도 true
            return item >= 10;
        });

        console.log(some);  // true 출력

    </script>
</body>

이때 some 메서드로 호출한 콜백함수는 some 메서드를 호출한

배열 요소, 배열의 인덱스, 배열 그 자체를 파라미터로 받아올 수 있다.

<body>
    <script

        let num = [2,4,6,8,10];

        let some = num.some(function(item, index, array){
            console.log("요소:"+item+" 인덱스:"+index+" 배열:"+array);
            return item > 10;
        });
        // 요소:2 인덱스:0 배열:2,4,6,8,10
        // 요소:4 인덱스:1 배열:2,4,6,8,10
        // 요소:6 인덱스:2 배열:2,4,6,8,10
        // 요소:8 인덱스:3 배열:2,4,6,8,10
        // 요소:10 인덱스:4 배열:2,4,6,8,10

    </script>
</body>

every 메서드

every 메서드는 배열 안의 모든 요소가 every가 파라미터로 받은 콜백함수의 조건에 모두 해당되야 true를 반환한다.

<body>
    <script>

        let num = [2,4,6,8,10];

        let every = num.every(function(item){ // every는 일부만 해당되면 false
            return item > 2;
        })

        console.log(every); // false 출력

    </script>
</body>
 

<body>
    <script>
        let num = [2,4,6,8,10];

        let every = num.every(function(item){ // every는 모두가 해당되어야 true
            return item >= 2;
        })

        console.log(every); // true 출력

    </script>
</body>

이때 every 메서드로 호출한 콜백함수는 some 메서드를 호출한 배열 요소, 배열의 인덱스, 배열 그 자체를 파라미터로 받아올 수 있다.

<body>
    <script>
        let num = [2,4,6,8,10];

        let every = num.every(function(item, index, array){
            console.log("요소:"+item+" 인덱스:"+index+" 배열:"+array);
            return item >= 2;
        })

        // 요소:2 인덱스:0 배열:2,4,6,8,10
        // 요소:4 인덱스:1 배열:2,4,6,8,10
        // 요소:6 인덱스:2 배열:2,4,6,8,10
        // 요소:8 인덱스:3 배열:2,4,6,8,10
        // 요소:10 인덱스:4 배열:2,4,6,8,10

    </script>
</body>
profile
후회하지 않는 개발자가 되자!

0개의 댓글