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".