Exportar e Importar Módulos en JavaScript

En JavaScript, puedes dividir tu código en módulos y exportar funciones, objetos o variables de un archivo para ser utilizados en otro.

Sintaxis:

Supongamos que queremos crear dos archivos, uno para la función y otro para importar y usar esa función:

// archivo saludo.js
export function saludar(nombre) {
  console.log(`Hola, ${nombre}!`);
}

// archivo app.js
import { saludar } from './saludo.js';

saludar("Juan");

Propósito:

El uso de módulos permite organizar el código de manera más eficiente y reutilizable, separando funcionalidades en diferentes archivos y mejorando la escalabilidad de los proyectos.

Ejercicios

Prueba interactiva 1: Arrastra y Suelta.

Arrastra en el orden correspondiente.

Arrastra las opciones:

export function saludar(nombre) {

import { saludar } from './saludo.js';

saludar('Juan');

Completa el código:

Palabra clave para hacer que una función esté disponible fuera del módulo.______

Declaración para traer funcionalidades de otros módulos.______

Llamada a la función importada.______

Prueba interactiva 2: Rellenar huecos

Rellena los huecos en cada casilla.

 saludar(nombre) {
  console.log(`Hola, ${nombre}!`);
}

//  { saludar } from './saludo.js';

saludar('Juan');

Ejercicio 3:

Completa el código en el editor para importar y ejecutar la función que muestra un mensaje.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

// archivo saludo.js
export function saludar(nombre) {
  console.log(`Hola, ${nombre}!`);
}

// archivo app.js
import { saludar } from './saludo.js';

saludar("Juan");

¿Qué es la sintaxis de import y export?

JavaScript Concepts and Reference

JavaScript Intro

Control Structures

Functions

Objects in JavaScript

Arrays

DOM (Document Object Model)

Error Handling

Promises and Asynchronicity

Modules in JavaScript

ES6 and Advanced Features

Other Important Concepts

¿Qué es la exportación de módulos en JavaScript? ¿Qué es import y export? ¿Qué es exportar e importar en JS? ¿Cómo importar módulos en JS? JavaScript import Cannot use import statement outside a module Module exports JavaScript Importar clase en JavaScript Export JavaScript Módulos JavaScript Javascript modules import JavaScript import and export