07.6 Modules in JavaScript

Content:

Introduction to ECMAScript 6 (ES6)

Arrow functions

Template literals

Destructuring assignments

Default parameters

Rest and spread operators

Modules (import/export)

Modules (import/export):

The Usage of ES6 Modules

// library.js - Exporting ES6 Module

// Exporting 'message'
export let message = "ES6 Module";

// main.js - Importing and Using ES6 Module

// Importing 'message' from library.js
import { message } from "./library.js";

// Logging the imported message to the console
console.log(message);

// Setting the message as the innerHTML of the document body
document.body.innerHTML = message;

Utilizing Functions from Library

// File: main.js
// Title: Utilizing Functions from Library

// Importing the 'fun' function from library.js
import { fun } from './library.js'
// Calling the 'fun' function without any argument
fun();
// Calling the 'fun' function with argument "Ayush"
fun("Ayush");

// Importing the 'rtrn' function from library.js
import { rtrn } from './library.js';
// Calling the 'rtrn' function with argument 5454 and logging the returned value
console.log(rtrn(5454));

// File: library.js
// Title: Library Functions

// Exporting the 'fun' function
export function fun(name="avatar") {
    console.log(`Function is Created by: ${name}` );
}
// Defining the 'rtrn' function
function rtrn(name = "avatar") {
    return `Function is returning something by: ${name}`;
}

Function is Created by: avatar
Function is Created by: Ayush
Function is returning something by: 5454

Creating and Utilizing a Person Class

// File: main.js
// Title: Creating and Utilizing a Person Class

// Importing the 'Person' class from library.js
import { Person } from "./library.js";
// Instantiating a new object of the 'Person' class
let person1 = new Person();
// Logging the newly created person object
console.log(person1);

// File: library.js
// Title: Person Class Definition

// Exporting the 'Person' class
export class Person{
    constructor() {
        console.log("Constructor Method Called.");
    }
}

Constructor Method Called.
Person {}

Utilizing Multiple Exports from Library

// File: library.js
// Title: Exporting Multiple Functions and a Class

// Exporting named variables
const message = "Hello from library!";
// Exporting function 'fun'
function fun(name="avatar") {
    console.log(`Function is Created by: ${name}`);
}
// Exporting function 'rtrn'
function rtrn(name = "avatar") {
    return `Function is returning something by: ${name}`;
}
// Exporting class 'Person'
class Person{
    constructor() {
        console.log("Constructor Method Called.");
    }
}

// Exporting all named exports in one line
export { message, fun, rtrn, Person };

a. Importing named exports from library.js

// File: main.js
// Title: Utilizing Multiple Exports from Library

// Importing named exports from library.js
import { message, fun, rtrn, Person } from "./library.js";
// Logging the 'message' export
console.log(message);
// Calling the 'fun' function
fun();
// Logging the return value of the 'rtrn' function
console.log(rtrn());
// Instantiating a new object of the 'Person' class
let person2 = new Person();

Hello from library!
Function is Created by: avatar
Function is returning something by: avatar
Constructor Method Called.

b. Importing named exports with aliases from library.js

// File: main.js
// Title: Utilizing Multiple Exports with Aliases

// Importing named exports with aliases from library.js
import { message, fun as f, rtrn, Person } from "./library.js";
// Calling the 'fun' function using alias 'f'
f();

Function is Created by: avatar

c. Utilizing All Exports via Namespace Import

// File: main.js
// Title: Utilizing All Exports via Namespace Import

// Importing all exports from library.js as a single namespace 'all'
import * as all from "./library.js";
// Logging the 'message' export from the 'all' namespace
console.log(all.message)
// Calling the 'fun' function from the 'all' namespace
all.fun();
// Calling the 'rtrn' function from the 'all' namespace
all.rtrn();
// Instantiating a new object of the 'Person' class from the 'all' namespace
let p1 = new all.Person();

Hello from library!
Function is Created by: avatar
Function is returning something by: avatar
Constructor Method Called.

Importing and Utilizing Default Export

// File: main.js
// Title: Importing and Utilizing Default Export

// Importing default export with alias 'def'
import { default as def } from "./library.js";
// Calling the default export function using the alias 'def'
def();

// Importing default export directly without an alias
import defFun from "./library.js";
// Calling the default export function
defFun();

// File: library.js
// Title: Default Export

// Exporting a default function
export default function () {
    console.log("Exproting: Default Function");
}

Exproting: Default Function
Exproting: Default Function

Importing Default and Named Exports from Library

// File: main.js
// Title: Importing Default and Named Exports from Library

// Importing default export directly
import defFun, { message, fun, rtrn, Person } from "./library.js";
// Calling the default export function
defFun();
// Logging the 'message' export
console.log(message);
// Calling the 'fun' function
fun();
// Logging the return value of the 'rtrn' function
console.log(rtrn());
// Instantiating a new object of the 'Person' class
let person2 = new Person();

Chat GPT - Prompt which helped me to create this blog

I will provide code of two js file
first one is main.js
second one is library.js

Both of these can be distinguished by entering lots of blank lines between them.

Your task is to provide: 
1. what is overall title ?
2. The same to me with comment explaination in code format in separete code file - main.js and library.js
3. Dedicated output 
4. and the specific each file title of task/function it perform ?
5. Also add file name to its code.