배열의 축소 : Array.reduce

배열의 축소(reduce) [Immutable]

 

1) 활용

• 배열에서 문자로
• 배열에서 숫자로
• 배열에서 객체로

여러 개의 값이 담긴 배열이 줄여서(reduce) 최종적으로 하나의 값으로 만드는 과정

 

 

2) 콜백을 이용하는 매소드

  ★ 리듀서 : 배열의 하나의 값으로 만드는 함수 <=reduce에서 콜백함수를 명칭

 

3) 구성요소

  3-1) 누적값(Accumulator/acc) : 배열의 요소를 하나하나 줄여나가면서 생기는 중간과정(결과)

  3-2) 현재값(Current Value/cur) :  리듀서가 배열을 지나갈 때 마나는 배열의 요소

  3-3) 초기값(Source Array/src) : 배열의 요소를 줄이기 전, 누적값의 초기 상태

 

4) 파라미터(전달인자) : 리듀서, 초기값

    : Array.reduce(reducer, [initialValue])

 

• 리듀서 합수는 리턴값이 필요하며, 다음번 리듀서 호출 시 첫번째 파라미터로 전달됨
• 리듀서 함수의 파라미터 순서 : 누적값, 현재 엘리먼트, 인덱스, 원본배열

5) 리턴값 : 리듀서가 마지막으로 리턴하는 값

 

 

 

---

 

 

[reduce 실전]

- 배열을 문자열로 (매개변수 파악하기)

 

아래와 같은 함수를 이용하여 reduce 매소드를 활용했을 때 진행 방식은 어떠한지 정리해보자

 

1. 첫번째 예시

function joinName(resultStr, user) {

  resultStr = resultStr + user.name + ', ';

  return resultStr;

}


let users = [

  { name: 'Tim', age: 40 },

  { name: 'Satya', age: 30 },

  { name: 'Sundar', age: 50 }

];


users.reduce(joinName, '');

 

 

 

 

1) reduce의 콜백 함수 joinName은 총 몇번 실행되나?

호출 횟수	resultStr	user	리턴 값
1번째 호출	''	{ name: 'Tim', age: 40 }	'Tim, '
2번째 호출	'Tim,'	{ name: 'Satya', age: 30 }	'Tim, Satya,'
n번째 호출	'Tim, Satya,'	{ name: 'Sundar', age: 50 }	'Tim, Satya, Sundar,'

2) 최종 리턴 값 : 'Tim, Satya, Sundar,'

 

 

 

---

 

 

2. 두번째 예시

function makeAddressBook(addressBook, user) {

  let firstLetter = user.name[0];


if(firstLetter in addressBook) {

    addressBook[firstLetter].push(user);

  } else {

    addressBook[firstLetter] = [];

    addressBook[firstLetter].push(user);

  }

return addressBook;

}


let users = [

  { name: 'Tim', age: 40 },

  { name: 'Satya', age: 30 },

  { name: 'Sundar', age: 50 }

];


users.reduce(makeAddressBook, {});

 

 

 

1) reduce의 콜백 함수 makeAddressBook은 총 몇번 실행되나?

호출 횟수	addressBook	user	리턴 값
1번째 호출		{ name: 'Tim', age: 40 }	{ T :    [ name: 'Tim', age: 40 ] }
2번째 호출	{ T :    { name: 'Tim', age: 40 }   }	{ name: 'Satya', age: 30 }	{ T :     [ name: 'Tim', age: 40 ]    }  S:    [ name: 'Satya', age: 30]    }
3번째 호출	{ T :     [ name: 'Tim', age: 40 ]   }  S:    [ name: 'Satya', age: 30 ] }	{ name: 'Sundar', age: 50 }	{ T :   [ name: 'Tim', age: 40 ]    }  S:    [ name: 'Satya', age: 30 ],    [ name: 'Sundar', age: 50 ]    }

 

 

 

2) 최종 리턴 값

{

  T: [

    { name: 'Tim', age: 40 }

  ],

  S: [

    { name: 'Satya', age: 30 },

    { name: 'Sundar', age: 50 }

  ]

}