Playground: Obtén una lista de películas

Cursos Empresas Blog Live Conf Precios

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

Playground: Obtén una lista de películas

Comentarios

Martin Salomon

student

alguien mas hace ctrl + s a cada rato?

Cristian David Corrales Ospina

student

Obvio, a lo pendejo jajaja

Moises Yañez Villa

student

si jaja

Elena Fernandez López

student

Para recordar, en este caso el import se hace con { } porque no se hizo el export default getData en el archivo api.js. Si se hubiera hecho, simplemente sería, import getData from "./api.js";

import { getData } from "./api.js";

export function solution() {
  // Tu código aquí 👈
  return getData();
}

Daniel Gomes Vilaca

student

Tengo la extraña sensación de que Juan dc está detrás de este ejercicio xD

Beder Danilo Casa Condori

student

muy cierto

Leopoldo Martinez

student

Por si alguien lo necesita saber, el ejercicio dice que el código debe escribirse dentro de la función (// Tu código aquí 👈) pero no es obligatorio, deben escribir el import al principio del ejercicio. Deben bajar la función y en una línea superior hacer el import que se necesita.

Mauricio Poveda Macias

student

<import { getData } from "./api.js";

export function solution() {
  return getData().then(list => list);
}>

Jose Barboza

student

import { getData } from './api'
export async function solution() {
  return await getData();
}

sebasmira97

student

Hola me podrias explicar porfavor por que el import getData debe llevar { }?

Jefferson Ramos

student

A veces no dejaba dar a 'correr pruebas' pero se logro.

import getData from "./api.js" 

export function solution() {
  return getData();
}

VICTOR CAUDILLO

student

Esta buenisima esto, ahora bien la comunidad ayuda mucho con sus aporte, pero creó que si van a poner ejemplo deberian basarse con los videos, en los comentarios uno aprende mas cosa y esta buenisimo pero esa forma de exportar y async no recuerdo que estuvieran en las clases previas

walter alturo

student

Esta re bueno 100/10 ya era hora de implementar esto ojala hagan muchos mas ejercicios de este tipo que hacen falta

Cindy Carolina Campos Navarro

student

Me hace sentir como que estoy respondiendo preguntas de una empresa para un empleo de progra... :)

Edgar Gerardo Rojas Medina

student

Para importar funciones se utilizan {} despues del import. Ex: import {miFunc} from './file.js'

Sabad Josue Perez Rodriguez

student

La forma de importar la función dependerá de como fue exportada. Comparto estas 2 formas de Importar/Exportar posteadas por el amigo Irving Caamal en la clase pasada

export default myFunction;
export {myFunction};

import myFunction from "./myFunction"
import {myFunction} from "./myFunction"

Victor Manuel Urdaneta Contreras

student

Creo que eso debió explicarlo Oscar en las clases.

Duvan Alexis Palomino Ramirez

student

Mi solucion: al archivo api.js le agrego la parte del export

mi archivo exercise queda asi:

si no le agrego el export default a mi archivo api.js cuando importe la funcion debo poenrla dentro de {} asi import { getData} from "./api.js";

JOSE DAVID OROZCO CASTAÑEDA

student

Una solucion mas entedible con la sintaxis del las clases anteriores.

// main.js
import { getData } from "./api.js";
export function solution() {

  const solucion = getData()
    .then((response) => response)
    .catch();
  return solucion;
}

Juliette Villarroel

student

Hey! Aquí mi solución: (no andes de chismoso si no terminaste el desafío) ---. ---. ---. ---. ---. ---. ---. ---.

import { getData } from  "./api.js";
export function solution() {
  return getData();
}

Gustavo Liendo

student

Re facíl jaja es basicamente la clase anterior

Ricardo Alfonso Chavez Vilcapoma

student

Se supone que en promesas al llamar a la función que la contiene necesariamente debe tener el .then y .catch. ¿Por qué compila sin error al solo mandar el return getData();?

Deiber Orlando López Moyano

student

