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.1416Otro 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.1416Este ú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!