- ES6 - Discussion
- ES6 - Useful Resources
- ES6 - Quick Guide
- ES9 - New Features
- ES8 - New Features
- ES7 - New Features
- ES6 - Browsers
- ES6 - Image Map
- ES6 - Debugging
- ES6 - Multimedia
- ES6 - Animation
- ES6 - Validations
- ES6 - Proxy API
- ES6 - Reflect API
- ES6 - Object Extensions
- ES6 - Error Handling
- ES6 - Modules
- ES6 - Promises
- ES6 - Maps And Sets
- ES6 - Classes
- ES6 - Collections
- ES6 - Iterator
- ES6 - HTML DOM
- ES6 - RegExp
- ES6 - Math
- ES6 - Date
- ES6 - Arrays
- ES6 - New String Methods
- ES6 - Symbol
- ES6 - Strings
- ES6 - Boolean
- ES6 - Number
- ES6 - Objects
- ES6 - Page Printing
- ES6 - Void Keyword
- ES6 - Dialog Boxes
- ES6 - Page Redirect
- ES6 - Cookies
- ES6 - Events
- ES6 - Functions
- ES6 - Loops
- ES6 - Decision Making
- ES6 - Operators
- ES6 - Variables
- ES6 - Syntax
- ES6 - Environment
- ES6 - Overview
- ES6 - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
ES6 - Modules
Introduction
Consider a scenario where parts of JavaScript code need to be reused. ES6 comes to your rescue with the concept of Modules.
A module organizes a related set of JavaScript code. A module can contain variables and functions. A module is nothing more than a chunk of JavaScript code written in a file. By default, variables and functions of a module are not available for use. Variables and functions within a module should be exported so that they can be accessed from within other files. Modules in ES6 work only in strict mode. This means variables or functions declared in a module will not be accessible globally.
Exporting a Module
The export keyword can be used to export components in a module. Exports in a module can be classified as follows −
Named Exports
Default Exports
Named Exports
Named exports are distinguished by their names. There can be several named exports in a module. A module can export selected components using the syntax given below −
Syntax 1
//using multiple export keyword export component1 export component2 ... ... export componentN
Syntax 2
Alternatively, components in a module can also be exported using a single export keyword with {} binding syntax as shown below −
//using single export keyword export {component1,component2,....,componentN}
Default Exports
Modules that need to export only a single value can use default exports. There can be only one default export per module.
Syntax
export default component_name
However, a module can have a default export and multiple named exports at the same time.
Importing a Module
To be able to consume a module, use the import keyword. A module can have multiple import statements.
Importing Named Exports
While importing named exports, the names of the corresponding components must match.
Syntax
import {component1,component2..componentN} from module_name
However, while importing named exports, they can be renamed using the as keyword. Use the syntax given below −
import {original_component_name as new_component_name }
All named exports can be imported onto an object by using the asterisk * operator.
import * as variable_name from module_name
Importing Default Exports
Unpke named exports, a default export can be imported with any name.
Syntax
import any_variable_name from module_name
Example: Named Exports
Step 1 − Create a file company1.js and add the following code −
let company = "TutorialsPoint" let getCompany = function(){ return company.toUpperCase() } let setCompany = function(newValue){ company = newValue } export {company,getCompany,setCompany}
Step 2 − Create a file company2.js. This file consumes components defined in the company1.js file. Use any of the following approaches to import the module.
Approach 1
import {company,getCompany} from ./company1.js console.log(company) console.log(getCompany())
Approach 2
import {company as x, getCompany as y} from ./company1.js console.log(x) console.log(y())
Approach 3
import * as myCompany from ./company1.js console.log(myCompany.getCompany()) console.log(myCompany.company)
Step 3 − Execute the modules using an HTML file
To execute both the modules we need to make a html file as shown below and run this in pve server. Note that we should use the attribute type="module" in the script tag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./company2.js" type="module"></script> </body> </html>
The output of the above code will be as stated below −
TutorialsPoint TUTORIALSPOINT
Default Export
Step 1 − Create a file company1.js and add the following code −
let name = TutorialsPoint let company = { getName:function(){ return name }, setName:function(newName){ name = newName } } export default company
Step 2 − Create a file company2.js. This file consumes the components defined in the company1.js file.
import c from ./company1.js console.log(c.getName()) c.setName( Google Inc ) console.log(c.getName())
Step 3 − Execute the modules using an HTML file
To execute both the modules we need to make an html file as shown below and run this in pve server. Note that we should use the attribute type="module" in the script tag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./company2.js" type="module"></script> </body> </html>
The output of the above code will be as mentioned below −
TutorialsPoint Google Inc
Example: Combining Default and Named Exports
Step 1 − Create a file company1.js and add the following code −
//named export export let name = TutorialsPoint let company = { getName:function(){ return name }, setName:function(newName){ name =newName } } //default export export default company
Step 2 − Create a file company2.js. This file consumes the components defined in the company1.js file. Import the default export first, followed by the named exports.
import c, {name} from ./company1.js console.log(name) console.log(c.getName()) c.setName("Mohtashim") console.log(c.getName())
Step 3 − Execute the modules using an HTML file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="company2.js" type="module"></script> </body> </html>
The output of the above code will be as shown below −
TutorialsPoint TutorialsPoint MohtashimAdvertisements