[TIL] 20230706 - reduce vs forloop 누가누가빠른가?좋은코드?멋있는코드?ㅎㅎ 성능비교

프로그래머스 문제를 풀고 다른사람 답변들 보던중

댓글에 의견이 많이 달린 글을 보다가 관심이 생겨서 가져왔다 ㅎㅎ

나는 for문을 썻는데

reduce를 사용한 답변

function solution(absolutes, signs) {
    return absolutes.reduce((acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0);
}

답변에 짧고 간결해서 좋다는 의견과 

이코드는 for문이 더 빠르고 가독성이 좋고

멋있는코드와 좋은코드를 생각해봐야 한다는 등 의견이 분분했다

 

$.each(제이쿼리 객체) < map < filter == forEach < reduce < for loop 순 이라는데

그래서 찾아보다가 잘 정리되어 있는 글이 있어서 가져왔다

 

[ for문 ]

for (let i = 0; i < 10; i++) {
  console.log(arr[i]);
};

• 가장 빠르고 단순. 효율적
• 중간에 건너뛰기나 종료가 가능 (continue / break)
• 반복범위 컨트롤 가능 (i++, i-, i+=2 등)
• 변수 활용 가능

[ forEach ]

arr.forEach(function(currentValue, index, arr) {
  console.log(currentValue);
});

//
function(currentValue, index, arr) - 배열의 각 항목에 대해 실행할 함수
currentValue - 배열의 값
index (선택 사항) - 현재 항목의 인덱스
arr (선택 사항) - 현재 항목의 배열

• 빠른편
• Array객체에서 사용이 가능
• 일반 for문보다 가독성이 좋고, 객체형을 다루기가 쉽다
• for문과 다르게 중간에 끊을 방법이 없다 (return으로 skip가능)
• return값을 받지 못한다

[ filter ]

let newArr = arr.filter(function(currentValue, index, arr) {
  return condition;
});

boolean형태의 return값을 배열로 반환한다. return값이 true일경우, 그 요소를 반환하고 false일경우, 반환하지 않는다. 기본값은 false

• 빠른편
• Array객체에서 사용이 가능
• chainable하다
• 빈 배열 요소를 반환하지 않는다
• 대용량 배열 처리시 메모리 overflow 가능성이 있다
• return값은 true/false이며, 요소를 반환한다

[ map ]

let newArr = arr.map(function(v, i, arr) { //currentValue, index, arr
  return condition;
});

filter는 return값으로 true인 요소만 반환하지만, map의 경우 가공된 새로운 값을 만들어서 배열로 return한다. 기존 배열 length만큼 반환한다.

• 빠른편
• Array객체에서 사용이 가능
• chainable하다
• 대용량 배열 처리시 메모리 overflow 가능성이 있다
• return값 자체를 반환한다

[ reduce ]

var arr = [1, 2, 3, 4, 5];
var newArr = arr.reduce(function(acc, v, i, arr) { // accumulator, currentValue, index, arr
  return acc + v;
});
// 15

//
누산기 (acc)
현재 값 (cur)
현재 인덱스 (idx)
원본 배열 (src)

reduce의 가장 큰 특징으로는 첫번째 인자인 accumulator 이다. accumulator 는 return값을 누적하는데, 계속해서 전달받아서 사용할 수도 있다.

두번째 특징은 accumulator의 초기값을 설정할 수 있다는 점이다. optional하며 생략시에는 첫번째 return값이 된다. 아래 예시를 보자.

var arr = [1,2,3,4,5]
var newArr = arr.reduce(function(acc, v, i, arr) {
  return acc + v;
}, 100);
// 115

첫번째 예시와 다르게 초기값 때문에 115라는 값이 나오게 됬다. 어떻게 활용하느냐에 따라 reduce는 강력하고 확장성이 높다. accumulator의 값은 배열이 될수도 있고, object가 될수도 있다.

 

reduce는 잘 안써봐서 익숙하지 않은데

공부를더 많이 해봐야겠다 ㅎㅎ 유용하게 잘쓸수도있을듯 ㅎㅎ

 

성능비교

https://jsperf.com/dslooppf

 

https://daesuni.github.io/Loop-performance/

https://gurtn.tistory.com/121