DEV Community

Cristian Fernando
Cristian Fernando

Posted on

Paracetamol.js💊| #170: Explica este código JavaScript

Explica este código JavaScript

Dificultad: Intermedio

const perro = {
  id:1,
  color:"negro",
  cola: false
}

const DEFAULT_OBJ = {
  id: "sin id",
  color: "default",
  nombre: "sin nombre",
  cola: "-"
}

const getPerro = (obj) => {
  return {
    ...DEFAULT_OBJ,
    ...obj
  }
}

console.log(getPerro(perro))
Enter fullscreen mode Exit fullscreen mode

A.

{
  id:1,
  color: "negro",
  cola: false
}
Enter fullscreen mode Exit fullscreen mode

B.

{
  id:1,
  color: "negro",
  nombre: "Boby",
  cola: false
}
Enter fullscreen mode Exit fullscreen mode

C.

{
  id:1,
  color: "negro",
  nombre: "sin nombre",
  cola: false
}
Enter fullscreen mode Exit fullscreen mode

D. Ninguno de los anteriores

Respuesta en el primer comentario.


Top comments (1)

Collapse
 
duxtech profile image
Cristian Fernando

Respuesta:
C.

{
  id:1,
  color: "negro",
  nombre: "sin nombre",
  cola: false
}
Enter fullscreen mode Exit fullscreen mode

El objeto perro debería constar de 4 propiedades: id, nombre, color, cola, pero como vemos en el ejemplo la función getPerro recibe un perro solo con 3 de estas propiedades.

Para que el objeto no este carente de propiedades podemos crear un DEFAULT_OBJ por aparte con valores predeterminados para todas las propiedades del objeto, de esta manera aunque mandemos objetos incompletos estos valores por defecto completaran el objeto.

Ahora bien, ¿qué pasara con las llaves del objeto? Nota que habran varias llaves que se pisen o sobre escriban, ¿cómo sabe JavaScript a que llaves mostrar?

Al usar la sintaxis spread primero regresamos el objeto DEFAULT_OBJ y luego el objeto pasado por parámetro, mantener este orden es super importante puesto que cuando hay conflictos entre nombres de llaves siempre gana la llave que este escrita hasta el final, esto explica por que el resultado final del ejemplo tiene la propiedad nombre: "sin nombre".