JavaScript Modules

Hello HaWkers! Jeff Bruchado here.

This is one of the last articles in our series that will cover our journey to Learn Programming from Scratch.

Modules are like LEGO pieces in the programming world. They allow you to build your project by dividing it into smaller, more manageable, and reusable blocks.

Let's understand why Modules are so cool:

Organization: With modules, you can break your code into smaller files that are easier to manage. It's like having a toolbox where each tool has its own place.

Reuse: Created a piece of code? With modules, you can reuse it in different parts of your project, or even in other projects, without copy and paste.

Scope: Each module has its own scope. This means that variables, functions, etc., inside a module don't mess up the global space of your project.

Dependencies: Modules make clear what the dependencies of each part of your project are. You can see exactly what each part needs to work.

So, how do Modules work in JavaScript?

1. Exporting: You define what each module will make available to other files using export. It can be a function, a variable, a class...

2. Importing: When you need something from another module, you use import to bring what was exported.

3. Modularity: With export and import, you can create very modular code, where each part has its well-defined responsibility.

For example:

// In file.js
export function add(a, b) {
  return a + b;
}

// In anotherFile.js
import { add } from './file.js';

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

In this example, the add function is exported in file.js and imported in anotherFile.js.

JavaScript Modules are like pieces of a puzzle. Each piece has its function and, when united, they form a complete and functional project. They bring clarity, efficiency, and a super organized structure to your code. It's like having a team of superheroes, where each one has their special superpower, contributing to save the day (or the project!).

Next, let's dive deeper into this concept.

---

JavaScript Modules

JavaScript Modules (as I mentioned earlier) are basically a way to organize code in a project, so that each module has its own responsibility and can be reused in other parts of the project. There are two main module systems in JS:

1. CommonJS
2. ECMAScript Modules (ES Modules).

---

CommonJS

CommonJS was the first module system adopted by JavaScript. It was created to be used in server environments, like Node.js, and is based on a module export and import syntax.

An example of how CommonJS module export works is as follows:

// math.js
function add(x, y) {
  return x + y;
}

function subtract(x, y) {
  return x - y;
}

module.exports = {
  add: add,
  subtract: subtract,
};

In this example, the math.js module has two functions: add and subtract. We use the module.exports object to export these functions so they can be imported in other modules.

To import a CommonJS module in another file, we use the require keyword:

// main.js
const math = require('./math');

console.log(math.add(1, 2)); // 3
console.log(math.subtract(5, 3)); // 2

Practical Exercise

Create a JavaScript module that exports a function that receives two numbers and returns the sum of those numbers. The file name should be "sum.js" and you should use the CommonJS standard to export and import the module.

Then, create another file called "index.js" that imports the "sum.js" module and uses the exported function to add any two numbers.

🙏🏻 Send me your solution by replying to this content.

---

ECMAScript Modules (ES Modules)

It's the new module standard in JavaScript, which was adopted by ECMAScript. It was created to be used in both server and client-side (browser) environments.

The ES Modules system is based on two keywords: export and import.

The syntax for exporting an ES Modules module is similar to CommonJS, but we use the export keyword instead of module.exports:

// math.js
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

To import an ES Modules module in another file, we use the import keyword:

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

console.log(add(1, 2)); // 3
console.log(subtract(5, 3)); // 2

---

Conclusion

In summary, modules are a way to organize code in a project and ensure that each module has its own responsibility and can be reused in other parts of the project.

Remember! There are two main module systems:

1. CommonJS and
2. ECMAScript Modules (ES Modules)

CommonJS was the first module system adopted by JavaScript and is mainly used in server environments, like Node.js.

To export a CommonJS module, we use the module.exports object, while to import a module we use the require keyword.

ES Modules is the new module standard, which was adopted by ECMAScript. It can be used in both server and client-side (browser) environments. To export an ES Modules module, we use the export keyword, while to import a module we use the import keyword.

It's common while you're working on one project or another, to see Developers using one or the other, so it's important to know the difference between them!

💡In more modern projects, most of them already use ES Modules, while in older projects it's common to see the use of CommomJS.

Well HaWker, we've reached the end of another article. And we're approaching the end of our course.

As always, if you have any questions or want to explore any point further, just reply with your question to this email.

And remember, I'm here to help you improve 1% with each new article!

If you made it this far, as usual, please reply to this email with "I managed to understand JavaScript Modules".

This way I'll know that this article series is being useful for you, and that you're following along and taking advantage.

As you already know! Only a true HaWker makes it to the end.

Congratulations!

I'm happy to have you here.

See you soon.

Let's go! 🦅

- Jeff Bruchado.

---

01) Learning JavaScript from Scratch: Become a valuable programmer and learn to program using JavaScript, with organized and condensed content focused on what really matters for you to learn. The content has all the articles I've been sharing weekly with you, and also has practical exercises, with answers for you to learn the theory and immediately start getting hands-on.

02) Consulting: Join my mentorship and have classes directly with me. If you're interested in this, reply to this email with "I'm interested in the mentorship."

Congratulations on making it this far, HaWker! 🎉

Now that you've learned about JavaScript modules, how about testing your knowledge? Take the quiz below and see how much you absorbed from our article.

It's a great way to reinforce learning and prepare for the next steps in your programming journey.

Click to access the quiz.

Good luck and have fun!