JavaScript - Array map() 사용 방법

Javascriptarray

자바스크립트에서 Array는 map()을 제공하며, 이 함수를 이용하여 배열의 요소들을 변경하여 새로운 배열로 리턴할 수 있습니다. map()은 내부적으로 배열의 요소를 모두 순회하며 연산을 수행하고, 그 값들을 새로운 배열에 추가하여 리턴합니다.

1. Array.map(callback) : 새로운 배열 리턴

다음은 map의 기본적인 예제입니다. Array.map() 함수는 인자로 callback을 받습니다. 배열을 순회하면서 요소를 callback의 인자로 전달하며, 여기서 처리되어 리턴되는 값들은 새로운 배열에 포함되어 리턴됩니다.

const arr1 = [1, 4, 9, 16];

const arr2 = arr1.map(function(x) {
  console.log("Doubling for " + x);
  return x * 2;
});

console.log(arr2);

Output:

Doubling for 1
Doubling for 4
Doubling for 9
Doubling for 16
[ 2, 8, 18, 32 ]

1.2 Arrow function으로 구현

아래와 같이 arrow function 방식으로 구현할 수도 있습니다.

const arr1 = [1, 4, 9, 16];

const arr2 = arr1.map(x => x * 2);

console.log(arr2);

Output:

[ 2, 8, 18, 32 ]

1.3 Key-Value Object 배열의 map() 예제

아래와 같이 Key-Value 객체가 있는 배열에서도 map()을 사용할 수 있습니다.

const kvArray = [{key:1, value:10},
  {key:2, value:20},
  {key:3, value: 30}];

const result = kvArray.map(function(obj){
  var rObj = {};
  rObj[obj.key] = obj.value * 2;
  return rObj;
});

console.log(result);

Output:

[ { '1': 20 }, { '2': 40 }, { '3': 60 } ]

2. Array.map(function(value, index)) : Index 인자로 받기

map()의 callback은 index를 인자로 받을 수도 있습니다. 아래 예제는 index를 인자로 받아 함께 출력합니다.

const arr1 = [1, 4, 9, 16];

const arr2 = arr1.map(function(x, index) {
  console.log("Doubling for arr1[" + index + "] = " + x);
  return x * 2;
});

console.log(arr2);

Output:

Doubling for arr1[0] = 1
Doubling for arr1[1] = 4
Doubling for arr1[2] = 9
Doubling for arr1[3] = 16
[ 2, 8, 18, 32 ]

3. Array.map(function(value, index, array)) : Index, Array 인자로 받기

map()의 callback은 index 뿐만 아니라 배열의 원본 객체인 array를 인자로 받을 수 있습니다. 아래 예제에서는 배열을 인자로 받아 값을 출력하고 있습니다.

const arr1 = [1, 4, 9, 16];

const arr2 = arr1.map(function(x, index, array) {
  console.log("Doubling for arr1[" + index + "] = "
      + x + ", " + array[index]);
  return x * 2;
});

console.log(arr2);

Output:

Doubling for arr1[0] = 1, 1
Doubling for arr1[1] = 4, 4
Doubling for arr1[2] = 9, 9
Doubling for arr1[3] = 16, 16
[ 2, 8, 18, 32 ]
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha