[Javascript] Map API 활용법

1. 배열 안에 객체에 key, value를 넣고자 할 때

let arr = [
	{ name: 'Gildong' },
    { name: 'Chulsu' }
]

arr.map((el) => {
	el.gender = 'male';
	return el;
});

// 결과
[{ name: 'Gildong', gender: 'male' }, { name: 'Chulsu', gender: 'male' }]

2. 배열 안 객체 안의 객체에 key, value를 넣고자 할 때

let arr = [
	{ name: 'Gildong',
      children: [{ name: 'gana' }, { name: 'dara' }]
    },
    { name: 'Chulsu',
      children: [{ name: 'maba' }]
    },
]

arr.map((el) => {
	el.children.map((el2) => {
    	el2.gender = 'male'
        return el2;
    })
    retrun el;
});

// 결과
 [{ name: 'Gildong', children: [{ name: 'gana', gender: 'male' }, { name: 'dara', gender: 'male' }]}, { name: 'Chulsu', children: [{ name: 'maba', gender: 'male' }]}]

3. 배열 안 객체에 특정 요소만 재정의할 때

let arr = [
	{ name: 'Gildong' },
    { name: 'Chulsu' }
]

arr.map((el) => {
	if(el.name === 'Gildong') {
    	{ ...el, name: 'Maengu' }
    }
    return { ...el };
});

// 결과
[{ name: 'Maengu' }, { name: 'Chulsu' }]

4. 배열 안 객체에 특정 요소만 배열로 생성하고자 할 때

let arr = [
	{ name: 'Gildong' },
    { name: 'Chulsu' }
]

arr.map((el) => el.name);

// 결과
['Gildong', 'Chulsu']

5. 배열 안 객체에 특정 요소들만 배열로 생성하고자 할 때

let arr = [
	{ name: 'Gildong', firstName: 'Hong', gender: 'male' },
    { name: 'Chulsu', firstName: 'Kim', gender: 'male' }
]

arr.map((el) => {
	obj = {
    	name: el.firstName,
        gender: el.gender
    };
    return obj;
};

// 결과
[{ name: 'Hong', gender: 'male' }, { name: 'Kim', gender: 'male' }]

6. 객체의 value값을 key와 value로 재정의하고자 할 때

let arr = [
	{ key: "숫자", value: 10 },
	{ key: "숫자", value: 20 },
	{ key: "숫자", value: 30 },
];
arr.map((el) => {
	let obj = {};
	obj[el.key] = el.value;
	return reObj;
})

//결과
[{ '숫자': 10 }, { '숫자': 20 },{ '숫자': 30 }]

7. 객체의 value값을 합치고자 할 때

let arr = [
	{ name: 'Gildong', firstName: 'Hong' },
    { name: 'Chulsu', firstName: 'Kim' }
]
arr.map((el) => {
	return `${el.firstName} ${el.name}`;
});

// 결과
['Hong Gildong', 'Kim Chulsu']

8. 배열 안에 배열이 있는 경우

let arr = [
	[1, 2],
	[3, 4],
;
arr.map((el) => el.map((num) => num * 2));

// 결과
[[2, 4], [6, 8]]