Dúvida com reduce(); | JavaScript: conhecendo o Browser e padrões de projeto

Algumas dúvidas no funcionamento do reduce;

let numerosReduce = [10, 20, 30, 40];

let resultado = numerosReduce.reduce(function(total, contador){
    return total + contador;
},0);

console.log(resultado)

No caso o resultado no console será 100; Mas não consigo entender o funcionamento do reduce.

No caso, se eu der um return total, ao executar o console.log(resultado), será exibido o 0; Nessa situação é possível compreender que o primeiro parametro passado na chamada da função, ou seja, a propriedade total vai se referenciar ao valor inicial informado no final da função, que é o 0.

Caso eu dê um return na propriedade contador e der o console.log, é possível verificar que neste caso o retorno no console seria o número 40, que é o último valor do array numerosReduce;

Porém, por curiosidade, tentei identificar os outros números através do console e não consegui, se eu der um return contador[0] o resultado será undefinied. Como que consigo acessar os outros valores dentro do array separadamente no return?

Oi Pedro, tudo bem?

Confesso que no início foi complicado para eu conseguir entender o reduce também, mas vamos lá que eu vou tentar explicar da melhor maneira possível!

Primeiramente, é preciso ter em mente que esse método retorna um valor único, e não um array. Dito isso, esse método aceita dois parâmetros: uma função callback e um valor inicial, que como você colocou no seu código, é o valor zero.

A função callback aceita dois parâmetros: um acumulador e o valor atual. Esse valor atual são os elementos do array, então o método reduce irá, de certa forma, percorrer esse array, sendo que cada elemento é o valor atual. O acumulador tem seu valor inicial igual a 0, pois você passou o zero como parâmetro do método reduce, no final.

Então vamos lá, na sua função nós temos o total como sendo o acumulador, com seu valor inicial 0, e o contador sendo cada elemento do array. Na sua dúvida de curiosidade, não é possível acessar o contador[0] pois ele não é um array, ele é um elemento único! Você poderia dar apenas um console.log(contador) que iria funcionar da maneira esperada.

Na primeira chamada ao método reduce, o total vale 0 e o contador vale 10 (é o primeiro elemento do array), portanto irá retornar 10 (já que a soma de 0 e 10 é 10), e esse valor 10 será armazenado agora no acumulador, que é a sua variável total. Portanto, total agora vale 10. Tendo isso em mente, vamos para a segunda iteração, onde agora o contador vale 20 (segundo elemento do array), e o total vale 10. Logo, a soma entre os dois é 30, e esse valor 30 é armazenado no acumulador, ou seja, na variável total. E assim por diante, até chegar no resultado final que é 100.

Espero ter ajudado, qualquer outra dúvida é só responder aqui que estarei à disposição! Abraços e bons estudos!