Cómo importar una función desde otro archivo JS

Para llamar a una función desde otro archivo JavaScript, elige el método adecuado para cada entorno: las etiquetas <script> clásicas exponen una variable global en el navegador, los módulos ECMAScript usan export e import, y CommonJS de Node.js usa module.exports y require. Los ejemplos muestran cómo conectar los archivos y dónde funciona cada método.

Llamar a una función desde otro archivo JavaScript en un navegador

En una página que usa scripts clásicos, define la función en un archivo y carga ese archivo antes del script que la llama. Los scripts clásicos comparten el ámbito global de la página, así que el primer archivo puede asociar la función a window:

• En greeting.js, escribe window.showGreeting = function () { document.querySelector("#message").textContent = "Hello from greeting.js"; };.
• En app.js, escribe document.querySelector("#show").addEventListener("click", window.showGreeting);.

Guarda estos archivos junto a index.html. Esta página los carga en el orden necesario y proporciona el botón y el elemento para mostrar el mensaje:

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Call a function from another file</title>
  <p id="message">Click the button to show the message.</p>
  <button id="show" type="button">Show greeting</button>
  <script src="greeting.js"></script>
  <script src="app.js"></script>
</html>

Al hacer clic en el botón, el controlador de eventos de app.js llama a la función cargada desde greeting.js. Mantén primero el script que define la función; de lo contrario, la página podría intentar registrar el controlador antes de que exista window.showGreeting. El bloque html muestra una página de navegador, no una transcripción de la salida de ejecución. Los textos visibles de los ejemplos permanecen en inglés porque los bloques de código se conservan sin cambios.

Compartir funciones con módulos ECMAScript

Usa módulos ECMAScript si quieres importar funciones de forma explícita en lugar de compartir una variable global. Guarda estos tres archivos completos en el mismo directorio. El primer archivo exporta una función y el segundo la importa y actualiza la página:

• greeting.js: export function makeGreeting(name) { return \Hello, ${name}!`; }`
• app.js: import { makeGreeting } from "./greeting.js"; document.querySelector("#message").textContent = makeGreeting("Ada");

Guarda esta página completa como index.html, junto a los otros archivos. El elemento del mensaje ya está presente cuando se ejecuta el módulo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Share a function with a module</title>
  </head>
  <body>
    <p id="message">The greeting will appear here.</p>
    <script type="module" src="app.js"></script>
  </body>
</html>

Asegúrate de que la ruta relativa de importación corresponda a la ubicación de los archivos. Los navegadores cargan los módulos con semántica de módulos y no colocan sus declaraciones en window.

Sirve la página por HTTP con un servidor de desarrollo local; abrirla directamente mediante una URL file: suele impedir que se carguen los módulos. Este es un requisito de alojamiento del navegador, no un requisito para ejecutar Node.js. Node.js también admite módulos ECMAScript, con sus propias reglas para paquetes y extensiones de archivo. La sintaxis de exportación de módulos ECMAScript usa el mismo mecanismo export para funciones y otros valores.

Importar funciones con CommonJS en Node.js

CommonJS es el sistema de módulos tradicional de Node.js. Un módulo puede asignar una función a module.exports, y otro archivo puede obtenerla con require. La comparación entre import y require en JavaScript explica las diferencias entre estos sistemas de módulos.

Este ejemplo autónomo de Node.js crea un archivo auxiliar, importa su función y la llama. Guarda el código como main.cjs y ejecuta node main.cjs en una terminal con Node.js instalado:

const fs = require("node:fs");
const os = require("node:os");
const path = require("node:path");

const folder = fs.mkdtempSync(path.join(os.tmpdir(), "function-demo-"));
try {
  const helperPath = path.join(folder, "math.cjs");
  fs.writeFileSync(helperPath, "module.exports = (a, b) => a + b;\n");
  const add = require(helperPath);
  console.log(`Result: ${add(5, 3)}`);
} finally {
  fs.rmSync(folder, { recursive: true, force: true });
}

Result: 8

El archivo auxiliar exporta una función y el archivo que la llama la recibe como valor devuelto por require; la llamada final a console.log usa esa función. La extensión .cjs deja explícito el formato CommonJS del archivo auxiliar, incluso si el proyecto que lo contiene usa módulos ECMAScript. Este ejemplo está diseñado para Node.js y no se ejecuta en una página del navegador. Los textos visibles de los ejemplos permanecen en inglés porque los bloques de código y salida se conservan sin cambios.

Cargar un archivo JavaScript con jQuery

$.getScript() de jQuery puede cargar un script cuando se necesita. Es una alternativa heredada para páginas que ya usan jQuery; en el código nuevo, los módulos del navegador o las etiquetas de script normales suelen ser más claros. Carga jQuery antes que el código que la utiliza y espera a que termine la carga antes de usar la función del archivo descargado.

Por ejemplo, mathUtils.js puede exponer una variable global del navegador con window.mathUtils = { add: (a, b) => a + b };. En la página, carga primero jQuery y usa la función de retorno para llamar a la función después de que se haya cargado el script:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  $.getScript("mathUtils.js")
    .done(function () {
      const result = window.mathUtils.add(5, 3);
      $("body").append(`<p>Result: ${result}</p>`);
    })
    .fail(function () {
      $("body").append("<p>The script could not be loaded.</p>");
    });
</script>

La solicitud es asíncrona, así que el código que depende de mathUtils debe estar dentro de .done() (o de otro controlador de finalización), no inmediatamente después de $.getScript(). Para una URL de otro origen, jQuery puede cargar el script mediante un elemento de script; por lo general, los navegadores no exigen CORS para ese tipo de carga. En cambio, una solicitud fetch() o XHR a otro origen sí requiere que el servidor la permita mediante CORS. Las políticas del navegador, como Content Security Policy, todavía pueden bloquear la carga del script, y la carga también puede fallar si la URL no está disponible. Consulta la documentación de $.getScript() de jQuery para conocer su comportamiento de carga.