Curso de ECMAScript: Historia y Versiones de JavaScript
Curso de ECMAScript: Historia y Versiones de JavaScript

Introducción

1

Historia de JavaScript: ¿qué es ECMAScript?

2

¿Qué es el TC39?

Configuracion

3

Configurando nuestras herramientas

¿Qué se implementó en ES6?

4

ES6: let y const, y arrow functions

5

ES6: strings

6

ES6: parámetros por defecto

7

ES6: asignación de desestructuración

8

ES6: spread operator

9

Playground: Combina objetos JSON con el Spread Operator

10

ES6: object literals

11

ES6: promesas

12

ES6: clases

13

ES6: module

14

Playground: Obtén una lista de películas

15

ES6: generator

16

Playground: Generador de identificadores para michis

17

ES6: set-add

¿Qué se implementó en ES7?

18

ES7: exponentiation operator y array includes

¿Qué se implementó en ES8?

19

ES8: object entries y object values

20

ES8: string padding y trailing commas

21

ES8: funciones asíncronas

¿Qué se implementó en ES9?

22

ES9: expresiones regulares

23

ES9: Promise.finally

¿Qué se implementó en ES10?

24

ES10: flat-map y trimStart-trimEnd

25

ES10: try catch y fromEntries

¿Qué se implementó en ES11?

26

ES11: optional chaining

27

ES11: BigInt y Nullish

28

ES11: Promise.allSettled

29

ES11: globalThis y matchAll

30

ES11: dynamic Import

¿Qué se implementó en ES12?

31

ES12: numeric-separators y replaceAll

32

ES12: promise-any y métodos privados

¿Qué se implementó en ES13?

33

ES13: at

34

ES13: top level await en el consumo de una API

Recapitulación

35

Performance

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
2 Hrs
26 Min
51 Seg
Curso de ECMAScript: Historia y Versiones de JavaScript

Curso de ECMAScript: Historia y Versiones de JavaScript

Oscar Barajas Tavares

Oscar Barajas Tavares

ES11: dynamic Import

30/35
Recursos

La expresión import() permite manejar módulos dinámicamente, ya que la sintaxis de ECMAScript import ... from ... no lo permite.

Cómo utilizar importación dinámica

La importación dinámica consiste en cargar los módulos cuando el usuario los vaya a utilizar, y no al iniciar la aplicación. Esto permite que la página web sea más rápida, porque descarga menos recursos.

La expresión import() recibe un argumento de tipo string con la ruta del módulo a importar y devuelve una promesa.

const ruta = "./modulo.js"

// Utilizando promesas
import(ruta)
    .then( modulo => {
        modulo.funcion1()
        modulo.funcion2()
    })
    .catch(error => console.log(error))
    
// Utilizando async/await
async function importarModulo(rutaDelModulo) {
    const modulo = await import(rutaDelModulo)
    modulo.funcion1()
    modulo.funcion2()
}

importarModulo(ruta)

Ejemplo utilizando importación dinámica

De esta manera puedes utilizar una importación dinámica en tu aplicación para desencadenar una descarga de un módulo cuando el usuario lo vaya a utilizar. Por ejemplo, al realizar clic en un botón.

const boton = document.getElementById("boton")

boton.addEventListener("click", async function () {
    const modulo = await import('./modulo.js')
    modulo.funcion()
})

Puedes usar las herramientas de desarrollador para visualizar la descarga de archivos al realizar clic en el botón.

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 38

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Yuli Alexandra Pulido Castañeda

Yuli Alexandra Pulido Castañeda

hace 2 años

Hola chic@s. 😃
ES11: dynamic Import

  • Module.js
export function hello() {
    console.log("Hola Mundo")
}
  • Index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Import</title>
</head>
<body>
    <button id="btn">Click</button>
    <script type="module" src="06-dynamic-import.js"></script>
</body>
</html>
  • Dynamic-Import.js
const button = document.getElementById("btn");

button.addEventListener("click", async function () {
    const module = await import("./module.js");
    console.log(module);
    module.hello();
})
Zajith Corro Viveros

Zajith Corro Viveros

hace 2 años

Dado que el import retorna un objeto, se puede hacer un desestructuración del objeto para acceder más fácil 👍🏼

// module.js
export function sayHello() {
	console.log('Hello');
}

// main.js
const btn = document.querySelector('#try');

btn.addEventListener('click', async () => {
	const { sayHello } = await import('./module');

	sayHello();
});
José Antonio Mandujano Velázquez

