How to import and export functions in JavaScript

JavaScript plays a big role in website development today. Front-end developers use JavaScript to create interactive web applications. As a result, JavaScript developers are in high demand.

Sure, JavaScript has evolved over the years. ES6 introduced many new features to the language. One of these is an easy way to share code between JavaScript files.

Importing and exporting functions in JavaScript is a new feature 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 use. Modules are usually written in separate files, import keyword. It can be reused later, saving time and effort.

For example, given the following function: Calculate Sum()you can include it in a separate file so that it can be used anywhere in your project export and import JavaScript works fine.

One advantage of using modules is that they help keep your code organized. It also makes your code more manageable and easier to debug.

To use a JavaScript file as a module, you need to script it in an HTML document. 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: old and not widely supported.

Here we will focus on the ECMAScript module. If necessary, brush up on the basics with an overview of JavaScript.

How to export functions in JavaScript

In JavaScript, functions are first-class objects that can be used not only by themselves, but also passed as arguments. Exporting functions is a good way to transfer them to other programs. It is also used when creating reusable libraries.

Exporting functions in JavaScript is export function.of export A function exports a specific function for use in another file or script. By exporting your own functions you are free to use them in other files and scripts without worrying about licensing issues.

There are two ways to use export Works efficiently. These are explained in code examples.

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

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

1. To export this function, export The keyword is followed by the name of the function enclosed in curly braces. It will be as follows.

    export {getFullName}; 

2. The second method is export A keyword immediately before declaring a function.

    export function getFullName (fullName){...} 

How to import functions in JavaScript

To use the module, we first need to import it. Any function can be imported using a full path reference.

Importing functions is very easy. JavaScript has built-in functionality to import your own functions from other files. If you want to access these functions from other modules, we recommend including a function declaration for each utility.

can be used to import functions from another file. import Keyword function. import You can choose which part of the file or module to load.

Here’s how to import: getFullName Features from getPersonalDetails.js:

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

This makes the function available in the current file.

To import multiple functions, enclose the functions to be imported in curly braces. Separate each with a comma (,).

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

There is another way to use import function. This allows you to import all exports into a specific file. this is, as import * syntax.

All exports can be imported getPersonalDetails.js Add the following lines of code.

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

The above creates an object called Personal details module.

This object contains all our exports getPersonalDetails.js. Functions are stored in this object and can be accessed by accessing any object property.

For example you can access getFullName I added the following line of code and it works

 personalDetailsModule.getFullName(); 

What are Export Defaults?

Default export Excellent export functionality. This is used when only one variable is exported from the file. It is also used to create fallback values ​​for files or modules.

Below is getFullName Works as default:

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

Functions used as defaults are imported differently. Here’s how to import it: getFullName Function used as default:

 import fullName from './getPersonalDetails.js' 

Here are the differences:

1. Do not enclose imported values ​​in curly braces. full name.
2. full name It’s just a variable name here. Stores the value of whatever the default function is.

Harden your JavaScript functions

A JavaScript module is a piece of code that can be reused in other parts of your code by using imported and exported JavaScript functions. They are usually written to separate files and imported using the import keyword. One advantage of using modules is that they help keep your code organized. It also makes your code more manageable and easier to debug.