Totalmente perdido en el ejercicio ya trate con el siguiente codigo : en exercise.js export function import { getData } from './ api.js;' solution() { // Tu código aquí 👈 return getData(); } y en api.js export { getData };

No entiendo por se debe usar export en la function solution, y tampoco por que estan usando los valores de then. y catch me podrian explicar ?

Luis Castillo

student

Asi fue como solucioné el ejercicio y "corri pruebas" con éxito.import { getData } from './api.js'export function solution() { const movies = getData(); return movies;} solution();```js import { getData } from './api.js' export function solution() { const movies = getData();

return movies; }

solution();

Esteban Vladimir Alvarenga Gutiérrez

student

¿Qué función cumplen las llaves conteniendo a getData? import { getData } from... Supongo que será porque se está trabajando en una consola del navegador, pero no me terminó de comprender 🤨 Al no ponerlas ocurre un SyntaxError, pero tampoco se explicó en la clase.

Arturo Vargas

student

Cómo la función no fue exportada como default entonces hay que usar los {}. La documentación me ayudo a entender el tema

LESTHER XITUMUL MANUEL

student

interesante

Alejandro Barriga Gasca

student

No entiendo como usar esto XD alguien me ayuda?

Leonardo de los angeles Espinoza Hernandez

student

¡Hola Alejandro!

Específicamente en que tienes dudas?

Lo único que debes hacer es resolver el problema que se te muestra en el apartado de Guía con código, todo el código lo debes escribir del lado izquierdo, una vez completado deberás darle click al botón de "Correr pruebas" y si todo sale bien tendrás todo en verde :D

Y si no sabes la solución, no te preocupes! El botón de Ver solución se desbloqueará después de 3 intentos fallidos y podrás verla

Pero si esto no te parece muy intuitivo o te sientes perdido por alguna razón, házmelo saber y te sigo ayudando 💪

Alejandro Ramos

student

Ok, este es el código que resuelve esto, pero pq

import { getData } from "./api.js"; //un import, las llaves son importantes
export async function solution() { //async pq es asincronico¿?
  return await getData(); //await pq hay q esperar ??????
}

Ulqernesh Karvenae

student

Yo lo hice de esta manera

import getData from "./api.js" 

export function solution() {
  return getData();
}

En tu solución, donde usas async/await, la función solution() "espera" a que la Promesa devuelta por getData() se resuelva o rechace. Si getData() arroja un error (la promesa se rechaza), ese error será propagado por solution(). De este modo, el manejo del error se hace donde sea que llames a solution(). La función solution() en sí misma no maneja el error.
En la segunda solución, solution() simplemente devuelve la promesa que obtiene de getData() sin esperar a que se resuelva. Esto significa que solution() se completa antes de que la promesa se resuelva o se rechace. Si la promesa es rechazada (hay un error), la función solution() devolverá una promesa rechazada. Una vez más, el manejo de este error queda a cargo de quien llame a solution(). .

Ejemplo : La promesa tarda 10 años en ejecutarse, entonces pasaría lo siguiente

En el primer caso, sí, si la promesa se resuelve en 10 años, la función solution() esperará 10 años antes de completarse y devolver el resultado.
En el segundo caso, solution() se completa inmediatamente, devolviendo la promesa que fue retornada por getData(). Esa promesa estará en estado pendiente hasta que se resuelva, incluso si eso lleva 10 años.

Alejandro Ramos

student

Gracias por tu explicación, Ultisaer, ha sido genial!

JORGE MANRIQUE CHAVARRO

student

Esta fue mi solución.

api.js

export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

getData()
    .then(response => console.log(response))
    .catch(err => console.log(err));

export default getData;

exercise.js

import getData from "./api.js";

export function solution() {
  // Tu código aquí 👈
  return getData();
}

solution();

export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

getData()
    .then(response => console.log(response))
    .catch(err => console.log(err));

export default getData;

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

Playground: Combina objetos JSON con el Spread Operator

Asignación y manejo de objetos en ECMAScript 6

Promesas en JavaScript: Manejo del Asincronismo con ECMAScript 6

Clases y Herencia en JavaScript: Sintaxis y Aplicaciones

Uso de Módulos en JavaScript ES6