JavaScript - 배열 map() 사용법 및 예제

구문

자바스크립트의 map함수는 callback함수 실행한 결과 반환값으로 배열의 길이, 순서를 유지한 새로운 배열을 만듭니다.

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

파라미터

1. callback function
   
   • callback함수는 다음 3가지의 인수를 가집니다.
     1. currentValue - 배열의 현재 요소
     2. index(Optional) - 배열의 현재 요소의 인덱스
     3. array(Optional) - 호출한 배열
2. thisArg(Optional)
   • callback함수를 실행할때 this로 사용되는 값

반환 값

배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행한 결과로 새로운 배열을 만듭니다.

 

예제

1. 배열 속 숫자의 제곱을 구한 새로운 숫자배열 만들기

const numbers = [1, 2, 3, 4, 5]; // 기존 배열

// map1 - callback함수를 직접 작성
const map1 = numbers.map(currentNumber => currentNumber * currentNumber);

console.log('map1 =', map1);

또는

// map2 - callback함수 선언 후 이용
function calcDouble(currentNumber) {
  // Math.pow(x, y) - x의 y 제곱을 반환합니다.
  return Math.pow(currentNumber, 2);
}

const map2 = numbers.map(calcDouble);

console.log('map2 =', map2);

 

Result

 

map1 = [1, 4, 9, 16, 25]
map2 = [1, 4, 9, 16, 25]

 

2. 숫자배열로 숫자값과 인덱스를 갖는 오브젝트 배열 만들기

가끔 기존의 배열이 숫자배열이라고해서 만들수 있는 배열도 무조건 똑같은 타입의 숫자배열이라고 오해하는 상황이 생기는데

기존 배열의 값과 길이만 이용할 뿐 새로운 타입의 배열을 만드는 것도 가능합니다.

const numbers = [1, 3, 5, 7, 9];

const objectArr = numbers.map((number, index) => ({ number, index }));

console.log('objectArr =', objectArr);

 

Result

 

objectArr = [
    {
        "number": 1,
        "index": 0
    },
    {
        "number": 3,
        "index": 1
    },
    {
        "number": 5,
        "index": 2
    },
    {
        "number": 7,
        "index": 3
    },
    {
        "number": 9,
        "index": 4
    }
]

 

3. 오브젝트 배열을 이용하여 새로운 오브젝트 배열 만들기

map 함수는 기존의 배열을 수정하는 것이 아닌 새로운 배열을 만들기 때문에 상황에 따라 기존 배열을 유지하고 새로운 배열을 만드는 데 쓰기 적합합니다.

// 실제직업과 다릅니다.
const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러'
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼'
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남'
  }
];

// 10년 후의 모습을 예상합니다.
const tenYearsLaterFriends = friends.map((friend) => {
  // 나이는 10살씩 더 먹겠네요
  const returnObj = friend;
  returnObj.age += 10;
  
  // 새로운 직업을 갖고 있을 듯 합니다.
  let newJob;
  switch(returnObj.job) {
    case '코인러':
      newJob = '한강뷰 또는 한강속';
      break;
    case '2년차 유부남':
      newJob = '12년차 유부남';
      break;
    default:
      newJob = '무직';
      break;
  }
  
  returnObj.job = newJob;
  
  return returnObj;
})

console.log('10년 후 친구들.. ', tenYearsLaterFriends);

 

Result

 

[
  {
    name: '양주진',
    age: 42,
    job: '한강뷰 또는 한강속'
  },
  {
    name: '오영제',
    age: 42,
    job: '무직'
  },
  {
    name: '서준형',
    age: 42,
    job: '12년차 유부남'
  }
];