JavaScript reduce() 메서드 작동방식 설명 좀 해주세요.

JavaScript reduce() 메서드 작동방식 설명 좀 해주세요.

QA

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 (원본 배열).

여기서 리듀서 함수 myFunctotalnum을 인자로 받고 있으며, total에서 num을 빼는 연산을 수행합니다.

reduce() 함수가 작동하는 방식은 다음과 같습니다:

  1. total의 초기값은 배열의 첫 번째 요소 (150)이고, num의 값은 배열의 두 번째 요소 (50)입니다.
  2. 첫 번째 호출에서 myFunc150 - 50을 수행하여 100을 반환합니다.
  3. 이제 total100이 되고, 다음 num은 배열의 다음 요소인 25입니다.
  4. 두 번째 호출에서 myFunc100 - 25를 수행하여 75를 반환합니다.

배열의 모든 요소에 대해 이 연산이 끝나면, 최종적으로 75가 남습니다. 그래서 document.getElementById("demo").innerHTML75가 할당되어 결과적으로 웹 페이지에서 75가 출력됩니다.

저도 ChatGPT 돌려서 이 비슷한 답변을 받았는데, 1번부터 이해가 안 되더라구요.
total의 초기값은 배열의 첫 번째 요소 (150)이고, num의 값은 배열의 두 번째 요소 (50)입니다.
배열의 첫번째값인 150에 대해서 myFunc 함수 적용하면서 num자리에 두 번째 요소값이 온다는 것이 이해 안 되더라구요

구글 Bard 경우엔, 맨 처음요소엔 150에 대해서 함수 적용 시, undefined - 150 = 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라고 답변 달았던 분이 답변을 삭제하셨네요.

답변을 작성하시기 전에 로그인 해주세요.
전체 253
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT