Daily Programmers.js 3

평균구하기

가장 무난한 코드로 짜서 풀었다.
이번에도 역시나 다른사람들의 코드를 공부하는데 어제 공부한 => 함수와 reduce()메소드가 나왔다.
function average(array){
return array.reduce((a, b) => a + b) / array.length;
}
고작 한줄로 되는 것이였다니... 그렇담 reduce()를 공부해보자...정리하러들왔는데 하다가 머리 뽀개지는지 알았다.

reduce 정의

자바스크립트의 reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.

파라미터

callback function

다음 4가지의 인수를 가집니다.
accumulator - accumulator는 callback함수의 반환값을 누적합니다.
currentValue - 배열의 현재 요소
index(Optional) - 배열의 현재 요소의 인덱스
array(Optional) - 호출한 배열
callback함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환합니다.

initialValue(Optional)
최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생합니다.

이 함수는 예제를 보면서 이해해야 하는게 맞는 것 같다.

1.오브젝트 배열에서 원하는 항목의 값만 더하기

const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러',
    married: false,
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
    married: false,
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
    married: true,
  }
];

// 3명의 나이를 더해봅니다.
// 여기서 초기값 설정이 반드시 필요합니다.
const ageSum = friends.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.age;
}, 0);

왜 이게 되는가? 작동방식을 봐보자

예제2에서 initialValue를 반드시 넣어 줘야 하는 이유는 reduce의 작동 방식과 관련이 있습니다. (중요!)

initialValue를 설정했느냐 안했느냐에 따라 콜백의 최초 호출 시의 accumulator와 currentValue가 달라집니다.

• initialValue를 설정 한 경우

callback	 accumulator	currentValue	currentIndex
1번째 호출	  initialValue	배열의 첫번째 요소	     0

• initialValue를 설정하지 않은 경우

callback	accumulator	c       urrentValue	     currentIndex
1번째 호출	배열의 첫번째 요소	  배열의 두번째 요소	        1

처음 볼땐 이게 다 뭔소린가 싶었는데

const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러',
    married: false,
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
    married: false,
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
    married: true,
  }
];

// initialValue 설정X
const ageSum = friends.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.age;
});

// 첫번째 콜백 실행
// accumulator = { name: '양주진', age: 32, job: '코인러', married: false }
// currentObject = { name: '오영제', age: 32, job: '랩퍼', married: false }
// currentObject.age = 32
// accumulator + currentObject.age = TypeError

위 예제에서 initial value를 제외한것인데 타입에러가 나는걸 보고 이해가됬다.

예제는 아래에서 가져와쑴다. 샤라웃투 토코모!
https://tocomo.tistory.com/26