Array.prototype.map()
한 줄 요약
배열의 원소들을 다른 형태로 만든 새로운 배열을 생성하는 함수입니다.
일단 보여주세요.
|
const dataSet = [
{
name: "한놈",
age: 12
},
{
name: "두식이",
age: 26
},
{
name: "석삼",
age: 11
},
{
name: "너구리",
age: 18
}
];
const ageList = dataSet.map(function(item){
return item.age;
});
console.log(ageList); // [12, 26, 11, 18]
|
cs |
name와 age라는 property를 가지는 객체의 배열에서 age를 숫자로 가지는 배열이 생성되었습니다.
함수 시그니처
map(callback(currentValue[, index[, array]])[, thisArg])
그냥 단순하게 외우려면
map(mapper: (item: any, index?: number, array?: Array) => any)
mapper는 어떻게 map을 진행할지 기술하는 함수입니다. 이 함수는 3가지 파라미터를 가집니다.
- item에는 원본 배열의 각 원소 값이 주어집니다.
- index는 item에 주어진 값이 원본 배열에서 몇 번째 인덱스에 위치하는지 알려 줍니다. (옵션)
- array는 원본 배열입니다. (옵션)
map은 원본 배열을 변경하지 않고 새 배열을 생성합니다만 mapper 함수에서 array를 조작할 경우 변경될 수도 있습니다.
mapper 함수의 array 변수를 조작하여 map이 처리되는 동안 원본 배열을 조작할 수는 있지만 map이라는 연산의 성격과 맞지 않는 조작이므로 지양하시는 것이 좋습니다. (동작을 예측하기 어려워집니다.)
활용해 봅시다.
숫자 배열의 각 원소를 2배한 뒤 제곱한 새 배열을 생성하는 예제입니다.
|
const dataSet = [1, 2, 3, 4, 5];
const newDataSet = dataSet.map(function(item){
const twice = item * 2;
return twice * twice;
});
console.log(newDataSet); // [4, 16, 36, 64, 100]
|
cs |
map이 아니라 for문을 사용했다면 아래와 같이 작성해야 했을 것입니다.
|
const dataSet = [1, 2, 3, 4, 5];
const newDataSet = [];
for(let item of dataSet){
const twice = item * 2;
newDataSet.push(twice * twice);
}
console.log(newDataSet); // [4, 16, 36, 64, 100]
|
cs |
map을 적절히 활용하면 for문의 사용을 줄일 수 있습니다. for문만으로는 이 코드가 무엇을 하는지 알기 위해서는 for문의 내용을 자세히 뜯어봐야 하지만 map은 그 자체로 뭘 하는지 알려주므로 코드의 가독성이 높아집니다.
어느 상황에서 쓰면 좋을까요?
똑같은 구조의 객체로 구성된 배열에서 그 객체의 일부 정보만 필요할 때 쓰기 좋습니다. "일단 보여주세요" 섹션에서 보여준 예제가 이에 해당합니다. 이름과 나이로 구성된 객체의 배열에서 나이 정보만 필요할 때 map을 이용하면 쉽게 데이터를 변환할 수 있습니다.
더 활용하기
사실 map은 그 자체로는 활용도가 크게 많지는 않습니다. 하지만 Array.prototype.reduce과 함께 쓰인다면 무궁무진한 활용이 가능합니다.
더 많은 정보가 필요하면
전 reduce 보다도 map이 정말 매력적인거 같아요 사실상 자바스크립트 개발은 Array 메서드랑 Json 직렬화 때문에 사랑하고있습니다