[Javascript] 배열 map() 함수로 변경된 새로운 배열 생성하기

 

map() 함수는 배열을 다룰 때 매우 자주, 유용하게 사용되는 함수입니다.

배열의 map() 함수는,

배열을 순회하면서

각 element의 값을 변경하여 새로운 배열을 만들어 줍니다.

 

 

map() 함수로 새로운 배열 생성하기

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

 map() 함수는... 

배열(arr)의 각각의 element들이 callback 함수의 파라미터로 전달되고,

map() 함수는 이 callback 함수가 return 하는 값으로 새로운 배열을 만들어서 리턴합니다.

 

 파라미터 

callback(currentValue, index, array)

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

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

thisArg (optional)

callback을 실행할 때 this로 사용할 객체입니다.

 

 리턴값 

callback함수에 의해서 변경된 arr의 새로운 배열이 리턴됩니다.

이때, 원래의 배열인 arr는 변경되지 않습니다.

 

 

 예제 1 

 

See the Pen 배열 by anna (@hianna) on CodePen.

map() 함수를 사용하여

배열의 모든 값에 1을 더한 새로운 배열을 생성하였습니다.

 

const arr2 = arr1.map((currValue) => currValue + 1);

map()의 파라미터로 callback 함수를 전달할 때 ES6 문법을 사용할 수도 있습니다.

 

const arr2 = arr1.map((currValue) => currValue + 1);

const arr3 = arr1.map(function add(currValue) {

   return currValue + 1;

})

이 두개의 구문은 같은 동작을 수행합니다.

 

document.writeln(arr1 + '<br>'); // [1, 2, 3, 4]

원본 배열인 arr1은 변경되지 않습니다.

 

 

 예제 2 

See the Pen 배열 by anna (@hianna) on CodePen.

 

map() 함수의 callback 함수는, 

반드시 새로운 배열의 element가 될 값을 리턴해 주어야 합니다.

 

const arr2 = arr1.map(function add(currValue) {

   currValue = currValue + 1;

})

위와 같이 실수하지 않도록 주의해야 합니다.

callback 함수에서 값을 리턴하지 않으면, 

map() 함수에 의해 생성되는 새로운 배열(arr2)의 element는 undefined 값을 가지게 되고,

arr1의 값도 변경되지 않습니다.