[JavaScript] 자바스크립트 reduce() 이해하기 - 뭘 배웠지?

MDN에 나온 정의에 reduce는 이렇게 나와있다.

 

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

MDN reduce 페이지 참조

위의 페이지에서 설명을 보고, 예제를 실행해도 감이 오지 않는다.

 

 

밑의 예제를 보고가기전 여기 reduce에 대한 기본을 우선 알자

• reduce는 배열이 들어가서 하나의 값이 나온다.
• reduce는 함수와 초기값를 넣을 수 있다.
• 함수는 4개의 매개변수(parameter)를 갖는다 (여기선 간단하게 2개로 예를들었습니다.)
• 첫 번째 매개변수는 '초기값' 혹은 '누적값'이라고 부르자
• 두 번째 매개변수는 '현재값'이라고 부르자
• 첫 번째 매개변수에 '초기값'이 정해지지 않으면 배열의 첫 번째 값을 갖는다.

 

 

이해를 꼭 하고 넘어가고 싶어, FreeCodeCamp에 질문을 하고 광명을 찾았다.

---

 

function findLongestWordLength(str) {
  const arr = str.split(' ');
  const reducer = function(x, y) {
    return Math.max(x, y.length);
  }
  return arr.reduce(reducer, 0);
}

console.log(findLongestWordLength("The quick brown fox jumped over the lazy dog"));

이 예제는 findLongestWordLength 함수에 입력된

"The quick brown fox jumped over the lazy dog" 에서

가장 긴 단어를 찾아서 길이를 알려주는 내용이다.

 

 

function findLongestWordLength(str)

위에 줄부터 해석해 나가면

findLongestWordLength 라는 함수를 만든다.

문장을 받을 수 있게 매개변수(parameter) 'str' 1개와 함께

 

 

const arr = str.split(' ');

split은 이렇게 사용된다. str에 들어온 문장을 자른다.

받은 문장을 띄어쓰기(' ')를 기준으로 잘라서 'arr' 변수에 배열로 저장한다.

즉 'arr'에는 ['The', 'quick', 'brown', 'fox', 'jumped', 'over', 'the', 'lazy', 'dog'] 이 들어간다.

 

 

const reducer = function(x, y) {
    return Math.max(x, y.length);
  }

그다음 reducer 함수를 만들어주는데, 얘의 역할은 두 수를 비교해서 큰 놈을 리턴해준다.

Math.max가 그런 역할은 한다. 비교해서 큰 값을 주는 그런 역할

둘의 단어 길이를 비교하는데 왜 x에는 length를 안썼을까?

그건 뒤에서 알아보자.

 

 

return arr.reduce(reducer, 0);

reduce 드디어 나왔다.

reduce는 함수, 초기값을 집어넣을 수 있다. 여기선 초기값을 0으로 넣어줬다.

간단한 숫자만 상대할 때는 안넣어줘도 된다고 한다.

 

 

그럼 해석 시작

x가 누적값(초기값) 이라고 하고, y가 현재값이라고 하자.

초기값은 reduce(reducer, 0)으로 0을 넣어줬다.

그럼 x 는 0, y는 'The'가 되겠지 The는 길이가 3이니

Math.max로 비교하면 0이 큰가, 3인 큰가

3이 크지

 

다음 차례로 넘어가서

x는 누적값이라고 했으니 3을 가지고, y는 'quick'을 갖는다.

quick의 길이는 5지

그럼 둘 의 큰 수는 5

그래서 누적값은 5를 가져간다.

 

이런 식으로 다음 차례 다음차례 가다보면

'jumped'가 현재값으로 들어오게 되고 얘가 6글자로 짱을 먹는다.

그러니 console.log에 찍힌 값이 6이 된다.

 

 

마지막으로 아까 x.length를 안쓴이유

만약 x.length 가 있었다고 생각해보자

그래도 처음까지는 괜찮다, 초기값이 정해지지 않으면 배열의 첫 번째 값을 가지니까

그럼 x는 'The'가 되고, y는 'quick' 둘의 길이를 비교해서(length 함수) 5가 나오겠지

그럼 5가 누적값으로 들어가게 된다.

즉 x 가 5가 된다. 그러면 숫자 5에다가 length 함수를 쓰는 상황이 되는데

이러면 undefined을 출력하게 되고 여기서부터 에러를 만들게 된다.