🧩 Módulos JavaScript (JavaScript Modules)

Olá HaWker! Jeff Bruchado por aqui.

Esse é um dos últimos artigos da nossa série de artigos que vai cobrir a nossa jornada para Aprender Programação do Zero.

Módulos são como as peças de LEGO no mundo da programação. Eles permitem que você construa seu projeto dividindo-o em blocos menores, mais gerenciáveis e reutilizáveis.

Vamos entender por que Módulos são tão legais:

Organização: Com módulos, você pode quebrar seu código em arquivos menores e mais fáceis de gerenciar. É como ter uma caixa de ferramentas onde cada ferramenta tem seu próprio lugar.

Reutilização: Criou um pedaço de código? Com módulos, você pode reutilizá-lo em diferentes partes do seu projeto, ou até em outros projetos, sem copiar e colar.

Escopo: Cada módulo tem seu próprio escopo. Isso significa que as variáveis, funções, etc., dentro de um módulo não bagunçam o espaço global do seu projeto.

Dependências: Módulos deixam claro quais são as dependências de cada parte do seu projeto. Você pode ver exatamente o que cada parte precisa para funcionar.

Então, como funcionam os Módulos no JavaScript?

1. Exportando: Você define o que cada módulo vai disponibilizar para outros arquivos usando export. Pode ser uma função, uma variável, uma classe...
2. Importando: Quando você precisa de algo de outro módulo, você usa import para trazer aquilo que foi exportado.
3. Modularidade: Com export e import, você pode criar um código bem modular, onde cada parte tem sua responsabilidade bem definida.

Por exemplo:

// Em arquivo.jsexport function somar(a, b) {  return a + b;}// Em outroArquivo.jsimport { somar } from './arquivo.js';console.log(somar(1, 2)); // 3

Neste exemplo, a função somar é exportada em arquivo.js e importada em outroArquivo.js.

Os Módulos JavaScript são como peças de um quebra-cabeça. Cada peça tem sua função e, quando unidas, formam um projeto completo e funcional. Eles trazem clareza, eficiência e uma estrutura super organizada ao seu código. É como ter uma equipe de super-heróis, onde cada um tem seu superpoder especial, contribuindo para salvar o dia (ou o projeto!).

A seguir vamos nos aprofundar mais nesse conceito.

Módulos JavaScript

Os Módulos JavaScript (como já comentei anteriormente) são basicamente uma maneira de organizar o código em um projeto, de forma que cada módulo possui sua própria responsabilidade e pode ser reutilizado em outras partes do projeto. Existem dois principais sistemas de módulos no JS:

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

CommonJS

O CommonJS foi o primeiro sistema de módulos a ser adotado pelo JavaScript. Ele foi criado para ser usado em ambientes de servidor, como o Node.js, e é baseado em uma sintaxe de exportação e importação de módulos.

Um exemplo de como funciona a exportação de um módulo CommonJS é o seguinte:

// math.jsfunction add(x, y) {  return x + y;}function subtract(x, y) {  return x - y;}module.exports = {  add: add,  subtract: subtract,};

Neste exemplo, o módulo math.js possui duas funções: add e subtract. Usamos o objeto module.exports para exportar essas funções para que elas possam ser importadas em outros módulos.

Para importar um módulo CommonJS em outro arquivo, usamos a palavra-chave require:

// main.jsconst math = require('./math');console.log(math.add(1, 2)); // 3console.log(math.subtract(5, 3)); // 2

Exercício Prático

Crie um módulo JavaScript que exporte uma função que receba dois números e retorne a soma desses números. O nome do arquivo deve ser "soma.js" e deve ser utilizado o padrão CommonJS para exportar e importar o módulo.

Em seguida, crie outro arquivo chamado "index.js" que importe o módulo "soma.js" e utilize a função exportada para somar dois números qualquer.

🙏🏻 Me envie a sua solução respondendo esse conteúdo.

ECMAScript Modules (ES Modules)

É o novo padrão de módulos no JavaScript, que foi adotado pelo ECMAScript. Ele foi criado para ser usado tanto em ambientes de servidor quanto no lado do cliente (navegadores).

O sistema de módulos ES Modules é baseado em duas palavras-chave: export e import.

A sintaxe para exportar um módulo ES Modules é semelhante à do CommonJS, mas usamos a palavra-chave export em vez de module.exports:

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

Para importar um módulo ES Modules em outro arquivo, usamos a palavra-chave import:

// main.jsimport { add, subtract } from './math';console.log(add(1, 2)); // 3console.log(subtract(5, 3)); // 2

Conclusão

Em resumo, os módulos são uma forma de organizar o código em um projeto e garantir que cada módulo tenha sua própria responsabilidade e possa ser reutilizado em outras partes do projeto.

Lembre-se! Existem dois principais sistemas de módulos:

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

CommonJS foi o primeiro sistema de módulos a ser adotado pelo JavaScript e é usado principalmente em ambientes de servidor, como o Node.js.

Para exportar um módulo CommonJS, usamos o objeto module.exports, enquanto para importar um módulo usamos a palavra-chave require.

ES Modules é o novo padrão de módulos, que foi adotado pelo ECMAScript. Ele pode ser usado tanto em ambientes de servidor quanto no lado do cliente (navegadores). Para exportar um módulo ES Modules, usamos a palavra-chave export, enquanto para importar um módulo usamos a palavra-chave import.

É comum enquanto você estiver trabalhando em um ou outro projeto, você ver os Desenvolvedores usando um ou outro, então é importante saber a diferença entre eles!

💡Em projetos mais modernos a grande parte deles já utiliza os ES Modules, já em projetos mais antigos é comum de se ver a utilização do CommomJS.

Pois bem HaWker, chegamos ao fim de mais um artigo. E estamos chegando ao fim do nosso curso.

Como sempre, se tiver qualquer dúvida ou quiser explorar mais algum ponto, é só responder com a sua dúvida, nesse email.

E lembre-se, estou aqui para te ajudar a melhorar 1% a cada novo artigo!

Se você chegou até aqui, como de costume, por favor, responda esse email com "Consegui entender os Módulos JavaScript".

Dessa forma eu vou saber que essa série de artigos está sendo útil pra você, e que você está acompanhando e aproveitando.

Como você já sabe! Somente um verdadeiro HaWker chega até o final.

Parabéns!

Estou feliz em te ter aqui.

Te vejo em breve.

Bora pra cima! 🦅

- Jeff Bruchado.

01) Aprendendo JavaScript do Zero: Torne-se um programador de valor e aprenda a programar usando JavaScript, com um conteúdo organizado e condensado pensado no que realmente importa você aprender. O conteúdo possui todos os artigos que venho disponibilizando semanalmente pra você, e também possui exercícios práticos, com as respostas pra você aprender a teoria e já sair colocando a mão na massa.

02) Consultoria: Faça parte da minha mentoria e tenha aulas diretamente comigo. Se você se interessar por isso, responda esse email com "Tenho interesse na mentoria."

Parabéns por chegar até aqui, HaWker! 🎉

Nesse momento que você aprendeu sobre módulos JavaScript, que tal testar seus conhecimentos? Participe do quiz abaixo e veja o quanto você absorveu do nosso artigo.

É uma ótima maneira de fixar o aprendizado e se preparar para os próximos passos na sua jornada de programação.

Aperte para acessar o quiz.

Boa sorte e divirta-se!