[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export [Back]  [Original]

export - JavaScript | MDN

Esta pgina ha sido traducida del ingls por la comunidad. Aprende ms y nete a la comunidad de MDN Web Docs.

View in English Always switch to English

export

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since mayo de 2018.

La declaracin export se utiliza al crear mdulos de JavaScript para exportar funciones, objetos o tipos de dato primitivos del mdulo para que puedan ser utilizados por otros programas con la sentencia import.

Los mdulos exportados estn en strict mode tanto si se declaran as como si no. La sentencia export no puede ser utilizada en scripts embebidos.

In this article

Sintaxis

js
export { name1, name2, , nameN };
export { variable1 as name1, variable2 as name2, , nameN };
export let name1, name2, , nameN; // tambin var
export let name1 = , name2 = , , nameN; // tambin var, const
export function FunctionName(){...}
export class ClassName {...}

export default expression;
export default function () {  } // tambin class, function*
export default function name1() {  } // tambin class, function*
export { name1 as default,  };

export * from ;
export { name1, name2, , nameN } from ;
export { import1 as name1, import2 as name2, , nameN } from ;
export { default } from ;
nameN

Identificador a ser exportado (es posible importarlo a travs de import en otro script).

Descripcin

Existen dos tipos diferentes de exportacin , nombrada y por defecto. Se pueden tener varias exportaciones nombradas por mdulo pero slo una exportacin por defecto. Cada tipo corresponde a una de las sintaxis siguientes:

  • Exports con nombre:

    js
    // exporta la funcin previamente declarada
    export { myFunction };
    
    // exporta una constante
    export const foo = Math.sqrt(2);
    
  • Exports por defecto (function):

    js
    export default function () {}
    
  • Exports por defecto (class):

    js
    export default class {}
    

Los export con nombre son tiles cuando se necesitan exportar mltiples valores. Durante el import, es obligatorio usar el mismo nombre que el correspondiente objeto.

Pero un export por defecto puede ser importado con cualquier nombre, por ejemplo:

js
export default (k = 12); // en el archivo test.js

import m from "./test"; // notese que tenemos la libertad de usar import m en lugar de import k, porque k era el export por defecto

console.log(m); // escribir 12

Slo puede haber un export por defecto.

La siguiente sintaxis no exporta un export por defecto del mdulo importado:

js
export * from ;

Si necesita exportar por defecto, escriba lo siguiente en su lugar:

js
import mod from "mod";
export default mod;

Ejemplos

Usando exports con nombre

En el mdulo, podremos usar el siguiente cdigo:

js
// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = {
  options: {
    color: "white",
    thickness: "2px",
  },
  draw: function () {
    console.log("From graph draw function");
  },
};
export { cube, foo, graph };

De esta forma, en otro script, podemos tener:

js
//You should use this script in html with the type module ,
//eg ''<script type="module" src="demo.js"></script>",
//open the page in a httpserver,otherwise there will be a CORS policy error.
//script demo.js

import { cube, foo, graph } from "my-module";
graph.options = {
  color: "blue",
  thickness: "3px",
};
graph.draw();
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888

Usando el export por defecto

Si queremos exportar un slo valor o tener uno por defecto para nuestro mdulo, podemos usar un export por defecto:

js
// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

De esta forma la importacin de un export default ser sumamemte sencilla:

js
import cube from "my-module";
console.log(cube(3)); // 27

Tenga en cuenta que no es posible usar var, let o const con export default.

Especificaciones

Specification
ECMAScript 2027 LanguageSpecification
# sec-exports

Compatibilidad con navegadores

Vea tambin


Web Proxy Viewer  |  New URL  |  Original Page