Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to export default constructors ?

  • Last Updated : 21 Jun, 2021

The export statement is used to bind one JavaScript module to others. In order to export the default constructor, we use an export statement and import module at the required place. On creating an instance of the class, the constructor of a respective class is invoked.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

export default class ClassName{...}

In the following example, we will use the JavaScript module in another module by exporting and importing it. However, Cross origin requests are only supported for HTTPS. Therefore, we need to run our HTML file on the local server. 

Approach:



  • Create a file index.html.
  • Create a User.js file that will export the module.
  • Create another Profile.js file to import the constructor and check whether it’s invoked on creating an object.
  • Add script-src in index.html (Note: Since we are exporting modules we need to add type=”module”)

 

Project Directory: Our project directory will look like this.

Project Directory Structure

Example: The index.html file will contain src to Profile.js where the module is imported. The Profile.js file will import User.js and invoke a constructor of User.js by creating an object of class User. The User.js file will have a constructor which takes params and prints its value along with some dummy text.

index.html




<!DOCTYPE html>
  
<head>
    <script type="module" 
        src="./Profile.js">
    </script>
</head>
  
<body>
    <div style="color: green; 
                font-size: 35px; 
                margin-left: 100px;">
        Geeks for Geeks
    </div>
    <p style="color: rgb(44, 46, 44); 
                font-size: 20px; 
                margin-left: 100px;">
        Result will be displayed at console
    </p>
</body>
  
</html>

Profile.js




// Importing User
import User from './User.js';
  
// Creating new user object
var user = new User({name:'Lorem Ipsum',lang:'Javascript'});
  
// Printing data
console.log(user);

User.js




export default class User
{
    constructor(params)
    {
        this.name=params.name;
        this.lang=params.lang;
        console.log('constructor of User class called: ');
        console.log(this.name+' is your name.');
        console.log(this.lang+' is your language');
    }
}

Steps to run HTML files on the local server

  • If you have NodeJs and npm installed on your machine, install http-server by running this command on the terminal.
    npm install http-server -g
  • Through terminal navigate to the directory where you have your all file saved and type.
    http-server

Output:

  • You will see a list of the local server serving as shown below:

    List of Available ports serving

  • Now click on any available local server, we will see the following output.



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!