José Antonio Mandujano Velázquez

hace 2 años

Otro punto importante a recalcar es que como menciona Oscar, el modulo o el JS que nosotros importemos dinamicamente no usara nada de red hasta que lo solicitemos, por lo cual podremos verlo en la pestaña de red en cuanto solicitemos el recurso, esto ayuda a que no generemos trafico inncesario en la red mientras cargamos la pagina y solo al momento de ser utiliado

VICTOR CAUDILLO

VICTOR CAUDILLO

hace 2 años

Algo de lo que se quejan muchas personas es que JavaScript hace lenta las webs, pero en ocasiones es por tenemos y cargamos muchos scritps.

Esto me parece mega importante ya que podremos cargar sólo lo que necesitemos y cuando lo necesitemos

Julian Franco

Julian Franco

hace 2 años

El secreto del dynamic import. Es usar el async, await para llamar el modulo unicamente cuando sea requerido.

Richard Pascual Huallpa Yapo

Richard Pascual Huallpa Yapo

hace 2 años

dynamic import es una nueva característica de JavaScript que se introdujo en ECMAScript 2020. Esta característica permite cargar módulos de forma dinámica en tiempo de ejecución, en lugar de importarlos en tiempo de compilación.

El uso de dynamic import se realiza mediante la función import(), que devuelve una promesa que se resuelve con el módulo importado. Esto permite cargar módulos solo cuando se necesitan, lo que puede mejorar el rendimiento y la usabilidad de la aplicación.

Aquí hay un ejemplo de cómo se puede usar dynamic import en JavaScript:

// moduleA.js
export const message = 'Hello from moduleA';

// main.js
async function loadModule() {
  const module = await import('./moduleA.js');
  console.log(module.message);
}

loadModule();
// Output: Hello from moduleA

En este ejemplo, se crea un módulo moduleA.js que exporta una constante message. Luego, en main.js, se crea una funciónloadModule que usa dynamic import para cargar moduleA.js de forma dinámica. La función import devuelve una promesa que se resuelve con el módulo importado, y la función loadModule espera a que se resuelva antes de imprimir el valor de la constante message.

Arnoll Bermudez

Arnoll Bermudez

hace 2 años

quisiera aclarar algo, y es que lo que hagamos en el modulo es lo que se va a ejecutar no lo que hagamos en el archivo al que estamos importando, si no me explique bien, dejo un ejemplo


const button = document.getElementById("btn");

button.addEventListener("click",async function () {
    const module = await import("./module.js");
    module.saludo();
});

tenemos el archivo javascript principal , al cual solo llamaremos la función que vamos a usar solamente la llamamos con module.saludo(); si en el modulo escribimos que se abra como alert() o window.prompt() o con console.log() se ejecutara el del modulo

module.js
export function saludo() {
    window.prompt("HELLO WORLD");
}

y nos aparecerá error si colocamos el console.log() en el archivo principal de javascript, espero haberme explicado, si no acepto feedback, gracias por su atención.

Teo Zavala

Teo Zavala

hace 2 años

Esta clase me gusto mucho.

silfredo mario

silfredo mario

hace 2 años

🥹Wow. Me encanto dynamic Import, puede mejorar la experiencia del usuario muchisimo. Antes lo que haciamos era colocar un segundo <script>

  <script src="./module.js"></script>
    <script tyoe="module" src="./06-dynamic-import.js"></script>
<code>

Lo que hacía que se descargaran los dos archivos, haciendo nuestra página más pesada.

Maria Gabriela Rodriguez Cuevas

Maria Gabriela Rodriguez Cuevas

hace 2 años

💼 Archivos del Proyecto 💼

 

Pasos 📌

 

  • • Dentro de la carpeta es11, crear el archivo llamado: 06-dynamic-import.js
      • ◦ El código queda:
const button = document.getElementById('btn');

button.addEventListener("click", async function () {
	const module = await import('./module.js');
	console.log(module);
	module.hello();
})

 

  • • Dentro de la carpeta es11, crear el archivo llamado: module.js
      • ◦ El código queda:
export function hello(){
	console.log('Hola Mundo!');
}
  • • Dentro de la carpeta es11, crear el archivo llamado: index.html, al comenzar, se escribe html:5 y aparece la plantilla de html:
      • ◦ El código queda:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dynamic Import</title>
</head>
<body>
	<button id="btn">Click</button>
	<script type="module" src="06-dynamic-import.js"></script>
