DEV Community 👩‍💻👨‍💻

M V Ganesh Kumar
M V Ganesh Kumar

Posted on • Updated on • Originally published at mvganeshkumar.com

JavaScript Modules

Introduction

  • A module is a single script file that contains common pieces of reusable functionalities.

How to use modules

  • Whenever you need some parts of the functionality from a module you can export from the module and import them into specific scripts where ever you need.

  • There are different ways to export and import stuff in modules.

  • Let us see them with some examples.

  • In all the examples we are going to follow this directory structure.

app.js - Where we import stuff
module.js - Module from where we will export stuff
Enter fullscreen mode Exit fullscreen mode

Exporting modules

Named export before declaration

// Inside module.js

export let person="John";
export function add(num1,num2){
    return num1+num2;
}
Enter fullscreen mode Exit fullscreen mode

Named export at the end of the script

// Inside module.js

let person="John";
function add(num1,num2){
    return num1+num2;
}

export {person, add};
Enter fullscreen mode Exit fullscreen mode

Named export with alias

// Inside module.js

let person="John";
function add(num1,num2){
    return num1+num2;
}

export {person as person1, add as add1};
Enter fullscreen mode Exit fullscreen mode

Default export before declaration

// Inside module.js

export default function add(num1,num2){
    return num1+num2;
}
Enter fullscreen mode Exit fullscreen mode

Default export at the end of the script

// Inside module.js

function add(num1,num2){
    return num1+num2;
}

export default add;
Enter fullscreen mode Exit fullscreen mode

Importing modules

Named import

// Inside app.js

import { person, add } from './module.js';

console.log(person); // John
console.log(add(2, 3)); // 5
Enter fullscreen mode Exit fullscreen mode

Named import with alias

// Inside app.js

import { person as person1, add as add1} from './module.js';

console.log(person1); // John
console.log(add1(2, 3)); // 5
Enter fullscreen mode Exit fullscreen mode

Default import

// Inside app.js

import add from "./module.js";

console.log(add(2, 3)); // 5
Enter fullscreen mode Exit fullscreen mode

Import as object

// Inside app.js

import * as fun from "./module.js"

console.log(fun.person) // John
console.log(fun.add(2,3)) // 5
Enter fullscreen mode Exit fullscreen mode

Rules to follow while working with modules

  • Here are the rules that you have to follow to make sure that your modules work.

  • Named export is used when you want to export multiple stuffs.

  • Default export is used when you want to export only one stuff.

  • If you are using named export you should use named import.

  • Similarly if you are using default export you should use default import.

Conclusion

  • A module is just a script file that contains reusable pieces of code.

  • There are different ways to export and import stuff from modules.

  • Export - named, default, alias

  • Import - named, default, alias, object

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.