Importar y Exportar con Javascript ES6

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.