ES6 Module Exports

Concepts in Focus

• Default Exports
• Exporting a variable while defining
• Exporting a variable after defining
• Exporting a value or an expression
• Exporting a function while defining
• Exporting a function after defining
• Exporting a class while defining
• Exporting a class after defining
• Named Exports
• Exporting multiple variables while defining
• Exporting multiple variables after defining
• Exporting multiple functions while defining
• Exporting multiple functions after defining
• Exporting multiple classes while defining
• Exporting multiple classes after defining

Let's see different scenarios that we may come across while exporting.

1. Default Exports

With Default Exports, we can import modules with any name.

1.1 Exporting a variable while defining

We cannot export boolean, number, string, null, undefined, objects, and arrays while defining.

Example:

1

2

3

//sample.mjs

export default let value = 5;

JAVASCRIPT

1

2

3

4

//index.mjs

import value from "./sample.mjs";

console.log(value);

JAVASCRIPT

Output

1

2

3

4

5

6

root@123# node index.mjs

(node:31964) ExperimentalWarning: The ESM module loader is experimental.

file:///index.mjs:1

export default let value = 5;

^^^

SyntaxError: Unexpected strict mode reserved word

1.2 Exporting a variable after defining

We can export boolean, number, string, null, undefined, objects, and arrays after defining.

Example:

1

2

3

4

//sample.mjs

let a = 5;

export default a;

JAVASCRIPT

1

2

3

4

//index.mjs

import a from "./sample.mjs";

console.log(a);

JAVASCRIPT

Output

1

2

3

root@123# node index.mjs

(node:32665) ExperimentalWarning: The ESM module loader is experimental.

5

1.3 Exporting a value or an expression

We can export a value or an expression directly.

Example:

1

2

3

//sample.mjs

export default 5 * 3;

JAVASCRIPT

1

2

3

4

5

//index.mjs

import result from "./sample.mjs";

console.log(result);

JAVASCRIPT

Output

1

2

3

root@123# node index.mjs

(node:4071) ExperimentalWarning: The ESM module loader is experimental.

15

1.4 Exporting a function while defining

We can export a function while defining.

Example:

1

2

3

4

5

//sample.mjs

export default function (num1, num2) {

return num1 + num2;

}

JAVASCRIPT

1

2

3

4

5

//index.mjs

import sum from "./sample.mjs";

console.log(sum(2, 6));

JAVASCRIPT

Output

1

2

3

root@123# node index.mjs

(node:4278) ExperimentalWarning: The ESM module loader is experimental.

8

1.5 Exporting a function after defining

We can export a function after defining.

Example:

1

2

3

4

5

6

//sample.mjs

function sum(num1, num2) {

return num1 + num2;

}

export default sum;

JAVASCRIPT

1

2

3

4

5

//index.mjs

import sum from "./sample.mjs";

console.log(sum(2, 6));

JAVASCRIPT

Output

1

2

3

root@123# node index.mjs

(node:4462) ExperimentalWarning: The ESM module loader is experimental.

8

1.6 Exporting a class while defining

We can export a class while defining.

Example:

1

2

3

4

5

6

7

8

//sample.mjs

export default class StudentDetails {

constructor(name, age) {

this.name = name;

this.age = age;

}

}

JAVASCRIPT

1

2

3

4

5

6

7

//index.mjs

import StudentDetails from "./sample.mjs";

const newStudentDetails = new StudentDetails("Ram", 15);

console.log(newStudentDetails);

console.log(newStudentDetails.name);

JAVASCRIPT

Output

1

2

3

4

root@123# node index.mjs

(node:1035) ExperimentalWarning: The ESM module loader is experimental.

StudentDetails {name: "Ram", age: 15}

Ram

1.7 Exporting a class after defining

We can export a class after defining.

Example:

1

2

3

4

5

6

7

8

9

//sample.mjs

class StudentDetails {

constructor(name, age) {

this.name = name;

this.age = age;

}

}

export default StudentDetails;

JAVASCRIPT

1

2

3

4

5

6

7

//index.mjs

import StudentDetails from "./sample.mjs";

const newStudentDetails = new StudentDetails("Ram", 15);

console.log(newStudentDetails);

console.log(newStudentDetails.name);

JAVASCRIPT

Output

1

2

3

4

root@123# node index.mjs

(node:1575) ExperimentalWarning: The ESM module loader is experimental.

StudentDetails {name: "Ram", age: 15}

Ram

2. Named Exports

2.1 Exporting multiple variables while defining

