¿Cómo funciona el import y export de JavaScript?

¿Cómo funciona el import y export de JavaScript?

Enseñando JavaScript, Angular y React veo que esta duda es muy común tanto en aquellos que están comenzando con JavaScript como en personas que ya trabajan con el lenguaje, pero nunca exploraron el recurso, ¡así que veamos cómo usarla a diario!

Primero, es importante decir en JavaScript, cada archivo se considera un módulo y todas las variables y funciones que tiene sólo son accesibles dentro de él, a menos que las exportes explícitamente.

En el navegador, debes usar la tag script con type="module" para usar los recursos que se muestran aquí, si estás usando algún framework, no debes preocuparte y en NodeJS el soporte ya está disponible:). Recordando que, MDN tiene toda la referencia sobre este tema: import y export

El caso más común: export default

En el siguiente caso, siempre que creamos un archivo (módulo), y queremos exportar algún dato de él para acceder otro, haremos un código muy similar con el ejemplo siguiente:

// ## ex01/moduloA.js

const variable = 'Valor';
const variable2 = 'Outro Valor';

export default variable;

// ## ex01/moduloB.js

import Modulo;

console.log(Modulo); // => 'Valor'

Es importante destacar que, en este caso la variable2 no está disponible como un valor accesible en ex01/moduloB.js

También tenga en cuenta que al importar, no es necesario dar el nombre variable, el nombre es un apodo (o alias) y puedes elegir el que tenga más sentido dentro del contexto de la importación, recordando que, es una buena práctica hacer el import con el nombre del archivo la mayor parte del tiempo, dejando algo como moduleA.

// ## ex01/moduloB.js

import ModuloA;

console.log(ModuloA); // => 'Valor'

¿Cómo exportar múltiples valores de un archivo?

La primera opción, además de lo que vimos anteriormente, es exportar un objeto con los datos a los que queremos acceder en otro archivo:

// ## ex01/moduloA.js

const variable = 'Valor';
const variable2 = 'Otro Valor';

export default {
   variable: variable,
   variable2: variable2,
};

// ## ex01/moduloB.js

import Modulo;

console.log(Modulo); // { variable: 'Valor', variable2: 'Otro Valor' }

Una forma alternativa a lo que vimos ahora es hacer al declarar una variable o función, poner un exportar, como en el siguiente ejemplo:

// ## ex01/moduloA.js

export const variable = 'Valor';
export const variable2 = 'Otro Valor';

// ## ex01/moduloB.js

import { variable, variable2 };

console.log(variable, ' y ' ,variable2); // 'Valor y Otro Valor'

Observe que ahora, ya no estamos usando el importModulo y sí haciendo un object destructuring y accediendo a cada valor individualmente, también podríamos también hacer el import como import * as Modulo, por lo que cada valor que exportamos se agruparía dentro de un módulo.

¿Se puede mezclar todo?

¡Sí! Puedes hacerlo, simplemente basándose en el siguiente ejemplo:

// ## ex01/moduloA.js

export const variable = 'Valor';
export const variable2 = 'Otro Valor';

export default 'Valor default del módulo';

// ## ex01/moduloB.js

import ValorDelModulo, { variable, variable2 };

console.log(variable, ' y ' ,variable2); // 'Valor y Otro Valor'
console.log(ValorDelModulo); // Valor default del módulo'

¿Qué hemos visto hasta ahora?

El import y export son muy flexibles y si conoces otro caso más y quieres compartirlo conmigo, dejo el espacio abierto en mi twitter.

Si te interesa este tema, aquí en Alura tenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.