JavaScript reduce(), find()

1.Reduce() , Array.prototype.reduce(callback[, initialValue])

Reduce 함수란?

reduce는 사전적으로 줄이다라는 뜻을 가지고 있다, 사저적 의미 그대로, 리듀스 함수는 배열의 요소를 순차적으로 순회하며 숫자든 배열이든 객체든 하나의 값우로 줄여 return하는 함수이다. 즉, 배열을 기반으로 하나의 값을 도출할 때 사용된다.

 

reduce 함수 기본 문법

arr.reduce(callback(accumulator, currentValue, index, array), initialValue);
// 배열.reduce(callback(누적값, 현재값, 인덱스, 요소), 초기값);

 

reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 4개의 인수를 받는다.

• accumulator : 누적값
• currenValue : 현재값
• Index : 인덱스
• array : 원본 배열

콜백의 최초 호출 때, accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있다. 만약 reduce() 함수 호출에서 initialValue(초기값)를 제공한 경우, accumulator는 initialValue와 같고, currentValue는 배열의 첫 번째 값과 같다.

initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고, currentValue는 두 번째와 같다.

 

즉, initialValue가 주어지면 누적값의 초기값으로 사용하고,

initialValue가 주어지지 않으면 배열의 첫 번째 요소가 누적값의 초기값으로 사용되고 두 번째 요소부터 콜백 함수가 호출

 

// 배열 요소 중에 홀수의 합계
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var result = array.reduce((acc, num) => {
  if (num % 2 !== 0) {
    return acc + num; // 홀수일 때 num을 누적해서 반환
  } else {
    return acc; // 짝수일 때 이전 sum을 그대로 반환
  }
}, 0);

 

위 코드는 배열 요소 중에 홀수의 합계를 구해야한다.

현재 0으로 초기값으로 초기화했으니, 이 값에다가 더하는 것이다.

그래서 array 배열에 이제 if 조건문을 주어 2로 나누었을 때 나머지가 0이 아니라면 홀수 이므로, 홀수만 뽑아 현재값을 누적값에 더해줘서 반환하고, 그게 아니라면 전체 누적값을 반환한다.

 

이 아래 코드는 좀 더 간편하게 구현한 것이다. 삼항연산자를 이용하여 나타낸 것이다. 0으로 초기화를 하고, 삼항 연산자를 활용하여 num % 2 가 1이면 sum + num을 실행, 0이면 sum을 실행한다.

여기서 왜 홀수가 앞에 실행되냐하면 1은 truthy한 값이고 0은 Falshy한 값이기 때문이다.

 

그리고 마지막 코드에서는 && 연산자를 활용한 것인데, 이는 이 연산자 특성상 왼쪽이 참이면 오른쪽을 반환, 그대로 실행이 되는데, 여기서 num % 2가 1이면 참이므로 num을 반환하는데, 그래서 sum += num이 된다. 근데 거짓이라면 반환된 게 없어 sum에 변화가 없다.

var result = array.reduce((sum, num) => {
  return num % 2 ? sum + num : sum; // 홀수일때는 누적한다.
}, 0);

var result = array.reduce((sum, num) => (num % 2 ? sum + num : sum, 0));

var result = array.reduce((sum, num) => (sum += num % 2 && num), 0);

 

2. find(), Array.prototype.find(callback)

find 함수란?

배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환하는 함수이다. 배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾는다.

 

find 함수 기본 문법

array.find(elem, index)

 

여기서 true를 반환하는 첫 번째 콜백 함수에 전달된 요소를 반환한다.

true 반환하는 콜백 함수가 없을 경우에는 undefined를 반환한다.

 

아래는 예시 코드이다.

2, 3의 최소 공배수를 구하는 것인데, 2로도 나눠지고, 3으로도 나눠지지만 둘이 공통된 숫자는 6이다.

근데 여기서 배열이 마구잡이로 되어있어 정렬을 해보자, 그래서 

예를 들면 a:6, b:7 이라고 했을 때, 둘이 빼기를 하보면 -1이라는 숫자가 나온다. 그러면 적은 숫자가 앞으로, 큰 숫자가 뒤로 가면서 오름차순으로 된다. 

반대로 이 둘을 바꿔 7 - 6을 했을 때 양수가 나오므로 큰 숫자가 앞으로 오고 작은 숫자가 뒤로 가서 내림차순 정렬이 된다.

// 배열 요소 2와 3의 최소공배수 구하기
var array = [6, 7, 8, 1, 4, 5, 2, 3, 9, 10];
// -를 반환할 경우 a, b 정렬(오름차순)
// +를 반환할 경우 b, a 정렬(내림차순)
// =을 반환할 경우 그대로
array.sort((a, b) => a - b);
console.log(array);

var result = array.find((num) => num % 2 === 0 && num & (3 === 0));

console.log(result); // 6

 

그리고 이제 find에서 && 연산자를 활용하여 둘다 만족하는 경우를 찾아서 그 요소를 찾아주는 것이다.