Post
Ask Question

Modules In JavaScript😀

In JavaScript, modules refer to independent and reusable code. Using modules in JavaScript, you can write code in one file and then share the same in another file so as to achieve code maintainability and reusability. Import and export keywords help you refer to modules and other code snippets written in another file.

As the names suggest, the export keyword is used to expose some piece of code written in a file and the import keyword is used to fetch some piece of code exported from another file.

There are two ways of exports and imports,

  • Default export-import
  • Named export-import

Default export-import

The default export is written with the default keyword and we can use only one default export in a file. This means that only one code snippet can be exported as default from a file and thus, be imported in another file using default import. The default import should have the same name which is exported.

Let’s look at the below example. Suppose that you have a file named ‘utility.js’ where you have written a function for finding the sum of given numbers.

const sum = (...arr) => {
  return arr.reduce((accumulator, currentValue) => accumulator + currentValue);
}
export default sum;

Alternatively, We can also export the anonymous function by defining the export default  along with the function declaration,

export default sum = (...arr) => {
  return arr.reduce((accumulator, currentValue) => accumulator + currentValue);
}

Let's have a look at how to access  this function in another file,

import sum from 'utility.js';
console.log(sum(1, 2, 3, 4));

Named export-import

A named export can be used when we need to expose more than code snippets written in a file and thus, all of them can be imported into some other file using named import.

Note that the names of the code snippets to be exported-imported using named export-import are written within curly braces. This is how the default export is distinguished from named export.

In default export, the default keyword is used whereas in named export, the names are written inside curly braces {}.

Consider that you have one more function which is used to calculate the average of given numbers in the file named ‘utilily.js’ and you want to export both the functions - sum as well as average.

const sum = (...arr) => {
  return arr.reduce((accumulator, currentValue) => accumulator + currentValue);
}
const average = (...arr) => {
  return sum(...arr) / arr.length;
}
export {sum, average};

Let's have a look at how to access both functions in another file.

import {sum} from 'utility.js';
import {average} from 'utility.js';
console.log(sum(1, 2, 3, 4));
console.log(average(1, 2, 3, 4));

We can also  simplify this by adding both functions names into one statement,

import {sum, average} from 'utility.js';
console.log(sum(1, 2, 3, 4));
console.log(average(1, 2, 3, 4));

Let suppose you have a lot of export functions are thereby writing each of them into a separate line we can use * followed by the keyword ‘as’ followed by the alias name that you want to give to all the named exports.

import * as foo from 'utility.js';
console.log(foo.sum(1, 2, 3, 4));
console.log(foo.average(1, 2, 3, 4));

Here, ‘foo’ is the alias name given to all the functions exported from the ‘utils.js’ file using named exports.

Happy Reading :)


Similar Articles