Playground: Combina objetos JSON con el Spread Operator

Clase 9 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Contenido del curso

Introducción

Configuracion

3
Configuración de Herramientas para Desarrollo en JavaScript Avanzado
12:46 min

¿Qué se implementó en ES6?

¿Qué se implementó en ES7?

18
Actualizaciones de ECMAScript 7: Operadores Exponencial e Includes
06:35 min

¿Qué se implementó en ES8?

¿Qué se implementó en ES9?

¿Qué se implementó en ES10?

¿Qué se implementó en ES11?

¿Qué se implementó en ES12?

¿Qué se implementó en ES13?

Recapitulación

35
Novedades y mejoras en ECMAScript y JavaScript
06:57 min

Tomar examen

Comentarios

Erlyn David Ascarate Lachi

student•

¿Tambien pulsaroncontrol + S? xd

Alejandro Castañeda Piña

student•

Yo hasta cuando hago mis tareas en Word y se pone el subrayado o cuando uso el DevTools. 😂😂😂

Aldo Figueroa Baque

student•

Siempre me pasa JAJA

Uriel Ventura

student•

Aca mi aporte, simplificando un poco , y formateado para mejor lectura.

export function solution(
  json1 = {
    name: 'Mr. Michi',
    food: 'Pescado',
  },
  json2 = {
    age: 12,
    color: 'Blanco',
  }
) {
  return { ...json1, ...json2 };
}

Jason Steven Méndez Balambá

student•

Muy útil, gracias.

Juan Esteban Ocampo Viera

student•

porque hiciste todo dentro de los parametros de la funcion?

Franco Moreira

student•

yo le tiré esa.. * ruidito de mate *

export function solution(json1, json2) {
  json1 = json1 || { name: "Mr. Michi", food: "Pescado" };
  json2 = json2 || { age: 12, color: "Blanco" };

  return { ...json1, ...json2 }
}

Jason Steven Méndez Balambá

student•

Excelente, grax.

Lucas Frezzini

student•

Sirve, pero hace unas clases atras, aprendimos sobre los default params, para evitar esos OR en el comienzo de la función. Podrias implementarlo así:

export function solution(
  json1 = {
  name: "Mr. Michi",
    food: "Pescado"
  },
  json2 = {
    age: 12,
    color: "Blanco"
  }) {
 return { ...json1, ...json2}
}

Éxitos!

Nestor Luis Álvarez Rojas

student•

Hermanos, esto ¡ESTÁ DE LOCOS! Amé esta implementación para poder practicar...

Eliezer Hernandez

student•

¡Esto, está genial!!! Me gusta esta implementación. Me acosté algo tarde estudiando y veo que añadieron esta maravilla.

Luis Enrique Chavarría Vázquez

student•

x2 amigo, la verdad esta genial.

Joselyne Ivanny Coello Moreira

student•

Cristian Gabriel Dominguez Lavezzari

student•

Muy buen aporte , tuve la misma idea en un principio , no supe bien como retornar los valores.

Damián De Aguiar

student•

Muy buena funcionalidad, me gustó muhco. En lo que tuve dificultades es en entender las instrucciones y en que cosas debía modifcar y cuales no ya que al inicio dice que el código va en la segunda linea pero en la solución si tocan el input de la primera linea.

David Oliva Patiño

student•

Excelente implementación, deberían considerar evaluar cada tema de esta manera e implementarlo en el examen final del curso.

JOSE Alonso Tocas Dipaz

student•

yo pense que mi codigo estaba mal por que no me aparecia nada en la consola, pero era por que estaba solo llamando a la funcion solution(); , y tenia que llamarlo con console.log(solution());

function solution(
    json1 = {
        name: "Mr. Michi",
        food: "Pescado",
    },
    json2 = {
        age: 12,
        color: "Blanco",
    }
) {
    return {
        ...json1,
        ...json2,
    };
}
console.log(solution());

Jeffry Hernandez

student•

buena <3

