Devemos entender, primeiramente, que o Array.prototype.reduce
trabalha sobre um array. No caso, o array que será reduzido é o próprio array sob o qual chamamos o método reduce
. Além do array (que é o "argumento" this
), reduce
requer uma função redutora e aceita um valor inicial.
No exemplo que tratamso nesta resposta, chamamos reduce
assim:
const result = [1, 2, 3, 1, 2, 1].reduce(countReducer, {});
Então:
- O array a ser reduzido será
[1, 2, 3, 1, 2, 1]
("argumento" this
).
- A função redutora é
countReducer
(primeiro argumento do método).
- O valor inicial é
{}
(segundo argumento do método).
Com isso, para cada elemento do array [1, 2, 3, 1, 2, 1]
, a função redutora que passarmos será chamada. O truque para "entender" é saber que o valor que a função redutora retornar será utilizado como o parâmetro accumulator
para a iteração seguinte. Por isso é importante definir um acumulador inicial na maioria dos casos.
- Leia a documentação, que tem um exemplo explicando passo a passo.
É importante observar que se você não definir acumulador inicial, o primeiro elemento do array será utilizado como tal. No entanto, nessa situação, de acordo com a lógica do que queremos fazer, isso não é desejável.
Indo, agora, ao código completo, temos:
function countReducer(accumulator, current) {
// Caso o item da iteração atual ainda não tenha sido contabilizado.
if (!accumulator[current]) {
// Inicializamos o contador para o item da iteração atual como 0:
accumulator[current] = 0;
}
// Incrementamos o contador para o item da iteração atual:
accumulator[current] += 1;
// Retornamos o acumulador para as próximas iterações:
return accumulator;
}
const result = [1, 2, 3, 1, 2, 1].reduce(countReducer, {});
console.log(result);
1 | function countReducer(accumulator, current) {
2 | // Caso o item da iteração atual ainda não tenha sido contabilizado.
3 | if (!accumulator[current]) {
4 | // Inicializamos o contador para o item da iteração atual como 0:
5 | accumulator[current] = 0;
6 | }
7 |
8 | // Incrementamos o contador para o item da iteração atual:
9 | accumulator[current] += 1;
10 |
11 | // Retornamos o acumulador para as próximas iterações:
12 | return accumulator;
13 | }
14 |
//// ↓↓
15 | const result = [1, 2, 3, 1, 2, 1].reduce(countReducer, {});
16 | console.log(result);
Vamos entender o que queremos que aconteça para depois entender o código acima, linha a linha.
Supondo que temos um array como [1, 2, 3, 1, 2, 1]
, queremos retornar um objeto com a quantidade de cada elemento do array, assim:
{
1: 3,
2: 2,
3: 1
}
E como o reduce
nos ajudará a chegar nisso?
Partindo da primeira linha a ser executada (15
), onde invocamos o método reduce
, note que passamos, como valor inicial, um objeto literal "vazio" ({}
). Esse é o nosso objeto accumulator
, só que ele ainda se encontra "vazio"!
A partir disso, o reduce
chamará a função countReducer
para cada elemento do array. De modo que o parâmetro accumulator
será dado pelo que a função countReducer
retornar na iteração anterior (exceto na primeira iteração, na qual accumulator
é o objeto vazio que definimos no segundo argumento do método).
Partindo da primeira iteração (na qual {}
ainda está vazio), precisamos ir adicionando os elementos com as respectivas contagens. Para isso, utilizamos a notação accumulator[current]
. Essa é a notação de colchetes para acesso em objetos no JavaScript.
No caso específico da primeira iteração, por exemplo, o accumulator
ainda estará vazio. Nesse caso, como current
corresponde ao primeiro elemento do array, o que estamos fazendo é, isto:
accumulator[current]
É o mesmo que:
accumulator[1]
Isso significa que estamos tentando acessar a propriedade 1
no objeto accumulator
. No caso da primeira iteração, essa propriedade ainda não estará definida, portanto, a expressão accumulator[current]
(na primeira iteração) retornará undefined
.
Nesse caso, como o contador ainda não foi definido, precisamos criar um jeito de definir o contador como 0
para que possamos iniciar a contagem para o elemento em questão. É isso que o if
(linhas 3~6) está fazendo. Ele verifica se o contador referente ao elemento (current
) atual ainda não foi definido e, se realmente não tiver sido definido, seta o contador do elemento atual para 0
.
Desse modo, na linha 9 podemos incrementar a contagem referente ao elemento atual. Novamente temos a expressão accumulator[current]
, que, basicamente, significa:
Acesse, no acumulador, a propriedade cuja chave é (dinamicamente) current
e incremente 1, indicando que percorremos esse item uma vez.
Essa mesma lógica é processada para cada elemento do array.
numero
não foi definida.