Creating JS classes & Using the class to create objects in JS

In JavaScript, creating reusable code components is essential for maintaining clean and organized codebases. One way to achieve this is by defining a class inside a file, exporting it for use in other files, and then importing it to create objects. This process involves encapsulating related functionality within a class, which can then be easily reused across different parts of an application. By exporting the class, it becomes accessible to other modules, allowing developers to instantiate objects from it in various files. This modular approach promotes code reusability, enhances maintainability, and facilitates better organization of code. Importing the class into different files enables developers to create instances of the class where needed, effectively leveraging the encapsulated functionality to build robust and scalable applications.

Here’s a step-by-step guide to creating a JavaScript class inside a file, exporting it for use in other files, and then importing it to create objects:

1) Create a new file inside the modules folder: Inside your project’s modules folder, create a new file with any name new-file.js.

2) Define and export the class: Inside new-file.js, define a class with any name may be Popup. This class will have a constructor function where you can initialize properties or perform any setup tasks. Here’s how you can do it:

class Popup {
    constructor() {
        alert('Hello, this is popup');
    }
}
export default Popup;

In this code:

• We define a class named Popup.
• Inside the constructor function, an alert with the message “Hello, this is popup” will be displayed whenever an instance of this class is created.
• We export the Popup class using export default

3) Import the class in another file: Now, let’s import the Popup class into another JavaScript file, let’s say index.js. Add the following import statement at the top of index.js

import Popup from "./modules/new-file";

4) Create an object from the imported class: After importing the Popup class, you can create instances of this class using the new keyword. Here’s how you can do it

const varName = new Popup();

In this code:

• We create a new object named varName by instantiating the Popup class.

That’s it! Now you have a JavaScript class defined in one file, exported for use in other files, and then imported to create objects. When you run your index.js file, it will trigger the alert message defined in the constructor of the Popup class.