Import Functions from another file using JavaScript

Import Functions from another file using JavaScript #

To import a function from another file in JavaScript:

1. Export the function from file A, e.g. export function sum() {}.
2. Import the function in file B as import {sum} from './another-file.js'.
3. Use the imported function in file B.

Here is an example of exporting functions from a file called another-file.js.

Copied!
// 👇️ named export
export function sum(a, b) {
  return a + b;
}

// 👇️ named export
export function multiply(a, b) {
  return a * b;
}

// (arrow function)
// export const sum = (a, b) => {
//   return a + b;
// };

The syntax is the same when using arrow functions, all you have to do is use the export keyword.

Here is how we would import the functions in a file called index.js.

Copied!
// 👇️ named import
import {sum, multiply} from './another-file.js';

console.log(sum(35, 65)); // 👉️ 100

console.log(multiply(5, 5)); // 👉️ 25

Make sure to correct the path that points to the another-file.js module if you have to. The example above assumes that another-file.js and index.js are located in the same directory.

For example, if another-file.js was located one directory up, you'd have to import as import {sum} from '../another-file.js'.

The import/export syntax is called JavaScript modules.

The example above uses a named export and a named import.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

Let's look at an example of how we would import a function that was exported using a default export.

Here are the contents of another-file.js.

Copied!
// 👇️ default export
export default function sum(a, b) {
  return a + b;
}

// (arrow function)
// const sum = (a, b) => {
//   return a + b;
// };

// export default sum;

And here is how we would import the function using a default import.

Copied!
// 👇️ default import
import sum from './another-file.js';

console.log(sum(35, 65)); // 👉️ 100

Notice that we didn't wrap the import in curly braces.

We could have also used a different name when importing the function, e.g. foo.

Copied!
// 👇️ default import
import foo from './another-file.js';

console.log(foo(35, 65)); // 👉️ 100

This works, but is confusing and should be avoided.

IMPORTANT: If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.

Copied!
const sum = (a, b) => {
  return a + b;
};

// 👇️ default export
export default sum;

You can also mix and match, here is an example of a file that uses both a default and a named export.

Copied!
// 👇️ default export
export default function sum(a, b) {
  return a + b;
}

// 👇️ named export
export const multiply = (a, b) => {
  return a * b;
};

And here is how you would import the two functions.

Copied!
// 👇️ default and named imports
import sum, {multiply} from './another-file.js';

console.log(sum(35, 65)); // 👉️ 100

console.log(multiply(10, 10)); // 👉️ 100

We used a default import to import the sum function and a named import to import the multiply function.

Note that you can only have a single default export per file, but you can have as many named exports as necessary.