자바스크립트 고차함수

자바스크립트 고차함수 - Map()

ksge7 2020. 10. 3. 07:32

Map 메서드란?

for 문을 대신할 수 있는 메서드로 forEach뿐 아니라 Map()도 있다.

forEach 메서드는 for를 대체하여 배열을 순회시키며 어떤 동작을 반복하기 쉽게 한다.

반면 Map 메서드는 for문을 대체하여 배열을 순회시키며 새로운 배열을 만든다.

즉 특정 배열을 복사하기 쉽게 만든 것이 Map() 메서드다.

<body>
    <script>

        let num = [1,3,5]; // 배열 선언
        let num2 = [];

        for(i=0; i < num.length; i++){
            num2[i] = num[i];
        } // for문을 이용한 배열 복사

        console.log(num2);
        // [1,3,5] 출력
        
    </script>
</body>

기존 for문을 이용한 배열 복사는 위 코드와 같다.

배열을 별도로 선언하고 내용을 복사해주는 식이다.

<body>
    <script>

        let num = [1,3,5];
        let num2 = [];

        num.forEach(function(item,index){
            num2[index] = item;
        })

        console.log(num2)
        // [1,3,5] 출력
        
    </script>
</body>

forEach를 써도 배열을 따로 선언하고 복사해야해서 번거롭다.

<body>
    <script>

        let num = [1,3,5];
        let num2 = [];

        let num2 = num.map(function(item){ return item });
        
        console.log(num2)
        // [1,3,5] 출력
        
    </script>
</body>

Map 메서드를 쓰면 for문이나 forEach 메서드보다 편하게 배열을 복사할 수 있다.

<body>
    <script>

        let num = [1,3,5];

       	let num2 = num.map(function(item, index, self){ 
            return "아이템:"+item+" 인덱스:"+index+" 배열:"+self;
        });

        console.log(num2);
        // ["아이템:1 인덱스:0 배열:1,3,5", "아이템:3 인덱스:1 배열:1,3,5", "아이템:5 인덱스:2 배열:1,3,5"]
        
    </script>
</body>

Map 메서드는 인자로 받는 함수의 인자로 Map메서드를 호출한

배열의 요소, 인덱스, 배열 그 자체를 전달받을 수 있다.

<body>
    <script>

        let num = [1,3,5];

        let num2 = num.map(function(item){ 
            return item * 2;
        });

        let num3 = num.map(function(item){ 
            return item * item;
        });

        console.log(num2); // 2, 6, 10 출력
        console.log(num3); // 1, 9, 25 출력
        
    </script>
</body>

Map 메서드는 콜백함수의 인자로 받은 요소들을 통해 다양한 연산이 가능하다.