JavaScript reduce() 메서드 작동방식 설명 좀 해주세요.
관련링크
본문
<p id="demo"></p>
<script>
const numbers = [150, 50, 25];
document.getElementById("demo").innerHTML = numbers.reduce(myFunc); // 75
function myFunc(total, num) {
return total - num;
}
</script>
결과값이 75인데, 어떻게 동작해서 75가 나오는 건가요?
답변 2
chat gpt를 돌려봤습니다.
JavaScript의 reduce() 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 리듀서 함수는 네 가지 인자를 받을 수 있습니다: accumulator (누산기), currentValue (현재 값), currentIndex (현재 인덱스), sourceArray (원본 배열).
여기서 리듀서 함수 myFunc는 total과 num을 인자로 받고 있으며, total에서 num을 빼는 연산을 수행합니다.
reduce() 함수가 작동하는 방식은 다음과 같습니다:
total의 초기값은 배열의 첫 번째 요소 (150)이고,num의 값은 배열의 두 번째 요소 (50)입니다.- 첫 번째 호출에서
myFunc는150 - 50을 수행하여100을 반환합니다. - 이제
total은100이 되고, 다음num은 배열의 다음 요소인25입니다. - 두 번째 호출에서
myFunc는100 - 25를 수행하여75를 반환합니다.
배열의 모든 요소에 대해 이 연산이 끝나면, 최종적으로 75가 남습니다. 그래서 document.getElementById("demo").innerHTML에 75가 할당되어 결과적으로 웹 페이지에서 75가 출력됩니다.
저도 ChatGPT 돌려서 이 비슷한 답변을 받았는데, 1번부터 이해가 안 되더라구요.
total의 초기값은 배열의 첫 번째 요소 (150)이고, num의 값은 배열의 두 번째 요소 (50)입니다.
배열의 첫번째값인 150에 대해서 myFunc 함수 적용하면서 num자리에 두 번째 요소값이 온다는 것이 이해 안 되더라구요
구글 Bard 경우엔, 맨 처음요소엔 150에 대해서 함수 적용 시, undefined - 150 = 150 이란 식으로 설명하는데, 이 또한 이해가 안 되구요.
초기값이 없어서, 첫번째 요소는 건너뛰고 두번째요소부터 함수 적용하나봐요.
초기값이 없으면 배열의 첫번째 요소가 초기값으로 사용됩니다.
[150, 50, 25].reduce(myFunc);
[50, 25].reduce(myFunc, 150);
이런 셈이죠.
chat gpt를 한번 더 돌려봤습니다.
죄송합니다, 여기에서 조금 더 자세한 설명이 필요했습니다. JavaScript의 reduce 함수는 기본적으로 배열의 첫 번째 요소를 시작점(accumulator, 즉 total)으로 삼고, 배열의 두 번째 요소부터 끝까지 순회하면서 주어진 함수를 실행합니다.
배열 [150, 50, 25]를 가지고 reduce 함수가 myFunc를 어떻게 실행하는지 단계별로 살펴보겠습니다:
reduce 함수는 처음에 배열의 첫 번째 요소 150을 total로 설정합니다.
배열의 두 번째 요소 50이 num으로 설정됩니다.
myFunc 함수는 total (150)과 num (50)을 인자로 받아 계산을 수행하고, 결과인 100을 다음 단계의 total로 사용합니다.
다음 단계에서 이제 total은 100이 되고, 배열의 세 번째 요소 25가 num으로 설정됩니다.
myFunc 함수는 다시 total (100)과 num (25)을 인자로 받아 계산을 수행하고, 결과인 75를 최종 결과로 반환합니다.
이 과정을 코드로 나타내면 다음과 같습니다:
첫 번째 호출: myFunc(150, 50) → 반환 값은 100
두 번째 호출: myFunc(100, 25) → 반환 값은 75
따라서 최종 결과값은 75가 됩니다. reduce 함수에서 시작 값을 지정하지 않으면 자동으로 배열의 첫 번째 요소가 시작 값으로 사용됩니다. 만약 시작 값을 reduce 함수의 두 번째 인자로 명시적으로 제공하면 그 값부터 계산을 시작합니다.
예를 들어
const numbers = [150, 50, 25];
const result = numbers.reduce(myFunc, 10); // 시작 값을 10으로 설정
function myFunc(total, num) {
return total - num;
}
위 경우에는 10에서 시작해서 10 - 150 - 50 - 25를 계산하므로 결과값은 -215가 됩니다.
-225라고 답변 달았던 분이 답변을 삭제하셨네요.
옹프 님이 잘못된 답변을 달아서 삭제하신 듯...ㅎ
