FE-StudyWithMe / FE-without-framework

프레임워크 없는 프론트엔드 개발을 위한 레포지토리🔥
28 stars 0 forks source link

[etc] reducer를 이렇게 사용하는게 맞을까요? #21

Closed jasongoose closed 1 month ago

jasongoose commented 1 month ago

🧐 Question

저는 배열의 reduce 메서드를 사용할 때 아래와 같이 콜백함수에서 누적된 값을 반환하는 방식으로 사용하고 있는데,

const value =[1, 2, 3, 4, 5, 6, 7, 8, 9].reduce((acc, curr) => {
  return curr % 2 ? acc : acc.concat(curr);
}, []);

// [2, 4, 6, 8]

팀원 한 분이 누적값을 반환하는 방식이 아닌 직접 초기값을 조작하는 방식으로 구현하십니다.

const value =[1, 2, 3, 4, 5, 6, 7, 8, 9].reduce((acc, curr) => {
  if (curr % 2 === 0) {
     acc.push(curr); // <-
  }
  return acc;
}, []);

왜 이렇게 구현하는지 여쭤보면 뭔가 성능을 위해서라고 하시는데, 이 방법에 대해 다들 어떻게 생각하시나요?

📝 Reference

chhw130 commented 1 month ago

@jasongoose

const value =[1, 2, 3, 4, 5, 6, 7, 8, 9].reduce((acc, curr) => {
  if (curr % 2 === 0) {
     acc.push(curr); // <-
  }
}, []);

스크린샷 2024-10-14 오전 11 13 16

반환값이 없어서 첫 반복문 시행후 acc가 undefined가 되는 것 같은데, 예시 코드를 수정해주셔야 할 것 같아요!

jasongoose commented 1 month ago

반환값이 없어서 첫 반복문 시행후 acc가 undefined가 되는 것 같은데, 예시 코드를 수정해주셔야 할 것 같아요!

수정했습니다~

chhw130 commented 1 month ago

첫번째 코드는 acc.concat()으로 계속 새로운 배열을 만들어서 성능적으로 떨어질 수 밖에 없는 것 같아요. 반면 두번째 코드는 새로운 배열을 생성하지 않고 계속 acc를 참조한채 반복되어서 성능적인 면으로 좋을 수 밖에 없는거 같고요.

스크린샷 2024-10-14 오후 1 58 49

두 코드를 벤치마크 돌렸을 때 성능 차이가 10배까지 나네요. ㅋㅋㅋㅋㅋ