Array.map()

Array.map()

Array.map()은 입력한 함수를 배열의 모든 원소에 적용해 주는 메소드이다.

예를 들어

let arr = [1,2,3,4,5,6,7,8,9];
arr.map((el)=>2*el);
console.log(arr.map((el)=>2*el))
=> [2, 4, 6, 8, 10, 12, 14, 16, 18]

함수는 map 내부에서 선언해도 되고 함수가 복잡해지면 외부에서 선언하는 것이 권장됩니다.

 

Array.map은 다른 방식으로도 사용 할 수 있습니다.

let a = Array.prototype.map.call('1234552354', el => Number(el));
console.log(a) => [1, 2, 3, 4, 5, 5, 2, 3, 5, 4]
//Array.protype.map을 따로 선언 후 사용해도 됩니다.
let map = Array.prototype.map;
let a = map.call('1234552354', el => Number(el));
console.log(a) => [1, 2, 3, 4, 5, 5, 2, 3, 5, 4]

{주의 사항}

알고리즘 문제를 풀때 Array.map을 자주 사용하게 되는데

이때 배열안의 소수들에 한번에 반올림 하거나 해야 할 필요가 있다.

이때 parseInt를 사용시 문제가 된다.

[4.123, 3.25, 6.315235].map(parseInt);
=>[4, NaN, NaN]
----------------------------------------
[4.123, 3.25, 6.315235].map(Math.round);
=>[4, 3, 6]

이 문제는 MDN을 통해 확인한 결과 Array.map은 콜백함수에 배열의 값, 값의 인덱스, 그리고 배열 이렇게 3가지의 값을 전달 하지만 

parseInt에서는 앞의 두개 값만 인식하기 때문에 발생하는 문제라고 한다. 

※참고 사이트 http://wirfs-brock.com/allen/posts/166

 따라서 이 경우에는 두 가지 해결 방법이 있다.

첫 번째 유사한 기능인 Math.round() 메소드를 사용해서 처리한다.
[4.123, 3.25, 6.315235].map(Math.round);
=> [4, 3, 6]

두 번째 값을 선언해서 잡아준다.
[4.123, 3.25, 6.315235].map(el => parseInt(el));
=> [4, 3, 6]

위와 같은 방법으로 해결 해 볼 수 있다.