Borislav Hadzhiev
Mon Mar 28 2022·3 min read
Photo by Pauline Loroy
To import a function from another file in JavaScript:
A
, e.g. export function sum() {}
.B
as import {sum} from './another-file.js'
.B
.Here is an example of exporting functions from a file called another-file.js
.
// 👇️ 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
.
// 👇️ 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
.
// 👇️ 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.
// 👇️ 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
.
// 👇️ 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.
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.
// 👇️ 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.
// 👇️ 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.