We can export boolean, number, string, null, undefined, objects, and arrays while defining.

Example:

1

2

3

4

//sample.mjs

export let value = 5;

export let studentName = "Rahul";

JAVASCRIPT

1

2

3

4

5

6

7

//index.mjs

import { value, studentName } from "./sample.mjs";

console.log(value);

console.log(studentName);

JAVASCRIPT

Output

1

2

3

4

root@123# node index.mjs

(node:1770) ExperimentalWarning: The ESM module loader is experimental.

5

Rahul

2.2 Exporting multiple variables after defining

We can export multiple variables after defining in an Object format.

Example:

1

2

3

4

5

6

//sample.mjs

let value = 5;

const studentName = "Rahul";

export { value, studentName };

JAVASCRIPT

1

2

3

4

5

6

//index.mjs

import { value, studentName } from "./sample.mjs";

console.log(value);

console.log(studentName);

JAVASCRIPT

Output

1

2

3

4

root@123# node index.mjs

(node:2437) ExperimentalWarning: The ESM module loader is experimental.

5

Rahul

2.3 Exporting multiple functions while defining

We can export multiple functions while defining.

Example:

1

2

3

4

5

6

7

8

9

//sample.mjs

export function sum(num1, num2) {

return num1 + num2;

}

export function sub(num1, num2) {

return num1 - num2;

}

JAVASCRIPT

1

2

3

4

5

6

7

//index.mjs

import { sum, sub } from "./sample.mjs";

console.log(sum(4, 2));

console.log(sub(4, 2));

JAVASCRIPT

Output

1

2

3

4

root@123# node index.mjs

(node:2954) ExperimentalWarning: The ESM module loader is experimental.

6

2

2.4 Exporting multiple functions after defining

We can export multiple functions after defining.

Example:

1

2

3

4

5

6

7

8

9

10

11

//sample.mjs

function sum(num1, num2) {

return num1 + num2;

}

function sub(num1, num2) {

return num1 - num2;

}

export { sum, sub };

JAVASCRIPT

Collapse

1

2

3

4

5

6

7

//index.mjs

import { sum, sub } from "./sample.mjs";

console.log(sum(4, 2));

console.log(sub(4, 2));

JAVASCRIPT

Output

1

2

3

4

root@123# node index.mjs

(node:3276) ExperimentalWarning: The ESM module loader is experimental.

6

2

2.5 Exporting multiple classes while defining

We can export multiple classes while defining.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//sample.mjs

export class StudentDetails {

constructor(name, age) {

this.name = name;

this.age = age;

}

}

export class CarDetails {

constructor(name, speed) {

this.name = name;

this.speed = speed;

}

}

JAVASCRIPT

Collapse

1

2

3

4

5

6

7

8

9

10

11

//index.mjs

import { StudentDetails, CarDetails } from "./sample.mjs";

const newStudentDetails = new StudentDetails("Ram", 15);

console.log(newStudentDetails);

console.log(newStudentDetails.name);

const newCarDetails = new CarDetails("Alto", "60kmph");

console.log(newCarDetails);

console.log(newCarDetails.name);

JAVASCRIPT

Collapse

Output

1

2

3

4

5

6

root@123# node index.mjs

(node:3517) ExperimentalWarning: The ESM module loader is experimental.

StudentDetails { name: 'Ram', age: 15 }

Ram

CarDetails { name: 'Alto', speed: '60kmph' }

Alto

2.6 Exporting multiple classes after defining

We can export multiple classes after defining.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//sample.mjs

class StudentDetails {

constructor(name, age) {

this.name = name;

this.age = age;

}

}

class CarDetails {

constructor(name, speed) {

this.name = name;

this.speed = speed;

}

}

export { StudentDetails, CarDetails };

JAVASCRIPT

Collapse

1

2

3

4

5

6

7

8

9

10

11

//index.mjs

import { StudentDetails, CarDetails } from "./sample.mjs";

const newStudentDetails = new StudentDetails("Ram", 15);

console.log(newStudentDetails);

console.log(newStudentDetails.name);

const newCarDetails = new CarDetails("Alto", "60kmph");

console.log(newCarDetails);

console.log(newCarDetails.name);

JAVASCRIPT

Collapse

Output

1

2

3

4

5

6

root@123# node index.mjs

(node:3841) ExperimentalWarning: The ESM module loader is experimental.

StudentDetails {name: "Ram", age: 15}

Ram

CarDetails {name: "Alto", speed: "60kmph"}

Alto