ES6] map() 을 활용한 다양한 Array, Object 연산방법

map() : 배열속 모든 element를 가지고 함수를 실행한 결과값을 새로운 배열로 반환하는 함수이다. 

//분기별 한 고객당 판매금액을 계산하려고 한다. 
//1분기에는 20명의 고객이 100만큼 구매했으며 1명당 5(=100/20)만큼 구매했다. 
let obj분기별판매금액 = { '1분기': 100, '2분기': 110, '3분기': 80, '4분기': 150 };
let obj분기별구매고객 = { '1분기': 20, '2분기': 11, '3분기': 20, '4분기': 30 };

let obj분기별고객당판매금액 = {};
Object.keys(obj분기별판매금액).map(key => obj분기별고객당판매금액[key] = obj분기별판매금액[key]/obj분기별구매고객[key]);

console.log(obj분기별고객당판매금액);

출력 : {1분기: 5, 2분기: 10, 3분기: 4, 4분기: 5}

syntax : array.map(callback(currentValue, index, arr), thisValue)

 

callback : 새로운 배열을 반환하는 함수

currentValue : 현재 element

index(Optional) : 현재 element의 배열 순서

arr(Optional) : array

 

1. 이제 map()을 활용하여, array element를 2로 나누어보자. 

//map() 함수는 새로운 배열을 반환하기 때문에 기존의 arr 을 출력하면 값이 변경되어 있지 않다. 
let arr = [10, 20, 30, 40, 50];

arr.map(function(element){
  return element/2
});

console.log(arr);

출력 : [10, 20, 30, 40, 50]

//arr배열 element를 변경하려면 map()함수의 결과 배열을 arr배열에 재할당 해야한다.  
let arr = [10, 20, 30, 40, 50];

arr = arr.map(function(element){
  return element/2
});

console.log(arr);

출력 : [5, 10, 15, 20, 25]

//function을 밖으로 뺄 수 있다. 
let arr = [10, 20, 30, 40, 50];

function myFunction(num) {
  return num/2;
}

arr = arr.map(myFunction);

console.log(arr);

출력 : [5, 10, 15, 20, 25]

//arrow function으로 변경할 수 있다.  
//arrow function은 parameter가 1개일 경우 괄호 삭제할 수 있다. 
let arr = [10, 20, 30, 40, 50];

//arr = arr.map((element) => {return element/2});
arr = arr.map(element => {return element/2});

console.log(arr);

출력 : [5, 10, 15, 20, 25]

//arrow function을 더 간단하게도 쓸 수 있다. 
let arr = [10, 20, 30, 40, 50];

arr = arr.map(element => element/2);

console.log(arr);

출력 : [5, 10, 15, 20, 25]

 

 

2. array element를 정해진 수가 아닌, 다른 array element로 나눠보자. 

//분자array element를 순서대로 분모array element로 나누어보자. 
//10은 1로 20은 2로... 결과는 동일하게 10이 나온다. 
let 분자 = [10, 20, 30, 40, 50];
let 분모 = [1, 2, 3, 4, 5];

//element의 index를 알기 위해 index parameter를 추가하였고 
//2개의 이상의 parameter는 괄호로 감싼다. 
let 결과 = 분자.map((element, index) => element/분모[index]);

console.log(결과);

출력 : [10, 10, 10, 10, 10]

 

3. object value를 다른 object value로 나눠보자. 

//분기별 한 고객당 판매금액을 계산하려고 한다. 
//1분기에는 20명의 고객이 100만큼 구매했으며 1명당 5(=100/20)만큼 구매했다. 
let obj분기별판매금액 = { '1분기': 100, '2분기': 110, '3분기': 80, '4분기': 150 };
let obj분기별구매고객 = { '1분기': 20, '2분기': 11, '3분기': 20, '4분기': 30 };

let obj분기별고객당판매금액 = {};
Object.keys(obj분기별판매금액).map(key => obj분기별고객당판매금액[key] = obj분기별판매금액[key]/obj분기별구매고객[key]);

console.log(obj분기별고객당판매금액);

출력 : '1분기': 100, '2분기': 110, '3분기': 80, '4분기': 150