</body>
</html>

 

  • • Para ver la página del index, en el menú en VS Code, dar click derecho y seleccionar: Open With Live Server.
     
  • • Se abrirá una página web en blanco con el botón “Click”, dar click derecho y seleccionar “Inspeccionar”, se selecciona la pestaña “Console”, al presionar el botón aparece el module y el mensaje de: Hola Mundo!
     
Jesús Eduardo Castillo Saavedra

Jesús Eduardo Castillo Saavedra

hace un año

La importación dinámica, conocida como “Dynamic Import” en JavaScript, es una característica que te permite cargar módulos de forma asíncrona y dinámica en tiempo de ejecución. Esto es útil cuando no deseas cargar todos los módulos al principio, sino que prefieres cargarlos solo cuando sean necesarios, lo que puede mejorar el rendimiento y la eficiencia de tu aplicación.

La forma básica de usar la importación dinámica es mediante el uso de la función import(). Aquí tienes un ejemplo:

// Forma estática de importar un módulo
import { miFuncion } from './mi-modulo.js';

// Forma dinámica de importar un módulo
import('./mi-modulo.js')
  .then((modulo) => {
    // Ahora puedes usar las exportaciones del módulo
    modulo.miFuncion();
  })
  .catch((error) => {
    console.error('Error al cargar el módulo:', error);
  });

En este ejemplo, hemos importado un módulo de forma dinámica utilizando import(). La función import() devuelve una promesa que se resuelve cuando el módulo se ha cargado con éxito. Luego, puedes acceder a las exportaciones del módulo dentro del bloque then de la promesa.

Es importante destacar que la importación dinámica solo se admite en entornos modernos de JavaScript, como navegadores recientes y versiones más recientes de Node.js. Además, ten en cuenta que la importación dinámica solo funciona en contexto de módulos, por lo que debes estar utilizando módulos en tu proyecto para aprovechar esta funcionalidad.

La importación dinámica es útil en situaciones en las que deseas cargar módulos de manera condicional o diferida, como en aplicaciones web que utilizan rutas y cargan módulos específicos según la ruta actual del usuario.

Ricardo Alfonso Chavez Vilcapoma

Ricardo Alfonso Chavez Vilcapoma

hace 2 años

Mi resumen:

  • HTML
  • Module.js
  • DynamicImport.js
EstuardoLofish

EstuardoLofish

hace 2 años

Interesante!
Si a los primeros tres segundos una pagina no carga o no tiene una interacción con el usuario podemos perder estos usuarios.

Oscar Barajas.

Luis Alfredo Suarez

Luis Alfredo Suarez

hace un año

ES11: dynamic Import


La característica “dynamic import” (importación dinámica) fue introducida en ECMAScript 11 (también conocido como ES2020) para permitir cargar módulos JavaScript de manera dinámica en lugar de cargarlos todos al inicio de tu programa. Esto puede ser útil cuando solo quieres cargar un módulo cuando lo necesitas, en lugar de cargar todos los módulos de una vez al principio.

Imagina que tienes una aplicación web con varias secciones, y cada sección tiene su propio módulo JavaScript. Antes, tenías que cargar todos los módulos al principio, incluso si el usuario solo interactuaba con una sección. Esto podría hacer que la página se cargue más lentamente. Con la importación dinámica, puedes cargar el módulo específico solo cuando el usuario interactúa con esa sección, lo que mejora el rendimiento y la velocidad de carga.

Aquí tienes un ejemplo sencillo de cómo se vería el código con importación dinámica:

Supongamos que tienes dos módulos: moduloA.js y moduloB.js.

// Antes (sin importación dinámica)
// import { funcionA } from './moduloA.js';
// import { funcionB } from './moduloB.js';

// Después (con importación dinámica)
botonA.addEventListener('click', async () => {
  const moduloA = await import('./moduloA.js');
  moduloA.funcionA();
});

botonB.addEventListener('click', async () => {
  const moduloB = await import('./moduloB.js');
  moduloB.funcionB();
});


En este ejemplo, cuando el usuario hace clic en botonA, el módulo moduloA.js se cargará y luego podrás llamar a la función funcionA(). Lo mismo ocurre con botonB y moduloB.js.

En resumen, la importación dinámica es una característica que te permite cargar módulos JavaScript según sea necesario, en lugar de cargarlos todos al principio. Esto puede mejorar la velocidad de carga y el rendimiento de tus aplicaciones web al cargar solo lo que se necesita en ese momento.

Espero sea de utilidad. 👨‍💻