Federico Ivan Llano

student•

Esta es mi solucion que en mi editor funciona pero aca no.

export function solution(json1, json2) {
  // Tu código aquí 👈
  let res = {...json1, ...json2}
  return res
}

const jason1 = {
  name: "Mr. Michi",
  food: "Pescado"
}

const jason2 = {
  age: 12,
  color: "Blanco"
}

console.log(solution(jason1,jason2))

Gabriel Omar Gramajo

student•

el problema es que en tu función no agregaste valores por defecto en los parametros y si recibis esto como entrada:

solution({
    name: "Bigotes",
    food: "Pollito"
})

solo te va a retornar el json1 que recibe el argumento, mientras que le json2 no recibe nada y como no tiene un valor por defecto queda vacío, quedando asi:

{ name: 'Bigotes', food: 'Pollito' }

y en el ejercicio te pide que en la salida (output) retorne un json por defecto en el caso que no reciba nada o solo un argumento:

{
    name: "Bigotes",
    food: "Pollito",
    age: 12,
    color: "Blanco"
}

las constantes que creaste jason1 y jason2 deberían ser los valores por defecto en los parametros de la función.

Diego Fernando Ortiz Gamboa

student•

El error esta en que no agregaste los valore spor defecto que se solicitaban. Esta seria una forma correcta. ![](

Oriol Fernando Palacios Durand

student•

La calidad de platzi va en aumento, sin duda es una plataforma educativa que comprende a cabalidad lo que significa aprender :')

Tania Bacik

student•

buenas... ah alguien más se le quedo tildado al darle 'correr prueba'?

Ricardo Alfonso Chavez Vilcapoma

student•

Demora pero carga...si demora mucho actualiza la página y vuelve a correr la prueba.

Usuario anónimo

user•

Mi respuesta, ojo se spoilea.

Se me olvidó usar los parámetros por defecto que nos enseñaron!!

function solution(json1, json2) {
    if (json1 === undefined && json2 === undefined) {
        let json1 = { name: "Mr. Michi", food: "Pescado" };
        let json2 = { age: 12, color: "Blanco" };
        let data = { ...json1, ...json2 };
        return data;
    }else if(json1 === undefined) {
        let json1 = { name: "Mr. Michi", food: "Pescado" };
        let data = { ...json1, ...json2 };
        return(data);
    }else if(json2 === undefined) {
        let json2 = { age: 12, color: "Blanco" };
        let data = { ...json1, ...json2 };
        return(data);
    }else {
        let data = { ...json1, ...json2 };
        return(data)
    }
}

solution({ name: "Pepito", food: "Pancito" }, { age: 22, color: "Verde" });

Usuario anónimo

user•

Si, demasiado mucho más simple con los default params:

  name: "Mr. Michi",
  food: "Pescado"
},
  json2 = {
    age: 12,
    color: "Blanco"
  }) {
  console.log({ ...json1, ...json2 });
  return { ...json1, ...json2 };
}

Juan José Rodriguez

student•

Jorge Alejandro Suárez Rivera

student•

acá está mi solución Para evitar spoiler

. . . . . . . .

export function solution(json1 = { name: 'Mr. Michi', food: 'Pescado' }, json2 = { age: 12, color: 'Blanco' }) {
  
  return { ...json1, ...json2 };
}

kolab Linkear

student•

Aquí esta la solución de este ejercicio, le hice con el Nullish coalescing operator

export function solution(json1, json2) {
  json1 ?? { name: "Mr. Michi", food: "Pescado" },
    json2 ?? { age: 12, color: "Blanco" }

  return { ...json1, ...json2 }
}

Daniel Fernando Reyes Vasquez

student•

Quedo muy bien. 🙂🙂🙂

Luis Alfredo Diaz Restrepo

student•

