Es6-Javascript Named and Default Modules Guide with examples

In this blog post, We are going to learn about named and default modules in Javascript or ES6 Version with examples.

Es6 Modules

Javascript has no support modules in previous versions of ES6. Es6 introduced modules to organize and reuse code in various parts of applications Es6 modules are javascript code which contains variables, and functions that will be declared in the javascript file. These can not be used outside unless the module is declared to be exported use. This is a very simple and powerful functionality used by Nodejs and client-side frameworks.

Advantages of Modules:

• The code can be separated into multiple files and reusability is improved
• Modules can be reused in multiple other applications or modules
• Modules are like packages in java which we can avoid namespace issues
• All variables or functions defined in the module are private in the same module

Two types of modules can be defined in ECMAScript 2015

• Default Module-Default modules are modules that contain only one per module
• Named Modules -The modules contain multiple modules in a file

Import and Export Default Module

This single module is declared for export functionality. Modules need to be declared with an export keyword to make use of it in another part of the code. Import keyword is used to import the modules Here is a syntax for import and export Default module declaration.

export default ModuleName // Export is declared with the export keyword

Once the module is exported, It is ready to use in other modules using the import keyword. Here is a syntax for import keyword

import ModuleName from 'filepath without extension'.