edgar zambrano

edgar zambrano

hace 2 años

Otra shortcut que puedes utilizar es la siguiente signo de admiración y enter( ! )

CHRISTIAN DANIEL LA CRUZ COTUA

CHRISTIAN DANIEL LA CRUZ COTUA

hace un año

Probe el dinamic import con dos cosas importando una clase para instanciarla y haciendo una consulta a una api, funciona fenomenal.

const button = document.getElementById('btn');

button.addEventListener('click', async ()=>{
    const module = await import('./module.mjs');
    module.hello('Chris');
    const chirs = new module.Persona('Christian', 18);
    chirs.gretting();
    const data =  await chirs.consutlta('https://jsonplaceholder.typicode.com/todos/1')
    const response =   await data.json();
    console.log(response);
    const structure = await `<h1> title ${response.title} completed task = ${response.completed} </h1>`;
    document.body.innerHTML = structure;
});

export function hello(value){
    console.log(value);
}
export class Persona {
    name = '';
    lastName = '';
    age = 0;
    constructor(name, age){
        this.name = name;
        this.age = age;
        this.lastName = 'La Cruz';
    }

    set name(name){
        this.name = name
    }
    get name(){
        return this.name
    }
    gretting(){
        console.log(`Hola mi nombre es ${this.name} y tengo ${this.age}`);
    }
    consutlta(url){
        return  fetch(url); 
    }
}
Abigail Nahomi Chávez Lozano

Abigail Nahomi Chávez Lozano

hace un año

IMPORTACIÓN DINÁMICA
Cargar, llamar y ejecutar bloques, módulos de código, según se nesecite en tiempo de ejecución, no al cargar la página en tiempo de compilación. Hace más rápida la página y mejora considerablemente el performance. Asegura que el usuario tenga una buena experiencia al no esperar demasiado a que la página carge.

  • Sintáxis de promesa:
button.addEventListener("click", () => {
    //Cuando de de click a 'buton', importa a 'module.js'
    import("./module.js")
    //Cuando se hay importado ejecuta su función 'function'
    .then(modulo => {
        modulo.function()
    })
})
  • Async y await
button.addEventListener("click", async function () {
    //Cuando se de click se llama a la funcion anónima que trae a modulo.js y ejecuta su función 'function'
    const module = await import("./module.js");
    module.function()
})
Carlos Esteban León Pinilla

Carlos Esteban León Pinilla

hace un año

Interesante el dynamic import. 💪

Alberto Ángel Villanueva Ríos

Alberto Ángel Villanueva Ríos

hace un año

Otro shortcut en VSC para agregar la estructura HTML aparte de html:5 es agregar solamente ! por si a alguien le sirve =)

Juan David Pérez Numa

Juan David Pérez Numa

hace un año
  • Un dato que le puede servir como shortcut ademas de escribir

(‘html:5’ y tab o enter)

  • Pueden simplemente colocar el signo de admiracion

(’!’ y tab o enter )

  • Ademas recordales que en el escrip ademas de agregar que es

type=“module”

  • Debemos agregar la palabra reservada:

defer

  • El atributo “defer” en un script de JavaScript se utiliza para retrasar su ejecución hasta que el documento HTML se haya analizado por completo, evitando así que se bloqueen otros elementos de la página y permitiendo un mejor rendimiento y experiencia de carga.
Luis Felipe Moreno Rondon

Luis Felipe Moreno Rondon

hace un año

WOW, esta caracteristica de ES11 es muy util 😮

Edgar Geovani Xuc Xol

Edgar Geovani Xuc Xol

hace un año

pregunto si todos los codigos que esta haciendo el profe estaran todos en Github

Jesus Vite

Jesus Vite

hace 2 años

☢️ Minuto 9:50 presten bastante atención.

🟧 Si no ejecutan el codigo desde Liver Server les saldran errores tal es como “bloqueos o que no se puede leer el import”

José Rodrigo Álvarez Herrera

José Rodrigo Álvarez Herrera

hace 2 años

Según yo la etiqueta script del html no requiere usar type=“module” por que no estamos cargando el módulo
de forma directa, se carga desde la función asíncrona que se
dispara cuando ocurre el evento del boton.

Jose Alberto Reyes Quevedo

Jose Alberto Reyes Quevedo

hace 2 años

Otra cosa que sería buena revisar, es el tab de network para ver como carga el archivo de JS hasta que se le da click al botón

kevincamacho

kevincamacho

hace 2 años

