# Módulos (em ES6)

Em projetos grandes, os módulos, que foram adicionados no ES6, são essenciais. Ajudam na organização do sistema, no reuso de código e na diminuição da complexidade das funcionalidades do sistema.

Imagina que você tivesse que lidar com um código de mais de 3000 linhas em um mesmo arquivo, seria complicado de entender o código do inicio ao fim depois de duas semanas sem programar, não é mesmo?

## Importando e exportando módulos

### Export e Import

Para exportar módulos em JS, a maneira mais simples é exportar um único objeto, podendo ser: uma função, um JSON, um valor. O que você quiser, e a maneira mais simples de efetuar o export é como abaixo:

{% tabs %}
{% tab title="export" %}

```javascript
export func1(x, y){
    console.log(x*y)
}
```

{% endtab %}

{% tab title="import" %}

```javascript
// Aqui eu importo a func1 para esse arquivo
import { func1 } from 'functions'

func1(7,9) //63
```

{% endtab %}
{% endtabs %}

#### Classe

Para importar ou exportar classes não se difere muito:

{% tabs %}
{% tab title="export" %}

```javascript
export class C1{
    constructor(arg1) {
        this._arg1 = arg1;
    }
    
    get arg1() {
        return this._arg1;
    }

};
```

{% endtab %}

{% tab title="import" %}

```javascript
import { C1 } from 'classes';

const c1 = new C1('arg2');
console.log(c1.arg1);
```

{% endtab %}
{% endtabs %}

#### Default

A exportação padrão só é permitida uma vez por script, ela é feita utilizando a keyword `export default`, que é muito útil para definirmos um exportação de um módulo. Um exemplo prático é você ter um arquivo com várias funções que fazem alguma coisa com string que são utilizadas em vários arquivos.

Um exemplo de `export default` em uma função é feito abaixo:

{% tabs %}
{% tab title="export" %}

```javascript
export default function (x){
    console.log(x);
}
```

{% endtab %}

{% tab title="import" %}

```javascript
import func2 from 'func2';

func2(a);
```

{% endtab %}
{% endtabs %}

Quando se faz exportações explícita, mesmo sendo útil para importar vários valores, torna-se obrigatório importar usando o mesmo nome de objeto que foi importando.

Porém na exportação padrão, não se torna necessário importar utilizando o mesmo nome. 

#### Combinando tudo

Agora que já sabemos como o import e export funcionam, podemos verificar como é feito a exportação e importações de múltiplos valores:

{% tabs %}
{% tab title="export" %}

```javascript
let adiciona = function(a, b) {
    return a + b;
}

let subtrai = function(a, b) {
    return a - b;
}

export adiciona;
export subtrai;

export default {
    adiciona: adiciona,
    subtrai: subtrai
};
```

{% endtab %}

{% tab title="import" %}

```javascript
import { adiciona } from 'export';
import { subtrai } from 'export';
import matematica from 'export';


console.log(adiciona(1, 2)) // Saída: 3
console.log(subtrai(1, 2)) // Saída: -1
console.log(matematica.adiciona(2, 2)) // Saída: 4
```

{% endtab %}
{% endtabs %}

Caso queira saber mais sobre módulos, siga as referências: <https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export>

<https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://uclsanca.gitbook.io/learn/web-basico/javascript/modulos-em-es6.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.