Javascript Modules

Modern JavaScript development depends on modules in which code is split into smaller, reusable and maintainable code.

First try to understand the problem,if you have single file

//app.js

function add(a,b) return a +b

function multiply(a,b)return a*b

Now as code grows

• Files becomes too large


• Code becomes hard to read


• Duplication arise


• Resuing the code is painful
  This where modules comes into picture:

What is Module

A module is simply a file that contains code(function, variables, classes)that you export and reuse into another files.

Exporting function or variables

export const PI = 3.14

export function add(a,b){

return a+b

}

You can export multiple things from a module

Importing Modules

To use export Modules,you import it

// app.js

import { add, PI } from './math.js'; 

console.log(add(2, 3)); // 

5 console.log(PI); // 3.14

You must use exact name when importing modules.

Default vs Named Exports

Default Export:

A module can have one default export

// greet.js

export default function greet(name) {

  return `Hello, ${name}`;

}

Import it like this:

import greet from './greet.js';



console.log(greet('Alice'))



**Named Export**

// utils.js

`export const square = x => x * x;

export const cube = x => x * x * x;

Import:

import { square, cube } from './utils.js';`

In Short:

• Modules help to organize code


• Modules prevent naming conflicts


• Modules helps in better readability


• Modules can be reused in entire application