js - map(배열 고차함수3)

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있는데 이때 for같은 반복문을 사용하는 대신 배열의 모든 요소에 대해 콜백함수를 호출하는 Array.map() 메소드를 사용하면 된다.

이 Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환한다.즉, map은 원본 배열을 빼거나 더하지 않고 요소들에 일괄적인 작업을 해줄 때 유용한 함수이다.

const number = [1,2,3];
const newNumber = number.map(item => item * 2);
console.log(newNumber); //[2,4,6]

const number = [1,4,9];
const newNumber = number.map(Math.sqrt);
console.log(number); //[1,4,9]
console.log(newNumber); //[1,2,3]

map은 원본 배열을(number) 변경하지 않는다.

forEach와의 차이점
forEach와 map은 모든 요소들에 대해 콜백함수를 호출한다는 점에서 동일하나, forEach메서드는 언제나 undefined를 반환하고, map메서드는 콜백함수의 반환값들로 구성된 새로운 배열을 반환한다는 차이가 있따.

즉, map이 생성하는 새로운 배열의 length는 map을 호출한 배열의 length값과 일치한다. 1:1대응 관계가 이루어진다.

map은 콜백함수를 호출하면서 3개의 인수를 전달한다.(ITEM, INDEX, ARR) 이 인수들을 포함한 map구문은 다음과 같다. 보통의 경우 element를 가장 많이 사용한다. (첫번째 인수)

arr.map(function(element, index, array){ }, this);

예제 : 이름과 넘버를 합쳐서 유저들의 아이디 짓기

let users = [
  { name : 'jane', num : 123},
    { name : 'nick', num : 456},
    { name : 'yujin', num : 789},
]
let usersId = users.map(function(item){
  return `${item.name}${item.num}`;
})
//첫번째 인수로 element 대신 item  사용. 인수의 이름은 상관없음
console.log(usersId);
["jane123","nick456","yujin789"]