Como importar e exportar funções em JavaScript

Importar e exportar funções em JavaScript pode ajudar a otimizar seu código.

Hoje, o JavaScript desempenha um papel enorme no desenvolvimento de sites. Os desenvolvedores front-end usam JavaScript para criar aplicativos da Web interativos. Como resultado, a demanda por desenvolvedores JavaScript aumentou.

É claro que o JavaScript evoluiu ao longo dos anos. O ES6 introduziu muitos novos recursos na linguagem. Uma é uma maneira de compartilhar código facilmente entre arquivos JavaScript.

Importar e exportar funções para JavaScript é novo e pode torná-lo um desenvolvedor melhor. Veja como essas funções funcionam.

O que é um módulo JavaScript?

Um módulo JavaScript é um arquivo JavaScript que contém uma coleção de código para seu uso. Os módulos geralmente são escritos em arquivos separados e importados usando a palavra-chave import. Economiza tempo e esforço porque você pode reutilizá-lo mais tarde.

Por exemplo, se você tiver uma função chamada calculateSum(), poderá incluí-la em outro arquivo e usar as funções de exportação e importação do JavaScript para disponibilizá-la em qualquer lugar do projeto sem problemas.

Um dos benefícios de usar módulos é que ele ajuda a manter seu código organizado. Também torna seu código mais fácil de gerenciar e depurar.

Para usar um arquivo JavaScript como um módulo, você precisa fazer o script do documento HTML com type="module".

<script type="module" src="fileName.js"></script>

Existem dois tipos de módulos:

1. Módulos ECMAScript: os módulos JavaScript são padrão e suportados por todos os principais navegadores.
2. Módulos CommonJS: mais antigos e não são amplamente suportados.

Vamos nos concentrar nos módulos ECMAScript aqui. Se necessário, veja nossa introdução ao JavaScript para melhorar o básico.

Como exportar funções em JavaScript

Em JavaScript, funções são objetos de primeira classe que, além de serem usados ​​sozinhos, também podem ser passados ​​como parâmetros. Exportar funções é uma ótima maneira de transferi-las para outros programas. Também pode ser usado quando você deseja criar bibliotecas reutilizáveis.

Use a função de exportação para exportar funções JavaScript. Export Function Exporta a função fornecida para uso por outro arquivo ou script. Ao exportar nossas próprias funções, podemos usá-las livremente em outros arquivos ou scripts sem nos preocuparmos com questões de licenciamento.

Existem duas maneiras de usar a função de exportação de forma eficaz. Veremos isso com um exemplo de código.

Suponha que você tenha um arquivo getPersonalDetails.js com uma função que retorna o nome completo do usuário após solicitar a entrada. A função fica assim:

function getFullName(fullName){
            fullName = prompt('What is your First Name');
           
            console.log(fullName);
        }

Você pode exportar esta função simplesmente usando a palavra-chave export seguida do nome da função entre colchetes. Se parece com isso:

export {getFullName};

A segunda maneira é adicionar a palavra-chave export antes de declarar a função.

export function getFullName (fullName){...}

Você pode exportar várias funções usando o primeiro método. Isso é feito colocando o nome da função desejada entre chaves. As funções são separadas por vírgulas.

Por exemplo: Digamos que você tenha três funções em nosso arquivo getPersonalDetails.js – getFullName(), getEmail(), getDob(). Você pode exportar a função adicionando a seguinte linha de código:

export {getFullName, getEmail, getDob};

Como importar funções em JavaScript

Para usar um módulo, primeiro você precisa importá-lo. Qualquer função pode ser importada usando uma referência de caminho completo.

Importar funções é muito simples. JavaScript tem um recurso interno para importar suas próprias funções de outros arquivos. Se você quiser acessar essas funções de outros módulos, é uma boa ideia incluir uma declaração de função para cada utilitário.

A função a ser importada foi exportada em seu arquivo original.

Você pode importar funções de arquivos diferentes usando a funcionalidade de palavra-chave de importação. As importações permitem que você escolha qual parte de um arquivo ou módulo carregar.

Veja como importar nossa função getFullName de getPersonalDetails.js:

import {getFullName} from './getPersonalDetails.js'

Isso tornará a função disponível em nosso arquivo atual.

Para importar várias funções, você precisa colocar as funções a serem importadas entre chaves. Cada um é separado por uma vírgula (,).

import {getFullName, getEmail, getDob} from './getPersonalDetails.js'

Há outra maneira de usar a função de importação. Isso nos permite importar todas as exportações para um arquivo específico. Isso é feito usando a sintaxe de import *.

Você pode importar todas as exportações para nosso getPersonalDetails.js adicionando a seguinte linha de código:

import * as personalDetailsModule from './getPersonalDetails.js'

O acima criará um objeto chamado personalDetailsModule.

É apenas um nome de variável, você pode nomear qualquer coisa.

Este objeto contém todas as exportações em nosso getPersonalDetails.js. As funções são armazenadas neste objeto e podem ser acessadas como qualquer propriedade do objeto.

Por exemplo, podemos acessar a função getFullName adicionando a seguinte linha de código:

personalDetailsModule.getFullName();

O que é o modo de exportação?

O modo de exportação é uma função de exportação especial. Use esta opção se apenas uma variável deve ser exportada do arquivo. Também é usado para criar valores de fallback para arquivos ou módulos.

Aqui está um exemplo onde usamos a função getFullName por padrão:

export default function getFullName (fullName){...}

Você não pode usar vários valores por padrão em cada módulo ou arquivo.

As funções usadas por padrão são importadas de forma diferente. Veja como importar nossa função getFullName padrão:

import fullName from './getPersonalDetails.js'

Aqui estão as diferenças:

• O valor importado fullName não tem chaves ao redor.
• Aqui fullName é apenas um nome de variável. Ele armazena o valor de qualquer função padrão.

Sobrecarregue sua função JavaScript

Os módulos JavaScript são trechos de código que podem ser reutilizados em outras partes do código, usando os recursos de importação e exportação do JavaScript. Eles geralmente são escritos em arquivos separados e importados usando a palavra-chave import. Um dos benefícios de usar módulos é que ele ajuda a manter seu código organizado. Também torna seu código mais fácil de gerenciar e depurar.

Leia também: As 20 linguagens de programação mais populares de 2022