Javascript reduce function

var users = [{

id: 1,

name: 'saul',

age: 2,

pets: ['cat','dog']

},

{

id: 1,

name: 'andrie',

age: 6,

pets: ['cat']

},

{

id: 1,

name: 'manuel',

age: 6,

pets: []

}];

users.reduce((accumulator, currentElement, index, array) => {

return accumulator.concat(currentElement.pets);

}, []);

//result

["cat", "dog", "cat"]

Reduce toma una callback y un valor initial opcional que es el acumulador que es pasado a la callback en cada iteracion. Entonces Reduce empieza a iterear por cada elemento llamando a la callback pasando el acumulador y el element sobre el cual se esta iterando.

La primera vez acumulador es un arreglo vacio por que es el valor inicial, las siguientes veces acumulador tiene el valor retornado por  la previa interacion. Asi es como al final de la iteracion reduce devuelve el valor de "accumulator".

Aqui un ejemplo usando objectos

var myArr = [

{ rating: 5 },

{ price: 200 },

{ distance: 10 }

];

var myObj = myArr.reduce(function( memo, item ) {

memo = Object.assign(memo, item);

return memo

}, {} );

//result

{rating: 5, price: 200, distance: 10}

Espero haber despejado dudas