Duda JS: como incluir array en el constructor de clase

pantocreitor #1 Ene '20

Buenas tardes!!!

Estoy con una práctica (hacer una webapp sencilla de gestión de un negocio) y me he atascado un poco a la hora de establecer el constructor de una de las clases.
Esta clase, la cual se llama bocadillo tiene los atributos id, nombre, ingredientes (esto quiero que sea un array) y precio (resulta de multiplicar la longitud del array/ n de ingredientes del bocadillo por x).
Mi duda es, a la hora de hacer el constructor, cual sería la manera correcta:

class Bocadillo {
  constructor(id, nombre, ingredientes, precio) {
       this.id = id;
       this.nombre = nombre;
       this.ingredientes = []
       this.precio = precio;
  }
}

o

class Bocadillo {
  constructor(id, nombre, ingredientes, precio) {
       this.id = id;
       this.nombre = nombre;
       this.ingredientes = ingredientes;
       this.precio = precio;
  }
}

He estado mirando pero la verdad es que no me termino de aclarar y buscando documentación encuentro algún hilo de stackoverflow en el que la gente no se pone de acuerdo y documentación varia pero no esa duda en particular.

isvidal #2 Ene '20

Tienes un problema de fundamentos.

Si cuando inicializas el objeto le pasas los ingredientes, si this.ingrendients = [] nunca tendras tus ingrendientes guardados ahi

1 1 respuesta

EnderFX #3 Ene '20

Usa la segunda, y haz

this.ingredientes = ingredientes || [];

y te curas en salud
O si quieres ser más seguro y repipi aún,

this.ingredientes = Array.isArray(ingredientes) ? ingredientes : [];

2 1 respuesta

pantocreitor #4 Ene '20

#2 la primera me parecía muy raro que fuese, pero en el discord que tengo con la gente de clase había algunos que decían que así y ya me ha entrado la duda. Como me fío poco de ellos mejor preguntar xD

#3 la segunda opción es rizar el rizo xD pero vamos, mientras funcione soy feliz.

EnderFX #5 Ene '20

La segunda comprueba o "sanitiza" que el parámetro ingredientes sea un array. En caso contrario, this.ingredientes tendrá como valor un array vacío para que puedas tomar como precondición que es un array y operar sobre él de forma funcional si quieres (por ejemplo, si cada ingrediente es un objeto con un atributo numérico precio ({precio: 12}), puedes calcular el precio total con

this.ingredientes.reduce( (total, ingrediente) => total + ingrediente.precio, 0);

En tu primer ejemplo, como te han dicho, no utilizas la referencia al parámetro ingredientes que te pasan en la función (el constructor), si no que metes a fuego que this.ingredientes vale [], array vacío. Deshechas los ingredientes que te pase quien utilice la clase.

Si haces

this.ingredientes = ingredientes || [];

Lo que estás haciendo es una especie de "fallback" con el operador OR "short-circuit". Cuando pilles callo en programación y JS (entiendo que estáis empezando aún, por las dudas que tenéis) lo verás más natural.
Estás asignando a this.ingredientes el resultado de una expresión. En caso de que ingredientes tenga un valor "truthy", this.ingredientes será === ingredientes. En caso contrario (te pasan un null, undefined, false, 0, 0n, "" o NaN - valores "falsy" en JS), this.ingredientes será === [].
La diferencia entre la primera opción y la segunda con el Array.isArray es que, por ejemplo: 13, "hola" o {} son valores "truthy", y si te pasan eso this.ingredientes tomaría el valor 13, "hola" o {} y te los comes con patatas.
Y ya si te interesa un poco más, el mecanismo implícito que hace que se evalúen números, strings o {} como booleanos (en este caso) se llama type coercion.

PD: no lo hagas para la práctica, pero lo suyo sería tener precio por ingredientes e implementar el miembro precio de la clase como un getter y usar la función reduce que te he puesto arriba.

1 1 respuesta

pantocreitor #6 Ene '20

#5 Muy interesante todo, thanks!!!
Tenía pensado meterle precio a cada ingrediente pero el profesor nos comentó que mejor no, que no me complicase
Pero bueno, la verdad es que me gusta bichear y ver por qué y como pasan las cosas, que muchas veces el "eso es magia, ya lo veremos mas adelante" no me suena muy bien xD

Duda JS: como incluir array en el constructor de clase

Usuarios habituales

Tags