4

Estoy practicando el método reduce y me sucede algo curioso.

Quiero que me muestre la cantidad de usuarios que hay en línea, pero el método reduce me devuelve el valor undefined:

let users = [
  {
    name: 'usser1',
    online: true,
  },
  {
    name: 'usser2',
    online: true,
  },
  {
    name: 'usser3',
    online: false,
  },
];

let usserOnline = users.reduce((cont, user) => {
  if (user.online) {
    cont++;
    return cont;
  }
}, 0);

console.log(usserOnline);

Pero si saco el return del bloque me dice cuántos usuario hay:

 let usserOnline = users.reduce((cont, user) => {
    if(user.online) 
        cont++
        return cont
 },0);

¿Por qué sucede esto?

Supongo que la última propiedad está en false la condición no se cumple y por ello no retorna el valor, pero, ¿no debería mostrarme 2? por que ya dos condiciones se cumplieron, quisiera saber por que manda undefined.

4
  • 1
    pues, simplemente, estas usando mal el reduce. No tenes que tener un return dentro del reduce. mira la documentacion
    – gbianchi
    Commented el 10 feb. 2023 a las 12:45
  • 2
    No está demás mirar la sintaxis de if...
    – padaleiana
    Commented el 10 feb. 2023 a las 12:51
  • 2
    Con mucho respeto, gbianchi, en la sección descripción, el primer ejemplo sí contiene un return. O te refieres a un caso más específico?
    – Arriel
    Commented el 10 feb. 2023 a las 14:15
  • @Arriel si, para un caso donde la funcion es acumuladora de cada item en el array.. no es lo que quiere aca..
    – gbianchi
    Commented el 11 feb. 2023 a las 0:12

2 respuestas 2

4

Claramente, tiene una diferencia. Aquí, si la sentencia if se cumple, ocurrirá el cont++; y el return cont, ya que las {} encierran a estas dos líneas de código. Aquí te ocurrirá error porque el return cont debe estar fuera del if para indicar que el resultado final que te va a retornar el reduce sea ese cont:

if (user.online) {
  cont++;
  return cont;
}

Y aquí, si se cumple el if, solamente ocurrirá el cont++ y siempre va a retornar el cont. Esto sucede porque este if sin {} indicará que se ejecute solo la línea que esté debajo de ese if:

if (user.online)
  cont++;
return cont;

let users = [
  {
    name: 'usser1',
    online: true,
  },
  {
    name: 'usser2',
    online: true,
  },
  {
    name: 'usser3',
    online: false,
  },
];

let usserOnline = users.reduce((cont, user) => {
  if (user.online)
    cont++;
  return cont;

}, 0);

console.log(usserOnline);

O también al lado derecho:

if (user.online) cont++;
return cont;

let users = [
  {
    name: 'usser1',
    online: true,
  },
  {
    name: 'usser2',
    online: true,
  },
  {
    name: 'usser3',
    online: false,
  },
];

let usserOnline = users.reduce((cont, user) => {
  if (user.online) cont++;
  return cont;

}, 0);

console.log(usserOnline);

En pocas palabras, eso sería lo mismo que:

if (user.online) {
  cont++;
}
return cont;

let users = [
  {
    name: 'usser1',
    online: true,
  },
  {
    name: 'usser2',
    online: true,
  },
  {
    name: 'usser3',
    online: false,
  },
];

let usserOnline = users.reduce((cont, user) => {
  if (user.online) {
    cont++;
  }
  return cont;

}, 0);

console.log(usserOnline);


Recuerda mirar como es la sintaxis del if.

1
  • Ohhh ya ya gracias !! Ya lo tengo clarísimo, bendiciónes !! Commented el 11 feb. 2023 a las 14:13
1

Según tu última oración queda claro que el tema de los if lo comprendes (me parece que el título de tu pregunta es engañoso). Y que la pregunta principal es porque el resultado es undefined y no 2

Partamos con un ejemplo distinto.

function suma(a,b){
  let resultado = a+b;
  //return resultado;
}
console.log(suma(1,1));
console.log(suma(1,1) + 1);

Al comentar el return queda una función que retorna undefined, ya que no tiene retorno conocido. En el segundo caso retorna NaN, ya que undefined + numero = NaN

(Quédate con esto en la mente)


Luego veamos qué pasa con reduce

Lo primero que hay saber es que el primer argumento de la función reduce es otra función, y como toda función para que haga algo debe ser invocada.

Yo crearé una versión muy simplificada de una función reduce para números, para que veas cómo funciona el tema

let users = [{name: 'usser1',online: true,},{name: 'usser2',online: true,},{name: 'usser3',online: false},];

Array.prototype.Custom_Reduce = function(funcion, inicial){
   let resp=inicial;
   for(let item of this){ //recorremos el array
      resp = funcion(resp,item);  //invocamos la función, aquí está el problema
   }
   return resp;
};

let usserOnline = users.Custom_Reduce((cont, user) => {
  if (user.online) {
    cont++;
    return cont;
  }
}, 0);

console.log(usserOnline);

Observa que el código es el mismo que el tuyo, solo que ahora usamos Custom_Reduce. Veamos que pasa en las últimas 2 líneas de esta función:

  resp = funcion(resp,item); 
}
return resp;

Ahora tienes que observar el array original y encontrar el último elemento de la lista, donde verás que es online: false. Entonces, como es false no entra al if y por lo tanto esa función retorna undefinied. (como pasaba en el ejemplo inicial de la suma)

Y como ahí termina la iteración, este undefinied es el resultado final.


¿Y qué pasa si la lista estuviera ordenada de modo distinto?

Digamos que ahora en la lista los elementos 1 y 3 son online: true y solo el segundo es false

Probaré con el reduce de toda la vida y con Custom_Reduce

let users = [{name: 'usser1',online: true,},{name: 'usser2',online: false,},{name: 'usser3',online: true},];

Array.prototype.Custom_Reduce = function(funcion, inicial){
   let resp=inicial;
   for(let item of this){ //recorremos el array
      resp = funcion(resp,item);  //invocamos la función, aquí está el problema
   }
   return resp;
};

let usserOnline1 = users.Custom_Reduce((cont, user) => {
  if (user.online) {
    cont++;
    return cont;
  }
}, 0);

let usserOnline2 = users.reduce((cont, user) => {
  if (user.online) {
    cont++;
    return cont;
  }
}, 0);

console.log(usserOnline1);
console.log(usserOnline2);

Ahora dan ambos NaN, porque en la segunda iteración retornó undefined y en la tercera retorna un numero + undefined. y como vimos al principio esto es NaN

1
  • Hey amig@ muchísimas gracias !! Increíble aporte 💪👊 Commented el 11 feb. 2023 a las 14:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.