map 메서드, reduce 메서드

// 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);


---------------------------------------------------------------------------------------------------------