Javascript

map vs reduce 개념 차이 성능 속도 비교

알로호모라 2022. 7. 11. 14:22
반응형

 

Map & Reduce

map 과 reduce 모두 항상 array에 사용한다. 

ex.

[1,2,3,4].map(() => {}) 

[{a:1}, {b:2}, {c:3}].reduce(() => {}) 

 

 

 

Map 

map은 항상 기존의 array가 가진 동일한 수의 elements를 담은 array를 반환한다. 만약 기존 array 의 elements가 5개라면 반환되는 array의 elements도 5개이다. 

 

array의 각각의 개별 element에 변화를 주고 싶을 때 map을 사용한다. 

 

example)

const array = [1,2,3,4];

const mapArray = array.map((ele) => {
  return Math.pow(ele, 2);
});

console.log(mapArray);)  // [ 1, 4, 9, 6 ]

 

 

 

Reduce

Reduce는 map과 달리 single value 를 반환한다. array의 모든 elemetns에 접근하여 하나의 output 결과값을 반환하고 싶을 때 reduce를 사용한다. array의 결과가 하나의 값으로 "줄여진다" 라고 생각해서 "reduce" 를 이해하면 좋을 것 같다. 하나의 값이지만 object, array와 같은 복잡한 결과일 수도 있다. 

 

하나의 값으로 표현되는만큼 reduce 인자값 두 번째 자리에 초기값을 설정할 수 있다.

숫자 0, 빈 배열 [], 객체 {} 등 모두 가능하다. 

 

example) 

const array2 = [1,2,3,4];

const reduceArray = array2.reduce((sum, ele) => {
  return sum+ele; 
}, 0)  // default not defined ===> array2[0]

console.log(reduceArray); // 10

reduce(Fn, defaut value(optional)) 에 default value가 설정되어있지 않으면 배열의 첫 번째 요소를 디폴트값으로 한다. 

 

 

 

 

Reduce를 사용하지않는 것이 좋은 경우 , When not to use reduce

reduce는 구조 변환을 위한 다목적용 매서드이다. 만약 array 를 다시 return 받고, 내가 원하는 값을 반환하는 다른 매서드가 존재한다면 먼저 다른 매서드를 사용하는 것이 좋다. 

 

특히 배열의 배열 구조인 경우 reduce보다는 flatMap, flat 등을 먼저 사용하기. 

 

 

 

 

Map vs Reduce Performance Difference 

매서드의 performance는 데이터 사이즈에 따라 다르고, 처리 속도 또한 컴파일러 최적화, 데이터 warm-up에 따라 다르기 때문에 상황에 맞춰(?) 사용해야 할 것 같다. 아래는 어떤 프로그래머 분이 직접 데이터의 사이즈별 속도를 측정해 놓은 것인데 데이터가 적을 때는 map이 reduce보다 더 빠르고, 데이터가 2만 건을 넘어간 후부터는 reduce가 더 빠르고, map의 속도가 급격히 느려진다. 

 

 

 

데이터가 5만 건 이상인 경우

 

 

 

 

 

Reference :https://github.com/dg92/Performance-Analysis-JS

https://stackoverflow.com/questions/49934992/main-difference-between-map-and-reduce

반응형