ES6 - Modules

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.
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 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}

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.
To be able to consume a module, use the import keyword. A module can have multiple import statements.
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

Unlike named exports, a default export can be imported with any name.
Syntax
import any_variable_name from module_name

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 live 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

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 live 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

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
Mohtashim


    32 Lectures 
     3.5 hours 

 Sharad Kumar

    40 Lectures 
     5 hours 

 Richa Maheshwari

    16 Lectures 
     1 hours 

 Anadi Sharma

    50 Lectures 
     6.5 hours 

 Gowthami Swarna

    14 Lectures 
     1 hours 

 Deepti Trivedi

    31 Lectures 
     1.5 hours 

 Shweta
 Print
 Add Notes
 Bookmark this page