Today, JavaScript plays a huge role in website development. Front-end developers use JavaScript to create interactive web applications. As a result, there’s been an increase in demand for JavaScript developers.
Certainly, JavaScript has evolved over the years. ES6 introduced many new features to the language. One of these is a way to easily share codes among 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 for you to use. Modules are usually written in separate files and imported using the import keyword. It saves time and effort because you can reuse it later.
For example, if you have a function called calculateSum(), you can include it in another file and make it available anywhere in your project using the export and import JavaScript functions without any fuss.
One of the benefits of using modules is that it helps to keep your code organized. It also makes your code more manageable and easier to debug.
In order to use a JavaScript file as a module, you need to create a script in your HTML document with a type="module".
<script type="module" src="fileName.js"></script>
There are two types of modules:
- ECMAScript modules: standard JavaScript modules and are supported by all major browsers.
- CommonJS modules: are older, and they are not widely supported.
We'll focus on the ECMAScript Modules here. If needed, see 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 into other programs. It's also used when you want to create reusable libraries.
Exporting functions in JavaScript is done using the export function. The 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 the export function efficiently. We'll go over these with code examples.
Suppose you have a file getPersonalDetails.js which has a function that returns the full name of a user after a prompt input. The function looks like this:
function getFullName(fullName){
fullName = prompt('What is your First Name');
console.log(fullName);
}
-
You can export this function by simply using the export keyword followed by the name of the function in curly brackets. It looks like this:
export {getFullName}; -
The second method is to add the export keyword just before declaring the function.
export function getFullName (fullName){...}
You can export multiple functions by using the first method. This is done by including the names of the desired functions in the curly bracket. The functions are separated by comma.
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 in JavaScript
In order to use a module, you first need to import it. Any function can be imported using a full-path reference.
Importing functions is quite straightforward. JavaScript has a built-in feature to import your own functions from other files. If you want to access those 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 a different file using the import keyword functionality. Import allows you to choose which part of a file or module to load.
Here's how you import our getFullName function from getPersonalDetails.js:
import {getFullName} from './getPersonalDetails.js'
This will make this function available for use in our current file.
In order to import multiple functions, the functions to be imported are included in the curly braces. Each is separated by a comma (,).
import {getFullName, getEmail, getDob} from './getPersonalDetails.js'
There is another way to use the import functionality. This allows us to import all the exports in a particular file. It is done using the import * as syntax.
You can import all the exports in our getPersonalDetails.js by adding the following line of code:
import * as personalDetailsModule from './getPersonalDetails.js'
The above will create an object called personalDetailsModule.
This is just a variable name, you can name it anything.
This object contains all the exports in our getPersonalDetails.js. The functions are stored in this object and can be accessed the way 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 Default?
Export default is an exceptional export functionality. This is used if only one variable is being 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 a default:
export default function getFullName (fullName){...}
You cannot have more than one value as a default in each module or file.
A Function used as default is imported differently. Here's how to import our getFullName function used as default:
import fullName from './getPersonalDetails.js'
Here are the differences:
- There are no curly braces around the imported value, fullName.
- fullName here is just a variable name. It stores the value of whatever the default function is.
Supercharge 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’re usually written in separate files, and imported using the import keyword. One of the benefits of using modules is that it helps to keep your code organized. It also makes your code more manageable and easier to debug.