Melhorando a manutenibilidade e escalabilidade do código com Módulos ES6
Tags: es6module, javascript, modularidade, manutenibilidade
Published: 2023-03-22 13:00:00

Continuando nossa série de artigos sobre ES6 (leia o último [aqui](https://dev.to/ramonborges15/ecmascript-6-uma-introducao-35fb)), vamos falar hoje sobre módulos. O uso de módulos é uma das funcionalidades mais importantes introduzidas no EcmaScript 6. 

Ele permite que você organize seu código em pequenos pedaços independentes, tornando ele mais modular e fácil de manter. Módulos fornecem suporte para exportar e importar valores sem poluir o namespace global. 

Nós já tínhamos essa capacidade no JavaScript através de bibliotecas de terceiros como AMD e CommonJS, mas o ECMAScript 6, quando lançado, também trouxe essa habilidade.

## Desenvolvimento
O **recurso de exportação** de módulos ES6 permite que você **separe as preocupações** em módulos diferentes, tornando o código mais modular. Por exemplo, você pode criar um módulo que contenha apenas funções de validação, outro que contenha funções para manipulação de dados e assim por diante.

```javascript
export function validateCPF(cpf) {
    // code here
}

export function validateEmail(email) {
    // code here
}
```

```javascript
export function transformToUTC(data) {
   // code here
}
```

Como os módulos são independentes, eles podem ser reutilizados em diferentes partes do projeto, o que beneficia a escalabilidade.

O recurso de exportação padrão **(default)** permite que você exporte um único valor ou objeto de um módulo, tornando mais simples a sua importação em outros lugares do código. 

```javascript

// tools.js
export default function calculator(x, y, option) {
    if (option === 1) {
        return sub(x, y);
    } else {
        return add(x, y);
    }
}

function add(x, y) {
    return x + y;
}

function sub(x, y) {
    return x - y;
}
```

```javascript
import calculator from './tools.js';

console.log("Result: " + calculator(1, 3, 2));
// Result: 4

```

Ao utilizar o **recurso de importação** de módulos ES6, você pode usar o chamado **wildcards**. Ele permite que você importe um módulo inteiro e acesse todos os recursos por meio de uma notação _* as algum-nome_

```javascript

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

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

export var pi = 3.1415;
```

```javascript
import * as calc from './basic-operations.js';
console.log('Result: ' + calc.add(1, 2));

// Result: 3
```

## Conclusão
Em resumo, os módulos ES6 são uma funcionalidade poderosa do JavaScript que podem melhorar significativamente a manutenibilidade e escalabilidade do código. Eles permitem uma melhor organização do código, simplificam o gerenciamento de dependências e permitem a reutilização do código em diferentes projetos e contextos. Com o uso correto dos recursos de exportação, importação, exportação padrão e wildcards, é possível criar um código mais modular, legível e fácil de manter.


## Para mais informações
- [ES modules: A cartoon deep-dive
](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
- [ECMAScript 6 Succinctly](https://www.syncfusion.com/succinctly-free-ebooks/ecmascript-6-succinctly)