Array.prototype.map()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

https://www.w3schools.com/jsref/jsref_map.asp

JavaScript Array map() Method

map() 매서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

 

나는 예전에 배열 내의 아이템에 대해서 항목을 변경하려면 다음과 같은 방식으로 작업했다. 

const arr_test = [{id : 1 , name : '카리나', realname : '유지민', team : 'aespa'}
                  ,{id : 2 , name : '지젤', realname : '우치나가 애리', team : 'aespa'}
                  ,{id : 3 , name : '윈터', realname : '김민정', team : 'aespa'}
                  ,{id : 4 , name : '닝닝', realname : '닝이줘' , team : 'aespa'}];
console.log(arr_test);
// Array [Object { id: 1, name: "카리나", realname: "유지민", team: "aespa" }, Object { id: 2, name: "지젤", realname: "우치나가 애리", team: "aespa" }, Object { id: 3, name: "윈터", realname: "김민정", team: "aespa" }, Object { id: 4, name: "닝닝", realname: "닝이줘", team: "aespa" }]
for(var i = 0; i < arr_test.length ;i++)
{
  var temp = arr_test[i];
  temp.realname = '';
  arr_test[i] = temp;
}
console.log(arr_test);
// Array [Object { id: 1, name: "카리나", realname: "", team: "aespa" }, Object { id: 2, name: "지젤", realname: "", team: "aespa" }, Object { id: 3, name: "윈터", realname: "", team: "aespa" }, Object { id: 4, name: "닝닝", realname: "", team: "aespa" }]

 

map()을 사용하면 코드가 획기적으로 줄어든다.

let arr_test = [{id : 1 , name : '카리나', realname : '유지민', team : 'aespa'}
                  ,{id : 2 , name : '지젤', realname : '우치나가 애리', team : 'aespa'}
                  ,{id : 3 , name : '윈터', realname : '김민정', team : 'aespa'}
                  ,{id : 4 , name : '닝닝', realname : '닝이줘' , team : 'aespa'}];

arr_test = arr_test.map(function(obj){ obj.realname = ''; return obj;} );
console.log(arr_test);

배열을 사용하는 경우는 주로 배열 내에 다양한 아이템들이 들어갈 수 있는데, for나 foreach 같은 순회문을 작성하는 것은 코드를 순차적으로 확인하기 쉽고 명시적으로 좋은 부분이 있지만, 반면에 코드가 길어지고 가독성이 낮아지며 작성하는 데 시간이 많이 걸린다는 단점이 있다. 

 

사실 처음에 이해하기가 어려웠던 점이 map() 메소드를 사용할 떄는 파라미터 명을 임의로 정할 수 있으니 코드만 봐서는 도대체 무슨 기준으로 동작하는 건지 파악하기 어렵다는 것이었다. map() 함수의 경우 선언하는 파라미터 명의 순서가 중요하지 이름 자체는 중요하지 않으므로 사용하는 사람들마다 처리할 현재 요소명은 item, obj, user, team 이런 식으로 마음대로 사용하기 때문에 map()함수의 systax를 모르면 멘붕에 빠지게 된다.

 

숫자 배열이나 문자 배열 같은 경우 처음에 선언하는 변수 명이 순회될 아이템을 말하고, => 이후의 값은 변경될 값을 의미한다. 

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

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

좀 더 정확하게 작성하면 map()메소드의 systax는 다음과 같다.

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

 

각 매개변수들은 다음과 같은 의미를 가진다. Optional은 필수가 아니라는 의미이다.

 

callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

    currentValue 처리할 현재 요소.

    index (Optional) 처리할 현재 요소의 인덱스.

    array (Optional) map()을 호출한 배열.

thisArg (Optional) callback을 실행할 때 this로 사용되는 값.

 

index 를 사용하는 예시를 만들어 보았다.

realname을 원래 이름 뒤에 현재 index 숫자를 더한 값으로 바꾸는 기능을 구현했다.

사실 그냥 필수값으로만 사용한다면 foreach문과 같이 순차적으로 작업하는 것만 가능하지만, 파라미터로 index 값을 명기하면 i++로 증가하는 for 문과 같이 활용이 가능하다.

