Calling a JavaScript function in another js file

javascript

es6-modules

import-export

javascript-best-practices

byAlex Kataev·Jan 31, 2025

To invoke a function from a different .js file, connect both files in your HTML using <script> tags. The loading order is vital: include the file containing the function before the one intending to call it.

<script src="first.js"></script> <!-- Function `fn1()` is defined here -->
<script src="second.js"></script>  <!-- Function `fn1()` is invoked here -->

In your second.js:

fn1(); // Call the function defined in first.js, here.

To ensure the function is accessible and the DOM is ready, wrap your function call in a DOMContentLoaded event:

document.addEventListener('DOMContentLoaded', () => {
  fn1(); // Making sure fn1() doesn't get a case of stage fright
});

Ensuring your functions are global divas

Declare a function in the global scope using window.fn1 = function() {} in first.js. This way, the function becomes a global diva, ready to perform on any stage (second.js), granted first.js has had the curtains lifted first.

Import/Export: Passing the function mic

Make your code rock with an organized setlist, using ES6 modules. Using export in first.js allows you to share your setlist (functions) to other band members (files).

first.js:

export function fn1() {
  // Some killer guitar riffs
}

Now, //in second.js, you can request fn1's stellar performance:

import { fn1 } from './first.js'; // Scored front row tickets to fn1's gig

fn1(); // My ears have been blessed

Remember to add type="module" to your script tags to bring the rock concert to life:

<script type="module" src="second.js"></script> <!-- Concert time! -->

Handling dynamic imports like a roadie

When dynamically importing, be prepared for some unexpected stage dives - errors or loading issues. Make sure the stage (DOM) is set before your function divas arrive - avoid enclosing function calls with a document.ready in first.js and look out for unexpected stage props (errors).

Minimizing global divas with organized gigs (modules)

While all divas love the spotlight, too many on stage result in chaos. Keep your global namespace clean by using modules that only bring on stage needed function divas for a smooth gig. Modular, maintainable, and minimal drama!

The importance of the script order and the right paths

Keep in mind; all browsers don't support the ES6 modules, and make sure your file paths are correct to avoid embarrassingly empty stages. To maintain order and avoid any diva outrages, it's crucial that first.js is loaded before second.js.

Embracing the modular stadium tour

With the use of modules and imports, your code's world tour becomes a breeze. This approach makes your code modular, maintainable, and ready for stadiums, while bundling tools act like your tour manager, organizing all the necessary arrangements.

Accessing the global green rooms

Sometimes, you might have to deal with divas already in their global green rooms (darn global functions!). Using closures in 'second.js', you can access these divas defined in 'first.js', ensuring the show goes on!

Example: Backstage passes

Have a peek behind the curtain with this example of how to use a function from first.js in second.js in a modular manner:

first.js:

// Here's a function
export const backstagePass = () => {
  console.log('Access granted!'); // We're in!
};

second.js:

// Importing the function
import { backstagePass } from './first.js';

// Using the function
backstagePass(); // Access granted! The party's this way.