Exports, Imports and module.exports

Vidhi Singh
Last Updated: May 13, 2022
Difficulty Level :
EASY

Introduction

Generally, while programming, when the same task has to be performed more than once, we prefer to make a function for the same. Right?

Let’s say, there’s is this large project wherein there are different sub-tasks having features of their own. So, you make those sub-tasks and save them as a different file to use it as and when required. In JavaScript, these sub-tasks are called modules, and since the whole project depends on them, these modules are said to be dependencies. 

Modules enable the developer to write re-usable code.
Imports, exports, and module.exports help us reuse the modules in the entire project. 

Let’s learn about imports, exports, and module.exports in depth.
Before starting with the explanation of these, let’s first make a few files that can be referred to throughout the article. This will make it easier to understand. 

Files we will be using throughout the blog:

We have a file named file1.js. Be careful with the extension: it should be .js as it is a JavaScript file. Also, assume that both these files are in the same directory. It is essential that both of them must be in the same directory because the structuring of files in the further code throughout the article has been done according to it. 

These files are basically the modules. Each file is considered to be a module.

file1.js looks like this:

console.log(“Hi! This is file1.js)”);
function user_name(name)
{
	console.log(name +”! You are a Ninja”); 
} 
function user_gender(gender)
{
	console.log(“You are a ”+gender);
}

 

For file2.js, it looks like this:

console.log(“Hi! This is file2.js”); 
user_name(“Coder”);

 

Since we have the files now. Let’s move forward and explore imports first.

Imports

‘Import’- the term in English implies inflow of some commodity. Like, the import of sugar in the country means bringing in the entity, sugar.

The import keyword in JavaScript is used to get the code from another module.    
A very important thing to note here is that import is an ES6 module specification.

Usage

The syntax for the same is as follows: 

import {name of functions, classes} from ‘path of the file’; 

 

Here, if more than one function or class is imported, write the names of all of them separated by commas. ‘path of the file’ includes the name of the file in case both the files/modules are in the same directory or in case both lie in different directories, then the name of the directory should also be there.

For example, the file2.js does not have functions of user_name() and user_gender(). But we have already defined these functions in file1.js. So, in order to use those functions from file1.js, we need to import them from there to whatever file we want to use them. In our case, it is file2.js. 

Something like this: 

import {user_name,user_gender} from ‘./file1.js’;

 

After adding the above line at the start of the code of file2.js, it is essential to add it at the beginning of the code.  

import {user_name,user_gender} from ‘./file1’;
console.log(“Hi! This is file2.js”); 
user_name(“Coder”);

 

Now, if you add the following code to file2.js: 

user_name(“Coder”);

 

It will print the following in the console window: 

Coder! You are a ninja. 

 

Similarly the function user_gender() function can be used in file2.js: 

user_gender(“female”) ; 

 

The output will be: 

You are a female 

 

So, you see how by just defining the function only once, you can use them in different files by importing them. 

You can import only one of the functions if you want by mentioning only that name inside the curly braces as follows: 

import {user_gender} from ‘./file1.js’;

 

But then, you will only be able to use that function in the file where you have imported it. 

If there are many functions, and you want to import all of them but feel too lazy to write all the names, you can import all of them using asterisk *.

Something like this: 

import * from ‘./file1.js’;

 

Now you can use all the functions of file1.js. 

You can also create the alias for the same like this:

import * as allfunctions from ‘./file1.js’;

 

Here, an object named ‘allfunctions’ is the object and user_name() and user_gender() are its functions. They are accessed similar to how an object's member function would be done.  

allfunctions.user_name(“Coder”);  

 

Aliases can be used for each function or class as well as follows:

import { user_name as un,user_gender as ug} from ‘./file1’;

 

The functions should be given meaningful names(although we have given quite vague names for understanding’s sake).

Properties 

1. By default, import modules are in strict-mode. 

2. import, when used with curly braces {}, is a statement while when used with brackets() like import() is a function.

3. import statement can only be used in embedded script with script=”module”, while dynamic function import() does not require such type in script. 

Exports and module.exports  