import() es una función que nos permite cargar módulos de manera dinámica en tiempo de ejecución. Esto significa que podemos cargar un módulo solo cuando se necesite, en lugar de cargarlo al principio de nuestra aplicación.

La sintaxis para import() es similar a la sintaxis de importación regular, pero envuelto en una función:

import('ruta/al/modulo').then((modulo) => {
  // Utilizar el módulo aquí
}).catch((error) => {
  // Manejar errores aquí
});

La función import() devuelve una promesa que se resuelve con el módulo exportado una vez que se ha cargado. Podemos acceder al módulo exportado dentro del then() de la promesa.

Una de las ventajas de import() es que nos permite cargar módulos de manera condicional, lo que puede mejorar el rendimiento de nuestra aplicación. Por ejemplo, podemos cargar un módulo solo si el usuario realiza una acción específica:

boton.addEventListener('click', () => {
  import('./ruta/al/modulo').then((modulo) => {
    // Utilizar el módulo aquí
  }).catch((error) => {
    // Manejar errores aquí
  });
});

También podemos utilizar la sintaxis de async/await para cargar módulos de manera dinámica:

async function cargarModulo() {
  try {
    const modulo = await import('./ruta/al/modulo');
    // Utilizar el módulo aquí
  } catch (error) {
    // Manejar errores aquí
  }
}

Ten en cuenta que import() solo funciona en entornos que soportan módulos ES6, como navegadores modernos y Node.js 10.0.0 o superior.

Espero que esto te haya sido de ayuda. ¡Déjame saber si necesitas ayuda con algo más!

Wil Garcia

Wil Garcia

hace 2 años

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Import</title>
</head>
<body>
    <button id="Boton">Click aqui</button>
    <script type="module" src="./06_dynamic_import.js"></script>
</body>
</html>

module.js

export function hello() {
    console.log("Hola Mundo");
}

06_dynamic_import

const button = document.getElementById("Boton");

button.addEventListener("click", async function () {
    const module = await import("./module.js");
    console.log(module);
    module.hello();
})
Daniel Guevara

Daniel Guevara

hace 2 años

Esta si que es una característica GOD.
Me acuerdo que hice una web sencilla pero la habia llenado de spaguetti de JS y se hacia lenta por tanto código que le habia metido, usando esto es brutal como puedo invocar modulos a medida que el usuario navegue, las posiblidades son infinitas.

Brahayan Ferney González Vanegas

Brahayan Ferney González Vanegas

hace 2 años

Hasta ahora entendí el porque de las funciones asincronías 😎🥲

Carlos Andrade

Carlos Andrade

hace 2 años

30/35 ES11: dynamic Import
La expresión import() para manejar dinámicamente en JavaScript. Esto permite cargar los módulos solo cuando el usuario los necesite, lo que hace que la página web sea más rápida al descargar menos recursos.

//Ejemplo de importación dinámica
const boton = document.getElementById("boton");

boton.addEventListener("click, async function () {
	const modulo = await import("./modulo.js");
	modulo.saludar();
});

En este ejemplo, se utiliza la importación dinpamica para cargar un módulo llamado “modulo.js” cuando el usuario haga clic en un botón. Dentro del móudlo hay una función llamada “saludar” que se ejecuta al hacer clic en el botón. Al utilziar la importación dinámica, se evita cargar el módulo al inicio de la aplicación, lo que mejora el rendimiento.

Dario Mendoza

Dario Mendoza

hace 2 años
Dario Mendoza

Dario Mendoza

hace 2 años

Dario Mendoza

Dario Mendoza

hace 2 años
Delia Roman

Delia Roman

hace 2 años

muy buena funcionalidad!!, supongo puede servir para cargar imágenes 😃

Hector Maluy Fernandez

Hector Maluy Fernandez

hace 2 años

Si solo copio la ruta del archivo html y la pego en el navegador, me sale error en la consola. Desafortunadamente Platzi no me esta cargando la imagen del error.

JUAN CAMILO CAMPO TANGARIFE

JUAN CAMILO CAMPO TANGARIFE

hace 2 años

en VSC también puedes utilizar el signo ! + TAB de esta forma genera la estructura HTML5, sin escribir “html:5”

Mucho más rápido jeje.

Porfirio González López

Porfirio González López

hace 2 años

Apunte en Notion

Porfirio González López

Porfirio González López

hace 2 años

Rompiéndome la cabeza al ver que no sucedía nada al tocar el click y al final te enteras que era en la consola > fuentes