Working with modules in JavaScript.

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…


This content originally appeared on DEV Community and was authored by Swastik Yadav

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

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

main.js

import { sayHello } from "./sayHello.js";

sayHello("Swastik");

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

export const name = "Value";

Import

import { name } from "...";

2. Default Export:

Export

export default "Value";

Import

import anyName from "...";

3. Rename Export

Export

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

Import

import { newName } from "...";

4. Export List + Rename

Export

export {
  name1,
  name2 as newName2
}

Import

import {
  name1 as newName1,
  newName2
} from "...";

That's it for this post.

I run a newsletter where I share epic content on building your skillset. Read the previous issues here 8020 Newsletter

Thank You!


This content originally appeared on DEV Community and was authored by Swastik Yadav


Print Share Comment Cite Upload Translate Updates
APA

Swastik Yadav | Sciencx (2021-11-14T14:58:47+00:00) Working with modules in JavaScript.. Retrieved from https://www.scien.cx/2021/11/14/working-with-modules-in-javascript/

MLA
" » Working with modules in JavaScript.." Swastik Yadav | Sciencx - Sunday November 14, 2021, https://www.scien.cx/2021/11/14/working-with-modules-in-javascript/
HARVARD
Swastik Yadav | Sciencx Sunday November 14, 2021 » Working with modules in JavaScript.., viewed ,<https://www.scien.cx/2021/11/14/working-with-modules-in-javascript/>
VANCOUVER
Swastik Yadav | Sciencx - » Working with modules in JavaScript.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/14/working-with-modules-in-javascript/
CHICAGO
" » Working with modules in JavaScript.." Swastik Yadav | Sciencx - Accessed . https://www.scien.cx/2021/11/14/working-with-modules-in-javascript/
IEEE
" » Working with modules in JavaScript.." Swastik Yadav | Sciencx [Online]. Available: https://www.scien.cx/2021/11/14/working-with-modules-in-javascript/. [Accessed: ]
rf:citation
» Working with modules in JavaScript. | Swastik Yadav | Sciencx | https://www.scien.cx/2021/11/14/working-with-modules-in-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts