hashnode-blogs

Let’s explore ES6 modules 😃

Prerequisites 🦿

Node.js installed in your system Nodejs website
Here is a mini tutorial on how to install Node.js in your system
type ` node -v` in terminal to check if it is installed

What are modules and what are commonjs and es6 modules 🤔

When you start doing cool stuffs with javascript in terminal instead of browser.

you write javascript code in file like index.js, that file is known as a module.

Now there are two types of modules

CommonJs module
ECMAScript ( es6) module

we have already discussed about default module environment provided by nodejs -> commonjs

Lets write some code and discuss es6 modules 🧑‍💻

open up your terminal make a directory hello-es6-modules

mkdir hello-es6-modules

cd hello-es6-modules

npm init -y

it will generate a file named package.json

{
"name": "hello-es6-modules",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

now create two new files
first one -> hello-es6-modules/index.js
is it necessary to create a file with the same name mentioned in package.json
"main": "index.js" ? NO.
If you are not going to publish it to npm using npm publish
This field "main" does not serve any purpose.
second one -> hello-es6-modules/oceans.js
and your directory 📁 will look like
```js /**
- hello-es6-modules
- – index.js
- – package.json
- – oceans.js */ ```

Lets activate es6 module environment 🏞️

edit your package.json and add the line ` “type”:”module” `

{
"name": "hello-es6-modules",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

Come on! lets write some code for real 👨‍💻👩‍💻

in hello-es6-modules/oceans.js write the code

const seahorse = 'It is a Seahorse';
export default seahorse;    

in hello-es6-modules/index.js write

import oceansFromNowhere from './oceans.js'
console.log(oceansFromNowhere)

to run the code in hello-es6-modules/index.js, who is ready to console.log | print | give output.
In terminal type
```
node index.js
```
you will get the output
```
It is a Seahorse
```

the above program was the example of “ default export “

In es6 module, there are two types of exports

default export ( the above example )
named export

So lets see named export

in hello-es6-modules/oceans.js clear up everything and write the code

  const shell = "I live in the ocean";

  // you can export like this
  export const fish = "I am a fish";

  // and also like this too
  export { shell };

  // both exports works the same way

in hello-es6-modules/index.js

  import { shell, fish } from './oceans.js';

  console.log(shell);
  console.log(fish);

in terminal type
```
node index.js
```
the output you will get
```
I live in the ocean
I am a fish
```

An example of module containing both named and default export

in hello-es6-modules/oceans.js clear up everything and write the code

 const shell = "I live in the ocean";

 export const fish = "I am a fish";

 export { shell };

 const king = "I am the king of the ocean";

 export default king;

in hello-es6-modules/index.js

  import TheKiNg from './oceans.js';
  import { shell, fish } from './oceans.js';
   
  // or you can import with one line
  // import TheKiNg, { shell, fish } from './oceans.js';

  console.log(shell)
  console.log(fish)
  console.log(TheKiNg)

in terminal type
```
node index.js
```

the output you will get

I live in the ocean
I am a fish
I am the king of the ocean

Lets discuss the difference between default and named export

the default export

you export with statement like export default king; from a module
and you can import it in another module using any name
import TheKiNg from './oceans.js'
you cannot use ` as ` statement
you cannot have multiple default export from a module ( aka file )

the named export

you export like
export const fish;
` export function sayHello(){ }`
and import it with that exact name in another module,
by destructuring assignment which seems to be object destructuring assignment but they are different.
import { fish, sayHello } from './oceans.js'
to escape from namespace you can use ` as `
import { fish as waterFish , sayHello } from './oceans.js'
you can have multiple named export from a file ( aka module )

Examples 🧪

you can default export without name

you can import the same way in all cases of this example.
from hello-es6-modules/index.js with the statement
```
import isStrange from './oceans.js';
```

string

in hello-es6-modules/oceans.js to export write

export default "this is not strange";
// export default  const strange = "this is not strange";     not allowed

functions

in hello-es6-modules/oceans.js to export type
with function expression

export default function () {
    return 'I am river';
}

// allowed 
//  export default function river () {
//  return 'I am river';
// }

with arrow functions

  export default () => {
    return 'I am river';
  }

// not allowed
//    export default const river = () => {
//      return 'I am river';
//    }
  
// or 
// export default () => "I am river";

classes

in hello-es6-modules/oceans.js to export type

  export default class {
        constructor() {
           this.name = 'ocean';
        }
        say() {
           return `I am ${this.name}`;
        }
  }

 // allowed
 // export default class Ocean {
 //    constructor() {
 //       this.name = 'ocean';
 //    }
 //    say() {
 //      return `I am ${this.name}`;
 //    }
 // }

you can use names too. If you want

Checkout this link for more example on this topic

Checkout this link for coding challenge on this topic

Try mixing 🧫🧪 basic javascript and make new things.
Remember “There is no science without experiments 🥼”.