[JS] map()

map()

map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용합니다.
배열의 map() 함수는, 배열을 순회하면서 각 element의 값을 변경하여 새로운 배열을 만들어 줍니다.

syntax

배열(arr)의 각각의 element들이 callback 함수의 파라미터로 전달되고, map() 함수는 이 callback 함수가 return 하는 값으로 새로운 배열을 만들어서 리턴합니다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

callback(currentValue, index, array)
새로운 배열을 생성하는 함수이고, 다음 3개의 파라미터를 받습니다.

• currentValue : 현재 처리 중인 배열의 element
• index(optional) : 현재 처리 중인 배열의 index
• array(optional) : 현재 처리 중인 배열

thisArg(optional)
callback을 실행할 때 this로 사용할 객체

리턴값
callback 함수에 의해서 변경된 arr의 새로운 배열이 리턴됩니다.
이때, 원래의 배열인 arr은 변경되지 않습니다.

예제

기존 배열에 값의 x2를 한 배열을 생성

• 화살표 함수

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(element => element *2);
console.log(result); // (5) [2, 4, 6, 8, 10]

• function

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(function(element){
  return element*2;  // 이렇게 해도 결과가 위에 것과 똑같다.
});
console.log(result);  // (5) [2, 4, 6, 8, 10]

map() 함수의 callback 함수는, 반드시 새로운 배열의 element가 될 값을 리턴해 주어야 합니다.