How to Import and Export Functions in JavaScript

Today, JavaScript plays a huge role in website development. Front-end developers use JavaScript to create interactive web applications. As a result, the demand for JavaScript developers has increased.

Certainly, JavaScript has evolved over the years. ES6 introduced many new features to the language. One of them is a way to easily exchange codes between JavaScript files.

Function import and export for JavaScript are new features that will make you a better developer. Here’s how these features work.

What is a JavaScript module?

A JavaScript module is a JavaScript file that contains a collection of code that you can use. Modules are usually written in separate files and imported using import Keyword. It saves time and effort as you can reuse it later.

For example when you called a function calculateSum()you can paste it into another file and make it available anywhere in your project using the export and import JavaScript works without fuss.

One of the benefits of using modules is that it helps organize your code. It also makes your code more manageable and easier to debug.

To use a JavaScript file as a module, you must script your HTML document with a type=”module”.

<script type="module" src="fileName.js"></script>

There are two types of modules:

1. ECMAScript Modules: Standard JavaScript modules supported by all major browsers.
2. CommonJS modules: are older and not widely supported.

We focus here on the ECMAScript modules. If needed, check out our introduction to JavaScript to brush up on the basics.

How to export functions in JavaScript

In JavaScript, functions are first-class objects that can be passed as arguments in addition to being used on their own. Exporting functions is a good way to transfer them to other programs. It is also used when you want to create reusable libraries.

Exporting functions to JavaScript is done using the export Function. That export function exports a given function to be used by another file or script. By exporting our own functions, we can freely use them in other files or scripts without worrying about licensing issues.

There are two ways to use that export work efficiently. We’ll go through these with code examples.

Suppose you have a file getPersonalDetails.js which has a function that returns a user’s full name after a prompt. The function looks like this:

function getFullName(fullName){
fullName = prompt('What is your First Name');
console.log(fullName);
}

1. You can export this function simply by using the export Keyword followed by the name of the function in curly brackets. It looks like this:

   export {getFullName};

2. The second method is to add the export Keyword just before the function declaration.

   export function getFullName (fullName){...}

The first method allows you to export multiple functions. To do this, the names of the desired functions are enclosed in curly brackets. The functions are separated by commas.

For example: Suppose you have three functions in our getPersonalDetails.js file – getFullName(), getEmail(), getDob(). You can export the functions by adding the following line of code:

export {getFullName, getEmail, getDob};

How to import functions into JavaScript

To use a module, you must first import it. Any function can be imported with a full path reference.

Importing functions is quite easy. JavaScript has a built-in function to import custom functions from other files. If you want to access these functions from other modules, it’s a good idea to include a function declaration for each of your utilities.

A function to be imported is already exported in its original file.

You can import functions from another file using the import keyword functionality. Import you can choose which part of a file or module to load.

How to import our getFullName function off getPersonalDetails.js:

import {getFullName} from './getPersonalDetails.js'

This makes this function available for use in our current file.

To import multiple functions, enclose the functions to be imported in curly brackets. Each is separated by a comma (,).

import {getFullName, getEmail, getDob} from './getPersonalDetails.js'

There is another way to use that import functionality. This allows us to import all exports into a specific file. This happens with the * import as Syntax.

You can import all exports in our getPersonalDetails.js by adding the following line of code:

import * as personalDetailsModule from './getPersonalDetails.js'

The above creates an object named personal details module.

This is just a variable name, you can give it any name.

This object contains all exports in our getPersonalDetails.js. The functions are stored in this object and can be accessed in the same way as you access any object property.

For example, we can access the getFullName function by adding the following line of code

personalDetailsModule.getFullName();

What is export standard?

Export default is an exceptional export function. This is used when only one variable is exported from a file. It is also used to create a fallback value for a file or module.

Below is an example where we used the getFullName Function as default:

export default function getFullName (fullName){...}

You cannot have more than one value as the default in any module or file.

A function used by default is imported differently. How to import our getFullName Function used by default:

import fullName from './getPersonalDetails.js'

Here are the differences:

1. There are no curly brackets around the imported value, Full name.
2. Full name Here is just a variable name. It stores the value of the standard function.

Optimize your JavaScript functions

JavaScript modules are pieces of code that can be reused in other parts of your code using the import and export JavaScript functions. They are usually written to separate files and imported using the import keyword. One of the benefits of using modules is that it helps organize your code. It also makes your code more manageable and easier to debug.