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))

A.

{
  id:1,
  color: "negro",
  cola: false
}

B.

{
  id:1,
  color: "negro",
  nombre: "Boby",
  cola: false
}

C.

{
  id:1,
  color: "negro",
  nombre: "sin nombre",
  cola: false
}

D. Ninguno de los anteriores

Respuesta en el primer comentario.

---

Comments

[Cristian Fernando]

Respuesta:
C.

{
  id:1,
  color: "negro",
  nombre: "sin nombre",
  cola: false
}

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