Array.prototype.map

map

---

반복문을 돌면서 배열 안 모든 요소들에게 callback 함수를 실행한다.

---

문법

array.map((요소,인덱스,배열) => {return 요소});

---

map의 활용

---

오브젝트의 배열을 받아 각 오브젝트를 다른 형태으로 재구성해 새로운 배열을 만든다. 단, 배열 안에 객체가 들어있는 경우, 객체는 공유된다.

2차원부터는 공유가 되는 얕은 복사의 개념이라고 생각한다.

---

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

const reformattedArray = kvArray.map(function(tomato){
const potato = {};
potato[tomato.key] = tomato.value;
return potato;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 변경되지 않음.

---

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

다음 코드는 매개변수가 하나인 함수를 사용하여 map이 어떻게 동작하는지 나타낸다.
매개변수로 들어가는 배열의 요소들은 map을 통해 순회하면서 함수를 실행하며 doubles에 할당된다. num이 들어갈 자리에는 아무 글자나 써도 된다.

---

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

---

이해하기 위한 응용 예제 1. 기존 배열에서 필요한 값 추출하기

    const stringClass = [
            {name : "Kimjihan", ins : "violin"},
            {name : "Choidonghee", ins : "viola"},
            {name : "Parkjinhan" , ins : "cello"},
            {name : "Leemyungji" , ins : "contrabass"}
        ];

const newClass = stringClass.map(tomato => tomato.ins);

newClass
(4) ['violin', 'viola', 'cello', 'contrabass']

---

이해하기 위한 응용 예제 2. 기존 배열의 특정 값만 변경하기

const stringClass = [
            {name : "Kimjihan", ins : "violin"},
            {name : "Choidonghee", ins : "viola"},
            {name : "Parkjinhan" , ins : "cello"},
            {name : "Leemyungji" , ins : "contrabass"}
        ];

const newClass = stringClass.map(tomato => {
	if(tomato.name === "Leemyungji"){
	return { ...tomato, ins : "kontrabasso"};
}
     return {...tomato};
});

newClass
0: {name: 'Kimjihan', ins: 'violin'}
1: {name: 'Choidonghee', ins: 'viola'}
2: {name: 'Parkjinhan', ins: 'cello'}
3: {name: 'Leemyungji', ins: 'kontrabasso'}

---

이해하기 위한 응용 예제 3. 모든 수를 짝수로 만들기

---

const arrayForMap = [11,2,3,4,5,6,7,8,1,10,124];
let result = arrayForMap.map((tomato) =>{
if(tomato % 2 === 0){
return tomato
}else{
return tomato - 1;
}});

result
> (11) [10, 2, 2, 4, 4, 6, 6, 8, 0, 10, 124]

arrayForMap의 배열 요소들을 map을 통해 2로 나뉘면 그대로 리턴을, 나뉘지 않는다면 -1을 하여 짝수로 만든 후 새로운 배열 result로 들어가게 하였다.

---

이해하기 위한 응용 예제 4. 배열 요소에 String 붙이기

---

const arrayForMap = [11,2,3,4,56,7,8,1,10,124];
let result = arrayForMap.map((v) =>{
if(v%2 === 0){
return v + "는 짝수"
}else{
return v + "는 홀수"
}});

result
(11) ['11는 홀수', '2는 짝수', '3는 홀수', '4는 짝수', '5는 홀수', '6는 짝수', '7는 홀수', '8는 짝수', '1는 홀수', '10는 짝수', '124는 짝수']

let result에 map 값을 받았고, 배열 arrayForMap은 값이 달라지지 않는다.

---