Array.map( ) : 실행한 결과를 가지고 새로운 배열을 생성한다

Array.map( ) 

• map함수는 콜백함수의 반환값들로 구성된 새로운 배열을 반환한다.
• 이때 원본 배열을 변경되지 않는다.

 

array.map(callbackFunction ( cur, idx, arr ), thisArg)

• map함수는 콜백함수(callbackFunction)와 thisArg의 두 개의 매개변수가 있고
• 콜백함수는 cur, index, arr 3개의 매개변수를 갖는다.
  • cur : 배열 내 현재 값
  • idx :  배열 내 현재 인덱스
  • arr : 현재 배열
  • thisArg : 콜백함수 내에서 this로 사용될 값

 

인자를 받는 함수를 사용하여 숫자 배열 재구성

다음 코드는 인자가 한개인 함수를 이용하여 map이 어떻게 동작하는지 나타냅니다. 인자인 배열과 안의 요소들은 map을 통해 순회하면서 원본 배열로 부터 자동으로 할당됩니다.

const number = [2,4,6,8,10]

const double = number.map(( item, index, arr )=> {
    console.log(item, index, arr) 
    return item*2
})

// 결과값 ( item, index, arr )
// 2 0 (5) [2, 4, 6, 8, 10]
// 4 1 (5) [2, 4, 6, 8, 10]
// 6 2 (5) [2, 4, 6, 8, 10]
// 8 3 (5) [2, 4, 6, 8, 10]
// 10 4 (5) [2, 4, 6, 8, 10]

// number의 요소가 map함수의 결과 값으로 이루어진 새 배열
console.log(double)  // [4, 8, 12, 16, 20]