자바스크립트 배열 반복 map 메서드 사용 Using javascript iteration map method

자바 스크립트의 배열을 반복하기 위해 map 메서드를 사용할 수 있다. map 메서드의 사용은 foreach와 비슷하다. 기본적으로 제공받는 인자값도 동일하다. foreach 메서드와 map 메서드의 차이가 있다면 map 메서드는 배열을 반복하고 새로운 배열을 만들 수 있다는 점이다.

자바스크립트 배열 반복 map 메서드 사용
Using javascript iteration map method

자바스크립트 배열을 반복하는 것으로 foreach 라는 편한 메서드가 있었다.

foreach 말고도 map 메서드가 있다.

map과 foreach 메서드는 자바스크립트 배열을 반복하는 공통점이 있다.

차아가 있다면 map 은 새로운 배열을 만들 수 있다.

배열의 반복 map 메서드

자바스크립트에서 배열과 같은 컬렉션들을 반복하기 위한 키워드는 많다.

그 중 map은 원본에 영향을 주지 않고 새로운 배열을 만들 수 있다.

for 나 foreach 등으로 새로운 배열을 만들기 위해 코드를 추가할 필요가 없다.

map 메서드에서 호출하는 콜백메서드를 통해 배열을 값들을 가공하고 리턴하면 그걸로 끝이다.

그리고, foreach 메서드와 마찬가지로 value, index, array 의 3가지 인자값을 기본적으로 제공한다.

사용법

아래의 코드는 자바스크립트 배열을 map 메서드를 통해 반복하는 모습을 보여준다.

앞서 언급했듯이 map 메서드의 사용법은 foreach 메서드와 사용법이 같다.

결과값으로 새로운 배열을 만들 수 있기 때문에 원본에 영향을 미치지 않는다.

반복을 통해 가공이 필요한 경우 map 메서드를 사용하는 것이 좋다.

let vArray = Array.map(fnCallBack);

function fnCallBack(value, index, array) {
	console.log(
    	`index : ${index}, value : ${value}, array : [ ${array} ]`
    );
    return value;
}

샘플코드

위의 사용법으로 자바스크립트 예제를 만들어 본다.

원본 배열을 만들고 map 메서드를 호출한다.

map 메서드에 콜백 메서드를 지정한다.

콜백 메서드의 역할은 map에 지정된 배열을 반복하고 각각의 값들에 10을 곱한다.

이로써 새로운 배열이 만들어 지며 원본 배열과 같이 비교를 해본다.

<!DOCTYPE html>
<html>
    <body>

        <script>

            console.log('----------')

            let vArray1 = [9, 80, 700, 6000, 50000];
            let vArray2 = vArray1.map(fnCallBack);

            function fnCallBack(value, index, array) {
                console.log(
                    `index : ${index}, value : ${value}, array : [ ${array} ]`
                );
                return value * 10;
            }

            console.log('----------')

            console.log(`typeof : ${typeof(vArray1)}, vArray1 : [ ${vArray1} ]`);
            console.log(`typeof : ${typeof(vArray2)}, vArray2 : [ ${vArray2} ]`);

            console.log('----------')

        </script>

    </body>
</html>

결과 화면을 보자.

위에서 언급한 것처럼 새로운 배열이 만들어 지는지, 그리고 원본배열에 영향이 있는지 확인해 본다.

만약 10을 곱하면서 영향이 있다면 원본배열의 값 또한 10이 곱해진 상태가 될 것이다.

배열이 반복되는 것을 볼 수 있다.

최종 결과값을 보면 원본배열과 새롭게 만들어진 배열의 값에 차이가 있고, 값이 곱해지면서 원본 배열에는 별다른 영향이 없음을 알 수 있다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 배열 반복 초기값 지정 reduce 메서드 사용 (0)	2022.01.13
자바스크립트 배열 반복 filter 메서드 사용 Using javascript iteration filter method (0)	2022.01.10
자바스크립트 배열 반복 foreach 메서드 사용 Using javascript iteration foreach method (0)	2022.01.06
자바스크립트 배열 최대값 최소값 구하기 Find Max and Min value in Javascript Array (0)	2022.01.04
자바스크립트 숫자 배열 비교 함수 정렬 Sorting Javascript Number Array Compare Function (0)	2022.01.03

자바스크립트 배열 반복 map 메서드 사용 Using javascript iteration map method