“Export” means the outflow of a commodity from one place to another, like exporting goods. So, you know its essential meaning. 

In JavaScript also, it actually implies something similar. Using export, you can use the functions, classes, or any primitive data type as well of the file in another. 
One significant fact to be noted here is that exports and module.exports are in CommonJS module specification. To use these exported modules, we use ‘require’. require() is a topic for a separate article. 

Let’s look at the exports and module.exports.

Usage 

If you remember, in file1.js, we had:

console.log(“Hi! This is file1.js)”);
function user_name(name)
{
	console.log(name +”! You are a Ninja”); 
} 
function user_gender(gender)
{
	console.log(“You are a ”+gender);
}

 

Now, export them so that other modules like file2.js can use them(using import, which you have already learned in this article). 

Exporting can be done like this:

module.exports=name of function/class/anything that you want to export

 

This contains what we want to export out of the module. A module is an object. By default, the module is encapsulated, so you need to specify whatever we want to take out of it to use in another module. Here, we specify it by using exports.

Let’s say we want to export the user_name() function. So, that will be done in the following way: 

module.exports=user_name; 

 

After adding this, file.js will look like this:

console.log(“Hi! This is file1.js)”);
function user_name(name)
{
	console.log(name +”! You are a Ninja”); 
} 
function user_gender(gender)
{
	console.log(“You are a ”+gender);
}
module.exports=user_name; 

 

So, it gives the instructions that although the module is encapsulated, it will return user_name(), whenever required. 

But, here the catch is that whenever this module file1.js is required, only the user_name() function will be exported, not the other one. 

To export the other function as well, the following syntax can be followed: 

module.exports={
	user_name: user_name,
	user_gender: user_gender
}; 

 

It uses key-value property here. Shorthand notation for the same also exists, which is as follows: 

module.exports={
	user_name,
	user_gender
};  

 

Although, there is an alternative to this as well, that is;

exports.user_name=user_name;
exports.user_gender=user_gender; 

 

Module.exports has been replaced with exports. This is usually done when we are exporting more than one function, object, etc. from a module. It is equivalent to:

var exports=module.exports; 

 

We don’t do it explicitly, JavaScript implicitly implements it. It is kind of reference to module.exports.

But while using ‘exports’ instead of ‘module .exports’, you need to be careful. Let’s say you are just exporting user_name() function and not user_gender() function. So, you write it like this; 

exports=user_name; 

 

But, this will give the following error in the module where you require it: 

TypeError: user_name is not a function


Let’s figure out why is this so. 

Recall that ‘exports; is a kind of alias that JavaScript provides you for ‘module.exports’ for your convenience like this: 

var exports=module.exports 

 

But when you write exports=user_name, you are no longer updating the exports property of the module object. You are simply trying to replace the alias, which was ‘exports’ to ‘user_name’. No new property was added to module.export. 
Let’s move to a new way of writing it. 

Look at the following code: 

exports.user_name=(name)=>console.log(name +”! You are a Ninja”); 


This is the arrow notation of the function and this also works completely fine. You have added the property ‘user_name’ to exports or say module.exports.

Properties

1. Exports and module.exports come under CommonJs specification.

2. Require should be used in this specification for importing

3. Each is considered to have its own scope. The functions and classes in the file are private and invisible to the outside files.

Frequently Asked Questions  

  1. What are modules in JavaScript? 
    Modules in JavaScript are files that contain reusable code. This re-usable code can be accessed using export and import statements.
     
  2. Is exports=function_name same as module.exports=function_name?
    No, they both are very different things. exports=function_name does not perform any sort of exporting.
     
  3. Why is ‘as’ used in import statement?
    It is used to provide meaningful alias to the imported function or objects. 

Conclusion

This article extensively discusses the import, exports and module.exports in JavaScript. We also explain the usage and properties of these in detail. 

We hope that this blog has helped you enhance your knowledge regarding exports, imports and module.exports, and if you would like to learn more, check out our articles on JavaScript. Do upvote our blog to help other ninjas grow. 

Happy Coding!    

Was this article helpful ?
0 upvotes