Usando várias dicas de JavaScript e atalhos de sintaxe, essas funções o ajudarão a resolver muitos problemas comuns.

JavaScript é a linguagem de fato para a construção de aplicativos móveis e da Web modernos. Ele capacita uma ampla gama de projetos, desde sites simples até aplicativos dinâmicos e interativos.

Para criar produtos que os usuários vão adorar e apreciar, é essencial que você escreva um código que não seja apenas funcional, mas também eficiente e fácil de manter. O código JavaScript limpo é vital para o sucesso de qualquer aplicativo da Web ou móvel, seja um projeto de hobby ou um aplicativo comercial complexo.

O que há de tão bom nas funções JavaScript?

Uma função é um componente essencial para escrever o código de qualquer aplicativo. Ele define um pedaço de código reutilizável que você pode invocar para executar uma tarefa específica.

Além de sua reutilização, as funções são altamente versáteis. A longo prazo, eles simplificam o processo de dimensionamento e manutenção de uma base de código. Por

instagram viewer
criando e usando as funções do JavaScript, você pode economizar muito tempo de desenvolvimento.

Aqui estão algumas funções JavaScript úteis que podem melhorar significativamente a qualidade do código do seu projeto.

1. uma vez

Essa função única de ordem superior envolve outra função para garantir que você possa chamá-la apenas uma vez. Ele deve ignorar silenciosamente as tentativas subseqüentes de chamar a função resultante.

Considere uma situação em que você deseja fazer solicitações de API HTTP para buscar dados de um banco de dados. Você pode anexar o uma vez funcionar como um retorno de chamada para uma função de ouvinte de eventos, para que seja acionado uma vez e não mais.

Veja como você pode definir tal função:

const uma vez = (função) => {
deixar resultado;
deixar funcChamado = falso;
retornar(...args) => {
se (!funcChamado) {
 resultado = func(...args);
 funcChamado = verdadeiro;
 }
retornar resultado;
 };
};

A função once recebe uma função como argumento e retorna uma nova função que você pode chamar apenas uma vez. Quando você chama a nova função pela primeira vez, ela executa a função original com os argumentos fornecidos e salva o resultado.

Quaisquer chamadas subsequentes para a nova função retornam o resultado salvo sem executar a função original novamente. Observe a implementação abaixo:

// Define uma função para buscar dados do banco de dados
funçãogetUserData() {
// ...
}
// obtém uma versão da função getUserData que só pode ser executada uma vez
const makeHTTPRequestOnlyOnce = uma vez (getUserData);
const userDataBtn = documento.querySelector("#btn");
userDataBtn.addEventListener("clique", makeHTTPRequestOnlyOnce);

Ao usar a função once, você pode garantir que o código envie apenas uma solicitação, mesmo que o usuário clique no botão várias vezes. Isso evita problemas de desempenho e bugs que podem resultar de solicitações redundantes.

2. cano

Essa função pipe permite encadear várias funções em uma sequência. As funções na sequência receberão o resultado da função anterior como entrada e a última função na sequência calculará o resultado final.

Aqui está um exemplo em código:

// Define a função pipe
const tubo = (...funções) => {
retornar(arg) => {
 funcs.forEach(função(função) {
 arg = função (arg);
 });
retornar arg;
 }
}


// Definir algumas funções
const addOne = (a) => um + 1;
const duplo = (x) => x* 2;
const quadrado = (x) => x*x;


// Cria um pipe com as funções
const myPipe = pipe (addOne, double, square);
// Testa o pipe com um valor de entrada
console.log (meuPipe(2)); // Saída: 36

As funções de pipe podem melhorar a legibilidade e a modularidade do código, permitindo que você escreva uma lógica de processamento complexa de forma concisa. Isso pode tornar seu código mais compreensível e fácil de manter.

3. mapa

A função map é um método da classe JavaScript Array incorporada. Ele cria uma nova matriz aplicando uma função de retorno de chamada a cada elemento da matriz original.

