Categorías
Desarrollo y Programación

Importar y Exportar con Javascript ES6

Cada vez que revisas una librería o sigues un tutorial ves esas palabras export e import que no sabes ni con que se come, bueno aquí la explicación de todo.

Bienvenidos a otra valiosa información en internet totalmente en español, en esta ocasión vamos a ver cómo importar y exportar variables, funciones, expresiones y clases con JavaScript.

Actualizaciones:
– Elimine paréntesis de la declaración de clases

Exports Default

Cuando se utiliza un default para exportar, se puede utilizar cualquier nombre para importar.

Función Anónima

// helpers.js
export default function() {
  // Do something
}

// index.js
import Awesomeness from './helpers'

console.log(Awesomeness); // ƒ(){}

Función

// helpers.js
export default function hiDude() {
  // Do something
}

// index.js
import Awesomeness from './helpers'

console.log(Awesomeness); // ƒ hiDude(){}

No es posible tener más de un “export default” en un archivo, así que no lo intentes en casa.

– La comunidad PRO de JavaScript

Clase Anónima

Recordar que las clases son un tipo de objeto con superpoderes.

// classes.js
export default class {
  // rest of class
}

// index.js
import ImportantClass from './classes'

console.log(ImportantClass); // ƒ _default(){}

Clase

// classes.js
export default class Person {
  // rest of class
}

// index.js
import ImportantClass from './classes'

console.log(ImportantClass); // ƒ Person(){}

Variables

// constants.js
const PI = 3.1416;
export default PI;

// index.js
import PIValue from './constants'

console.log(PIValue); // 3.1416

Otro método para exportar variables:

// constants.js
const PI = 3.1416;
export {PI as default};

// index.js
import PIValue from './constants'

console.log(PIValue); // 3.1416

Este último también sirve para las funciones:

// constants.js
function getPI(){
  return 3.1416
}
export {getPI as default};

// index.js
import PIValue from './constants'

console.log(PIValue); // ƒ getPI(){}

Named Exports

A diferencia de los default, en este tipo si es necesario dar un nombre a nuestra variable, método, etc.

Exportar por separado

export function add(){
  // add something
}

export class Person {
  // class definition
}

export const PI = 3.1416;

export let car = {
  paintColor: 'red'
}

Exportar todo en una sentencia

function add(){
  // add something
}

class Person {
  // class definition
}

const PI = 3.1416;

let car = {
  paintColor: 'red'
}

export { add, Person, PI, car };

Para importar estos elementos (cualquiera de las 2 formas anteriores) es necesario utilizar el nombre que se les dio al momento de exportar:

import { add, Person, PI, car } from './helpers'

console.log(add); // ƒ add(){}
console.log(Person); // ƒ Person(){}
console.log(PI); // 3.1416
console.log(car); // { paintColor: 'red' }

Exportar named y default

En el caso de las named, deben importarse entre los corchetes y el default queda fuera de los corchetes.

// important.js
export add() {
  // do add
}

export const maxValue = 999;

export default class Calculator {
  // Calculator class
}
// index.js
import Calc, { maxValue, add } from './important'

// Recordar que el default no importa el nombre
console.log(Calc); // ƒ Calculator() {}
console.log(maxValue); // 999
console.log(add); // ƒ add() {}

No es posible hacer un “named export” con una función anónima o una expresión. Siempre es necesario que tenga un nombre.

– La comunidad PRO de JavaScript

Exportar con un nombre diferente (alias)

En algunos casos nos puede ayudar darle un nombre diferente a nuestros exports.

function add(){
  // add something
}

function divide(){
  // divide something
}

export { add as plus, divide as split };

Al momento de importar es necesario importar con ese nuevo nombre que le asignamos, sin embargo nuestros métodos conservaran la referencia a su nombre original.

import { plus, split } from './calculator.js'

console.log(plus); // ƒ add() {} <-- add en vez de plus
console.log(split); // ƒ divide() {}

Exportar desde otros archivos

Si aunque el uso de este tipo no es muy común, es posible hacerlo. Supongamos que tenmos un archivo pruncipal:

export default add() {
  // add something
}

export multiply() {
  // multiply something
}

ahora podemos tener un exportador que agrupe de uno o diferentes archivos:

export {
  default,
  multiply
} from './calculator'

Ahora podemos importar del nuevo archivo:

import add, { multiply } from './operations'

console.log(add); // ƒ add() {}
console.log(multiply): // ƒ multiply {}

Exportar desde otros archivos con alias

De igual forma que antes podemos utilizar alias para exportar y renombrar.

export {
  default as plus,
  multiply
} from './calculator'

Ahora que nuestros default pasaron a ser named, es necesario importarlos con ese nuevo nombre:

import { plus, multiply } from './operations-alias'

console.log(plus); // ƒ add() {}
console.log(multiply): // ƒ multiply {}

Importar con alias

Es posible también agregar un alias al momento de importar.

import { plus as suma, multiply as multiplicar } from './operations-alias'

Esto es útil cuando importamos métodos con el mismo nombre que vengan de distintos archivos. A continuación 2 métodos con el mismo nombre pero en distintos archivos:

export getAge() {}
export getAge() {}

Ahora si queremos utilizarlos podemos asignarles un alias:

import { getAge as grandFatherAge } from './grandfather';
import { getAge as fatherAge } from './father';

console.log(grandFatherAge);
console.log(fatherAge);

Exportar todo

Es posible utilizar el comodín “*” para exportar todos los elementos, tomemos como ejemplo el siguiente archivo.

export function add(){
  // add something
}

export class Person {
  // class definition
}

export const PI = 3.1416;

export let car = {
  paintColor: 'red'
}

export default helloWorld(){
  // say hello
}

Y al momento de exportar solo necesitamos lo siguiente:

export * from './examples';

Al hacer un export con * , el método default no se exporta por lo que debe exportarse por separado.

– La comunidad PRO de JavaScript

Para exportar además el método default necesitamos lo siguiente:

export { default } from './examples';
export * from './examples';

En caso de existir más de un default es necesario utilizar los alias.

Importar todo

Al importar con * es necesario asignar un alias, este alias ahora será un objeto con todo lo importado (incluido el default):

import * as exampleMethods from './examples';

console.log(exampleMethods.add); // ƒ add(){}
console.log(exampleMethods.Person); // ƒ Person(){}
console.log(exampleMethods.PI); // 3.1416
console.log(exampleMethods.car); // { paintColor: 'red' }
console.log(exampleMethods.default); // ƒ helloWorld() {}

Es posible importar el default por separado, aunque de igual forma existirá en nuestro objeto:

import exampleDefault, * as exampleMethods from './examples';

console.log(exampleMethods.default); // ƒ helloWorld() {}
console.log(exampleDefault); // ƒ helloWorld() {}

Ahora si a andar desnudos por la casa

Ahora que sabes todas las formas de importar y exportar modulos, variables, etc. es hora de mostrarle al mundo que estas a punto de ser un ninja del Javascript o que ya eres un ninja avanzado.

Si te gusto el post o tienes alguna duda deja tu comentario y no olvides seguirme por el resto de redes sociales.

Un saludo 😀 y nos vemos en la siguiente publicación.

Una respuesta en “Importar y Exportar con Javascript ES6”

Buenísimo, siempre lo usaba sin saber muy bien porqué, aunque tenía nociones. Ahora sé que sus usos se pueden extiender.

Muchas gracias Porfirio!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *