// map() 메서드
// [1]: map() 메서드란 무엇인가?
// 배열내 요소를 반복하면서 1 vs 1로 매핑지어 주는 것
// Mapping --> 하나의 값을 다른 값으로 1 vs 1 로 매핑시키는 것
// http://www.naver.com --> IP 주소
// [2-1] : 예
const testAr = [1, 2, 3, 4, 5];
const testAr2 = testAr.map(function(val) {
// 할 일 처리 --> return
return val * 10;
});
console.log(testAr2); // 10, 20, 30, 40, 50
---------------------------------------------------------------------------------------------------------
// [2-2] : Arrow Function
const testAr = [1, 2, 3, 4, 5];
const testAr2 = testAr.map(v=>v*10);
console.log(testAr);
console.log(testAr2); // 10, 20, 30, 40, 50
console.log(testAr);
---------------------------------------------------------------------------------------------------------
// [2-3] : 짝수, 홀수
const testAr = [1, 2, 3, 4, 5];
const testAr2 = testAr.map(val=>{
// 할 일 처리 --> return
if(val % 2)
return 'Odd Number';
return 'Even Number';
});
console.log('원본 배열 : ' + testAr);
console.log('새로운 배열 : ' + testAr2);
console.log('원본 배열 : ' + testAr);
console.log(testAr === testAr2); // false --> 맵은 원본 배열을 건드리지 않고 새로운 배열을 생성
console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
---------------------------------------------------------------------------------------------------------
// map()메서드 활용 --> 배열내 객체를 원하는 형태로 바꾸기
// [1] : 주어진 형태
const testAr = [
{key:'홍길동', value:10},
{key:'이순신', value:20},
{key:'강감찬', value:30},
{key:'을지문덕', value:40}
];
// [2] : 바꾸기 --> {홍길동 : 80}
const changeNewAr = testAr.map(obj=>{
//할 일 처리 --> return
let newObj = {};
newObj[obj.key] = obj.value;
return newObj;
});
console.log(testAr);
console.log(changeNewAr);
console.log(changeNewAr[0].홍길동); // 10
---------------------------------------------------------------------------------------------------------
// map() 메서드 활용 --> 특정 문자열을 배열과 객체로 변환(구조 분해 할당)
// [1] : 문자열 --> 배열로 --> 객체로 변환
// 이때 --> 최종 객체로 변환시 배열 요소내의 값들 중에서 --> 숫자만 판별해서 변환
// [2] : 실습
// 문자열
const someStr = "홍길동 10, 이순신 20, 강감찬 30, 김유신 40, 을지문덕 50";
// 배열로 만들기
const frag = someStr.split(', ');
// console.log(frag);
// 객체로 만들기
// const dataObj = {};
// 반복 --> map() --> 콜백함수 내에서 처리한 결과를 1 vs 1 매핑해서 배열로 return --> 결과 변수를 만들어 받음
const result = frag.map(val=>{
let [k, v] = val.split(' ');
return {k, v};
});
// 출력
console.log(result);
---------------------------------------------------------------------------------------------------------
// [2] : 실습
// 문자열
const someStr = "홍길동 10, 이순신 20, 강감찬 30, 김유신 40, 을지문덕 50";
// 배열로 만들기
const frag = someStr.split(', ');
// 반복 --> map() --> 콜백함수 내에서 처리한 결과를 1 vs 1 매핑해서 배열로 return --> 결과 변수를 만들어 받음
const result = frag.map(val=>{
let [k, v] = val.split(' ');
return {k, v:Number.isNaN(Number(v)) ? v : Number(v)};
});
// 출력
console.log(result);
// 문자열 --> frag(원본배열) --> map() --> 객체의 형태 --> 우리가 원하는 형태X --> 우리가 원하는 객체의 형태({홍길동:10})
// 원하는 형태의 객체로 바꾸기
const result2 = result.map(obj=>{
// 할 일 처리 --> return
let newObj = {};
newObj[obj.k] = obj.v;
return newObj;
});
console.log(result2);
---------------------------------------------------------------------------------------------------------
// map()메서드와 reduce() 메서드 동시 활용 --> 특정 문자열을 배열과 객체로 변환
// [1] : 문자열 --> 배열로 --> 객체로 변환
// 이때 --> map() 메서드와 reduce() 메서드를 함께 사용이 가능(Method Chaining)
const someStr = "홍길동 10, 이순신 20, 강감찬 30, 김유신 40, 을지문덕 50";
// 배열로 만들기
const frag = someStr.split(', ');
// 반복 --> map() --> reduce()
const result = frag.map(val=>{
// 할 일 처리 --> return
let [k, v] = val.split(' ');
return {k, v:Number.isNaN(Number(v)) ? v : Number(v)};
});
const resutl2 = result.reduce((acc, obj) => {
// 할 일 처리 --> return
acc[obj.k] = obj;
return acc;
}, {});
console.log(result);
console.log('---------------------------------------------------------------------------------------------------------');
console.log(result2);
---------------------------------------------------------------------------------------------------------
