자바스크립트 배열 메서드 2: map

map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만 callback에서 return 되는 값을 배열로 만들어냅니다.

 

1. [ ] . map ( callback )

const arr = [0,1,2,3];

let squaredArr = arr.map(function(element){
    return element * element;
});
// 혹은 arrow 함수 가능
squaredArr = arr.map(element => element * element);

console.log(squaredArr); // [ 0, 1, 4, 9 ]

위 코드를 보면 배열속 요소들이 제곱되어 새로운 배열이 생성되는 모습입니다.

 

2. callback 함수 인자

const arr = [0,1,2,3];

let squaredArr = arr.map(function(element, index, array){
    console.log(`${array}의 ${index}번째 인자 : ${element}`);
    return element * element;
});
/*
0,1,2,3의 0번째 인자 : 0
0,1,2,3의 1번째 인자 : 1
0,1,2,3의 2번째 인자 : 2
0,1,2,3의 3번째 인자 : 3
*/

console.log(squaredArr); // [ 0, 1, 4, 9 ]

forEach문과 마찬가지로 index와 전체 배열을 사용할 수 있습니다

 

3. 유의할점

for문은 continue나 break로 반복을 제어할 수 있지만 map은 forEach와 마찬가지로 throw를 발생시키지 않으면 중간에 종료할 수 없습니다.