자바스크립트 reduce함수

이수연·2022년 12월 20일
0

자바스크립트

목록 보기
16/19
  arr.reduce(callback[, initialValue])

mdn에서 정의하기를 리듀스매서드 안의 콜백함수의 첫번째 인자값은 콜백의 반환값의 누적값, 두번째 인자값은 현재값으로 정의내리고, 리듀스 매서드의 두번째 값으로 초기값을 설정합니다. 보통 리듀스 함수를 사용예시를 보면 덧셈에 비유하여 많이 설명 하지만, 리듀스함수의 반환값은 사용자가 구현하는것에 따라 달라지기때문에 리듀스함수는 강력합니다. 아래의 예시를 보면서 설명을 이어 가겠습니다.

Array.from('abbc1A').reduce((map, char) => {

   
      if (!((char >= 'a' && char <= 'z') || (char >= 'A' && char <= 'Z')))
        return map; // 알파벳 조건에 충족되지 않으면 그냥 map 반환

        map[char] = (map[char] || 0) + 1;
    
      return map;
    }, {});

위의 예시는 알파벳입력값을 받아서 각각의 알파벳의 값을 구하는 로직입니다. 처음 초기값을 {} 객체로 설정하고 리듀스 함수가 처음돌때 객체안의 char[0]번째 즉 a가 키값으로 있는지 찾습니다.
처음 초기값이 {} 빈객체이기때문에 map[char]에는 undifiened가 나오며 값이 true가 아니므로
map[char] = undifiened|| 0 +1 이 되며
map[char] = {a: 1}이 됩니다.

이런식으로 배열의 길이만큼 순회하면

      /* 
        map 1 cycle
        {}
        map 2 cycle
        { a: 1 }
        map 3 cycle 
        { a: 1, b: 1 }
        map 4 cycle
        { a: 1, b: 2}
        map 5 cycle
        { a: 1, b: 2, c: 1 }
        map 6 cycle
        { a: 1, b: 2, c: 1 }
        */

위와 같이 순회를 끝난후 반환받은 리턴값은 { a: 1, b: 2, c: 1 }인 객체를 반환하게 됩니다.

0개의 댓글