let arr_test = [{id : 1 , name : '카리나', realname : '유지민', team : 'aespa'}
                  ,{id : 2 , name : '지젤', realname : '우치나가 애리', team : 'aespa'}
                  ,{id : 3 , name : '윈터', realname : '김민정', team : 'aespa'}
                  ,{id : 4 , name : '닝닝', realname : '닝이줘' , team : 'aespa'}];

arr_test = arr_test.map(function(obj, i){ obj.realname = obj.realname + i; return obj;} );
console.log(arr_test);
//> Array [Object { id: 1, name: "카리나", realname: "유지민0", team: "aespa" }, Object { id: 2, name: "지젤", realname: "우치나가 애리1", team: "aespa" }, Object { id: 3, name: "윈터", realname: "김민정2", team: "aespa" }, Object { id: 4, name: "닝닝", realname: "닝이줘3", team: "aespa" }]

 

index와 array를 모두 사용하는 예시도 만들어 보았다.

아이템에 해당 배열의 바로 앞 사람을 bf라는 요소로 추가하는 기능을 구현햇다. 앞에 포스팅한 at() 메소드를 활용하여 여 첫번째 아이템인 카리나의 bf를 마지막 아이템인 닝이줘로 등록할 수 있다.

let arr_test = [{id : 1 , name : '카리나', realname : '유지민', team : 'aespa'}
                  ,{id : 2 , name : '지젤', realname : '우치나가 애리', team : 'aespa'}
                  ,{id : 3 , name : '윈터', realname : '김민정', team : 'aespa'}
                  ,{id : 4 , name : '닝닝', realname : '닝이줘' , team : 'aespa'}];

arr_test = arr_test.map(function(obj, i, org_arr){ obj.bf = org_arr.at(i-1).realname; return obj; } );
console.log(arr_test);
//> Array [Object { id: 1, name: "카리나", realname: "유지민", team: "aespa", bf: "닝이줘" }, Object { id: 2, name: "지젤", realname: "우치나가 애리", team: "aespa", bf: "유지민" }, Object { id: 3, name: "윈터", realname: "김민정", team: "aespa", bf: "우치나가 애리" }, Object { id: 4, name: "닝닝", realname: "닝이줘", team: "aespa", bf: "김민정" }]

 

thisArg 를 이용하여 위와 동일한 기능을 구현하였다.

내부에 작성했던 함수를 보기 좋게 밖으로 뺐다고 보면 될 것 같다.

let arr_test = [{id : 1 , name : '카리나', realname : '유지민', team : 'aespa'}
                  ,{id : 2 , name : '지젤', realname : '우치나가 애리', team : 'aespa'}
                  ,{id : 3 , name : '윈터', realname : '김민정', team : 'aespa'}
                  ,{id : 4 , name : '닝닝', realname : '닝이줘' , team : 'aespa'}];
var makeBf = function(obj, i, org_arr){ obj.bf = org_arr.at(i-1).realname; return obj; }
arr_test = arr_test.map(makeBf);
console.log(arr_test);
//Array [Object { id: 1, name: "카리나", realname: "유지민", team: "aespa", bf: "닝이줘" }, Object { id: 2, name: "지젤", realname: "우치나가 애리", team: "aespa", bf: "유지민" }, Object { id: 3, name: "윈터", realname: "김민정", team: "aespa", bf: "우치나가 애리" }, Object { id: 4, name: "닝닝", realname: "닝이줘", team: "aespa", bf: "김민정" }]

 

이 외에 추가적으로 도움이 될 만한 예시를 모아 본다.

 

String을 순서대로 배열로 만들기는 보통 이렇게 처리한다.

var a = 'Hello World';
var arr = a.split('');
console.log(arr);
//Array ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

 

map() 함수를 사용하면 다음과 같이 구현 가능하다.

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { return x; });
console.log(a);
//Array ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

 

 

map() 메소드는 filter() 메소드와 함께 작업 효율을 엄청나게 높혀줄 수 있는 알아두면 반드시 도움이 되는 메소드라고 생각한다.