Module

[Joker4mas]

Defined Modules and elaborated on it's use case with examples that simple and straight to the point.

[netlify[bot]]

✅ Deploy Preview for javascript-note ready!

Name	Link
🔨 Latest commit	27c2ebe8398bfd35adac0d998fb2c96df0182363
🔍 Latest deploy log	https://app.netlify.com/sites/javascript-note/deploys/67113fc2cfa5470008274b3c
😎 Deploy Preview	https://deploy-preview-22--javascript-note.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Oluwasetemi]

@Joker4mas, thanks for these outstanding contributions. The markdown does not conform to sli.dev format. Each page on the slides is separated with ---. check the existing module and follow the guide.

[Oluwasetemi]

Can you see the difference?

Markdown of the new changes

# Module basics

<div />

[What is a module?]{.text-gradient.font-hand.text-10.pr-3.pl-0}

- A module is just a file. One script is one module. As simple as that.

- Modules can load each other and use special directives export and import to interchange functionality, call functions of one module from another one:

- Export keyword labels variables and functions that should be accessible from outside the current module.
- Import allows the import of functionality from other modules.

For instance, if we have a file `sayHi.js` exporting a function:

<div flex="~ row" gap-10>

\`\`\`js
// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
\`\`\`

\`\`\`js
// 📁 main.js
import {sayHi} from './sayHi.js';
\`\`\`

</div>

N.B. I added the backslash to escape GitHub formatting. You can check the code itself you will find my commit with the file changes. Notice the code to split two code examples side by side. Styling is done with unocss. it's handy.

[Oluwasetemi]

Check the Netlify preview URL to see if everything is rendering correctly. @Joker4mas

[Rolalove]

Great content @Joker4mas. The following addition should improve this chapter.

1.) I think it important to add that with export, users can:

• Export before declarations and

• Export apart from declarations Also you can seal it using one example to explain both.

[Rolalove]

For this part: Import as <var name>: This syntax allows you to import all exported code from a module and assign it to a single object. This is useful when you want to import multiple modules into a single file. I think you should give an example: like Example: import as myModule from './myModule.js'

if this is the point you are trying to pass across.

Because the example below, it imports specific named exports from the module and it not relating to the first explanation. @Oluwasetemi can you please check this, to confirm if this suggestion is valid

You can also talk about renaming imports.

[Oluwasetemi]

Great content @Joker4mas. The following addition should improve this chapter.

1.) I think it important to add that with export, users can:

• Export before declarations and
• Export apart from declarations Also you can seal it using one example to explain both.

By saying export before declaring you mean appending export to const function / let variable right? @Rolalove

I am not sure I understand export apart from declarations. You can give example.

[Rolalove]

Great content @Joker4mas. The following addition should improve this chapter. 1.) I think it important to add that with export, users can:

• Export before declarations and
• Export apart from declarations Also you can seal it using one example to explain both.

By saying export before declaring you mean appending export to const function / let variable right? @Rolalove

I am not sure I understand export apart from declarations. You can give example.

Exporting before declarations: This allows you to export a variable, function, or class at the moment you declare it. // Export before declaration

export const PI = 3.14159;
// export an array
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Exporting apart from declarations: This lets you declare your code first and then export it later in the file.

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; 

// Regular function declaration
function square(x) {
    return x * x;
}

// Export apart from declaration
export { square };

[Oluwasetemi]

Great content @Joker4mas. The following addition should improve this chapter. 1.) I think it important to add that with export, users can:

• Export before declarations and
• Export apart from declarations Also you can seal it using one example to explain both.

By saying export before declaring you mean appending export to const function / let variable right? @Rolalove I am not sure I understand export apart from declarations. You can give example.

Exporting before declarations: This allows you to export a variable, function, or class at the moment you declare it. // Export before declaration

export const PI = 3.14159;
// export an array
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Exporting apart from declarations: This lets you declare your code first and then export it later in the file.

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; 

// Regular function declaration
function square(x) {
    return x * x;
}

// Export apart from declaration
export { square };

https://deploy-preview-22--javascript-note.netlify.app/78 explains the first one in your review.

The second example is valid. I will add it to the slides

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; 

// Regular function declaration
function square(x) {
    return x * x;
}

// Export apart from declaration
export { square };

[Oluwasetemi]

For this part: Import as <var name>: This syntax allows you to import all exported code from a module and assign it to a single object. This is useful when you want to import multiple modules into a single file. I think you should give an example: like Example: import as myModule from './myModule.js'

if this is the point you are trying to pass across.

Because the example below, it imports specific named exports from the module and it not relating to the first explanation. @Oluwasetemi can you please check this, to confirm if this suggestion is valid

You can also talk about renaming imports.

The next slide following the quoted one implements your suggestion. What I can do is to bring them together side by side.

[Rolalove]

For this part: Import as <var name>: This syntax allows you to import all exported code from a module and assign it to a single object. This is useful when you want to import multiple modules into a single file. I think you should give an example: like Example: import as myModule from './myModule.js' if this is the point you are trying to pass across. Because the example below, it imports specific named exports from the module and it not relating to the first explanation. @Oluwasetemi can you please check this, to confirm if this suggestion is valid You can also talk about renaming imports.

The next slide following the quoted one implements your suggestion. What I can do is to bring them together side by side.

That would work too

[Oluwasetemi]

@Joker4mas I implemented the review for you to be familiar with how I would approach the review request, also showing you more power of slidev.

[Oluwasetemi]

Once you have seen the changes, let me know when I should merge the PR. It will help in the next one you plan to work on. #25

[Joker4mas]

Thank you very kindly @Oluwasetemi, the changes are valid, please implement the merge. @RidwanAdebosin @Rolalove @Olubebe Thank you so much for the feedback, I will implement them in my next contribution

[Oluwasetemi]

@Joker4mas I have implemented the feedback on your behalf, I think you should note them always implement feedbacks suggested in reviews. Thanks for putting your effort in to the note. We appreciate