An Intro to JavaScript Modules

An Intro to JavaScript Modules

An introduction to JavaScript modules, covering how to use the export and import statement under different scenarios. There seems to be some confusion when it comes to JavaScript modules and how they exactly work, and why are there different forms in which we can use them. Today I’ll explain the different ways in which you can export and import modules.

There seems to be some confusion when it comes to JavaScript modules and how they exactly work, and why are there different forms in which we can use them. Today I’ll explain the different ways in which you can export and import modules.

Some background on JavaScript modules

JavaScript programs started as simple scripts or apps with rather small codebases, but as it has been evolving and so its uses have been increasing the size of the codebases have increased drastically. To support this increase the language needed to support a mechanism under which was possible to separate or split the code into smaller, reusable units. Node.JS had that ability for a while before it was incorporated in JavaScript with a feature called modules. And thus eventually they made it to the language itself and the browsers.By definition, a module is just a file which can be imported from other modules (or files) through the help of directives like export and import:

  • export: keyword labels variables and functions that should be accessible from outside the current module.import: allows the import of functionality from other modules.

We’ll come back to more of that later.


Introducing an example

To demonstrate the use of modules we will create a simple user module that will expose a User class. Let’s review the basic structure for the project:

index.html
scripts/
    index.js
    modules/
        user.js

Our app will be very simple and it will just show the name of a user on the screen, but the interesting part is that the name will come from an object instance of the User class. Let’s see it in action with a live demo:

Open in codesandbox

Let’s look in detail what’s going on there by parts

Exporting module User

The first thing we need to do to access the User class is to export it from the module. For that, we make use of the export statement.The export statement is used when creating JavaScript modules to export live bindings to functions, objects, or primitive values from the module so they can be used by other programs with the import statement.Let’s see that in our code:

// file: scripts/modules/user.js
export class User {
  constructor(name) {
    this.name = name;
  }
}

Now that the module was exported we can use it in other modules by importing it.

programming typescript nodejs web-development javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Nodejs Developer

Looking to **hire NodeJS Developer**[https://www.dataeximit.com/node-js-development/](https://www.dataeximit.com/node-js-development/ "https://www.dataeximit.com/node-js-development/") to build a perfect back-end to your website or...

Typescript — Hello World Program

In this lesson, we are going to learn about the basic structure of a TypeScript program and understand a few concepts of the compilation process. Then we will see how we can run the compiled JavaScript program using node and ts-node.

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Web Development 2020 vs 2010

Things have changed pretty fast from what was a decade ago for web development and the facts are totally mind-blowing. I mean a web developer now makes mobile apps, desktop app, backend API, games and so much more.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.