Swastik Yadav

S Y

Navigate back to the homepage
Subscribe

Working with modules in JavaScript

Swastik Yadav
July 16th, 2021 · 1 min read

Hello Everyone,

In this post we will explore the modern way of using modules in JavaScript.

There are several ways to use modules in JavaScript:

  • AMD: One of the most ancient module system.
  • CommonJS: The module system created for Node.JS server.
  • UMD: Suggested as universal system. Compatible with AMD and CommonJS.
  • Language level module system (import / export): The modern way to use modules in JavaScript.

In this post we will only cover the last one as the first three are part of history, seen in older scripts.

What is module?

A module is just a file. To manage a large codebase different scripts are separated into different modules. Modules let’s you call function of one script from another script.

  • export: Variables and functions labled with export, are accessible from outside the current script.
  • import: Allows to use functionality of other script in current script.

For instance:

sayHello.js

1export function sayHello(user) {
2 console.log(`Hello, ${user}`);
3}

main.js

1import { sayHello } from "./sayHello.js";
2
3sayHello("Swastik");
4
5// Running main.js consoles "Hello Swastik".

Modules work only via HTTP(s), not locally. If you try to use modules via file:// protocol, import / export directives don’t work. It only works via HTTP(s) protocol.

The code snippet in last example don’t actually work, in order to make it work, we need to tell JavaScript that we are using modules. There are two ways to do that.

  1. Use .mjs as script file extension instead of .js.
  2. Specify “type”: “module” in package.json.

Export and Import

Now, let’s see some most common patterns and ways to use import / export in our scripts.

1. Name Export:

Export

1export const name = "Value";

Import

1import { name } from "...";

2. Default Export:

Export

1export default "Value";

Import

1import anyName from "...";

3. Rename Export

Export

1const name = "value";
2export { name as newName };

Import

1import { newName } from "...";

4. Export List + Rename

Export

1export {
2 name1,
3 name2 as newName2
4}

Import

1import {
2 name1 as newName1,
3 newName2
4} from "...";

That’s it for this post. If you found this post helpful, please do share and subscribe to my newsletter below or here.

Thank You!

More articles from Swastik Yadav

Callback functions and closures in JavaScript

Learn what are Higher order functions, callback functions, and closures.

July 9th, 2021 · 1 min read

How JavaScript works behind the scene - Execution Context and Call Stack

Learn how JS works under the hood and how functions are executed in JavaScript with execution context.

July 2nd, 2021 · 2 min read

Become a better full-stack developer in 10 minutes a week.

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.



By subscribing, you agree with Revue’s Terms and Privacy Policy.
© 2021 Swastik Yadav
Link to $https://twitter.com/swastikJsDevLink to $https://github.com/SwastikyadavLink to $https://www.linkedin.com/in/swastik-yadav-6386b71b5/Link to $https://www.youtube.com/channel/UCHs73qDeimVFGTa-MzjtnLA