JavaScript Tutorials

JavaScript Import Function From Another File

Last modified on June 16th, 2023
Raja Tamil

In this JavaScript tutorial, you’re going to learn how to import a function from another JavaScript file with 3 simple steps.

  1. Convert JavaScript File to an ES Module
  2. Declare & Export A Function
  3. Import & Call A Function From Another File

STEP #1: Convert JavaScript File to an ES Module

Create an index.html file and include the main.js file inside it using the script tag.

Add the type=”module” attribute to the starting script tag.


<!DOCTYPE html>
<html lang="en">
    <title>JavaScript Import Function From Another File</title>
   <script src="main.js" type="module"></script>

Adding type=”module” is enabling the browser to handle the JavaScript file as a module and allows the use of ECMAScript module syntax, such as import, export, and, within that file.

Otherwise, it will throw an error: Uncaught SyntaxError: Cannot use import statement outside a module

STEP #2: Declare & Export A Function

Declare the add() function inside the math.js file which will be in the same root level as the main.js and index.html files.


const add = (a, b) => {
  return a + b;

export { add };

Finally, export the add() function.

STEP #3: Import & Call A Function From Another File

Import the add() function declared in the math.js file inside the main.js file


import { add } from "./math.js";
const result = add(2, 4);
console.log(result); // 6

In the above import statement, add() inside the curly braces is the name of the function that I want to import, and “./math.js” is the path to the file containing the function I want to import.

Make sure to provide the correct file path relative to the main.js file.

Once the add() function is imported, call it inside the main.js file.