Ele percorre cada elemento na matriz de entrada, passa-o como uma entrada para a função de retorno de chamada e insere cada resultado em uma nova matriz.

O que é importante observar é que a matriz original não é modificada de forma alguma durante esse processo.

Aqui está um exemplo de como usar mapa:

const números = [1, 2, 3, 4, 5];
const doubleNumbers = numeros.map(função(número) {
retornar número * 2;
});
console.log (doubleNumbers);
// Saída: [2, 4, 6, 8, 10]

Neste exemplo, a função map itera sobre cada elemento na matriz de números. Ele multiplica cada elemento por 2 e retorna os resultados em uma nova matriz.

Geralmente, as funções de mapa eliminam a necessidade de usando loops em JavaScript, especialmente os infinitos — loops infinitos podem causar sobrecarga computacional significativa, levando a problemas de desempenho em um aplicativo. Isso torna a base de código mais concisa e menos propensa a erros.

4. escolha

Essa função pick permite extrair seletivamente propriedades específicas de um objeto existente e gerar um novo objeto com essas propriedades como resultado do cálculo.

Por exemplo, considere um recurso de relatórios em um aplicativo, utilizando a função de seleção, você pode personalizar sem esforço relatórios diferentes com base nas informações do usuário desejadas, especificando explicitamente as propriedades que você deseja incluir em vários relatórios.

Aqui está um exemplo em código:

const escolher = (objeto, ...chaves) => {
retornar keys.reduce((resultado, chave) => {
se (object.hasOwnProperty (chave)) {
 resultado[chave] = objeto[chave];
 }
retornar resultado;
 }, {});
};

A função pick recebe um objeto e qualquer número de chaves como argumentos. As chaves representam as propriedades que você deseja selecionar. Em seguida, ele retorna um novo objeto que contém apenas as propriedades do objeto original com chaves correspondentes.

const usuário = {
 nome: 'Martin',
 idade: 30,
 e-mail: '[email protected]',
};
console.log (escolha (usuário, 'nome', 'idade'));
// Saída: { nome: 'Martin', idade: 30 }

Essencialmente, uma função pick pode encapsular uma lógica de filtragem complexa em uma única função, tornando o código mais fácil de entender e depurar.

Ele também pode promover a reutilização de código, já que você pode reutilizar a função pick em toda a sua base de código, reduzindo a duplicação de código.

5. fecho eclair

Essa função zip combina arrays em um único array de tuplas, combinando os elementos correspondentes de cada array de entrada.

Aqui está um exemplo de implementação de uma função zip:

funçãofecho eclair(...arrays) {
const comprimento máx = Matemática.min(...arrays.map(variedade => array.comprimento));
retornarVariedade.de(
 { comprimento: comprimento máximo },
 (_, índice) => arrays.map(variedade => matriz[índice])
 );
};


const um = [1, 2, 3];
const b = ['a', 'b', 'c'];
const c = [verdadeiro, falso, verdadeiro];
console.log (zip (a, b, c));
// Saída: [[1, 'a', verdadeiro], [2, 'b', falso], [3, 'c', verdadeiro]]

A função zip aceita matrizes de entrada e calcula seu maior comprimento. Em seguida, ele cria e retorna um único array usando o método JavaScript Array.from. Essa nova matriz contém elementos de cada matriz de entrada.

Isso é especialmente útil se você precisar combinar dados de várias fontes instantaneamente, eliminando a necessidade de escrever código redundante que, de outra forma, sobrecarregaria sua base de código.

Trabalhando com funções JavaScript em seu código

As funções JavaScript melhoram muito a qualidade do seu código, fornecendo uma maneira simplificada e compacta de lidar com grande parte da lógica de programação para bases de código pequenas e grandes. Compreendendo e usando essas funções, você pode escrever aplicativos mais eficientes, legíveis e de fácil manutenção.

Escrever um bom código possibilita a criação de produtos que não apenas resolvem um problema específico para os usuários finais, mas também o fazem de maneira fácil de modificar.