Muy interesante.. Pase MUCHAS horas en mi pc tratando de replicarlo y no se si por mi falta de experiencia, pues es mi primer contacto con el lenguaje u otra cosa, pero, pues técnicamente, no pude. Igual quise colocar mi resultado y nunca pude hacer que se consumieran los intentos para poder ver la solución. Recomiendo de todo corazón, un videotutorial de como funciona la implementación

Agu Damonte

student•

Hola Luis, te comparto el codigo con el que pude pasar las pruebas:

export function solution(json1 = {name: "Mr. Michi", food: "Pescado" },  json2 = { age: 12, color: "Blanco"}) {
  let obj = {};
  return obj = {...json1, ...json2}
}

Espero te sirva,y cualquier duda dejala aca abajo

Sebastián Riátiga

student•

No me dejó correr el ejercicio, salía un aviso de prohibido encima del botón de “Correr Pruebas” y tampoco me permitió ver cual era la solución. . ¿Alguién puede darme una mano para hallarla o verla, por favor?

Ignacio Javier Julio Posada

student•

Si tienes errores en el cogido no te dejará correr la prueba, ve a la pestaña de pruebas junto a guía y vista y te puede dar los códigos de error ya sea de sintaxis o algo más

Manuel Roa Ojeda

student•

const obj1 = {
  name: "Mr. Michi",
  food: "Pescado",
};

const obj2 = {
  age: 12,
  color: "Blanco",
};

export function solution(json1 = obj1, json2 = obj2) {
  const data = { ...json1, ...json2 };

  return data;
  // Tu código aquí 👈
}

Alejandro Ramos

student•

Waos, pues se le pone los tres puntos a todos los objetos xd.

export function solution(json1 = {
  name: "Mr. Michi",
  food: "Pescado"
}, json2 = {
  age: 12,
  color: "Blanco"
}) {
  return { ...json1, ...json2 }
}

function solution(
    json1 = {
        name: "Mr. Michi",
        food: "Pescado",
    },
    json2 = {
        age: 12,
        color: "Blanco",
    }
) {
    return {
        ...json1,
        ...json2,
    };
}
console.log(solution());

export function solution(json1, json2) {
  // Tu código aquí 👈
  let res = {...json1, ...json2}
  return res
}

const jason1 = {
  name: "Mr. Michi",
  food: "Pescado"
}

const jason2 = {
  age: 12,
  color: "Blanco"
}

console.log(solution(jason1,jason2))

function solution(json1, json2) {
    if (json1 === undefined && json2 === undefined) {
        let json1 = { name: "Mr. Michi", food: "Pescado" };
        let json2 = { age: 12, color: "Blanco" };
        let data = { ...json1, ...json2 };
        return data;
    }else if(json1 === undefined) {
        let json1 = { name: "Mr. Michi", food: "Pescado" };
        let data = { ...json1, ...json2 };
        return(data);
    }else if(json2 === undefined) {
        let json2 = { age: 12, color: "Blanco" };
        let data = { ...json1, ...json2 };
        return(data);
    }else {
        let data = { ...json1, ...json2 };
        return(data)
    }
}

solution({ name: "Pepito", food: "Pancito" }, { age: 22, color: "Verde" });

const obj1 = {
  name: "Mr. Michi",
  food: "Pescado",
};

const obj2 = {
  age: 12,
  color: "Blanco",
};

export function solution(json1 = obj1, json2 = obj2) {
  const data = { ...json1, ...json2 };

  return data;
  // Tu código aquí 👈
}

Playground: Combina objetos JSON con el Spread Operator

Introducción

Historia y evolución de ECMAScript y JavaScript

Actualización y Propuestas en ECMAScript y JavaScript

Configuracion

Configuración de Herramientas para Desarrollo en JavaScript Avanzado

¿Qué se implementó en ES6?

Características de ECMAScript 6 para JavaScript Moderno

Template Literals y Multilínea en ECMAScript 6

Asignación de Parámetros por Defecto en ECMAScript 6

Desestructuración de Arrays y Objetos en JavaScript ECMAScript 6

Uso del Operador de Propagación y Parámetros Rest en JavaScript