Funções em JavaScript: escopo e fechamentos

Uma função dá um nome a uma tarefa e armazena as instruções para executá-la. Defini-la não executa essas instruções. Uma chamada as executa, e outra chamada as executa novamente com novas entradas.

Escreva a definição

Uma declaração tem a palavra-chave function, um nome, parênteses para os parâmetros e chaves para o corpo:

function greet(name) {
  console.log("Hello, " + name + "!");
}

Aqui, name é um parâmetro: um nome local para a entrada fornecida por cada chamada. O corpo junta essa entrada ao texto ao redor e imprime o resultado. A chave de fechamento marca o fim da definição; a execução continua com a próxima instrução fora dela.

Uma função sem entradas ainda precisa de parênteses. Por exemplo, function sayHi() { console.log("Hi"); } define uma tarefa com uma lista de parâmetros vazia. As chaves pertencem à definição; os parênteses depois de um nome aparecem tanto em definições quanto em chamadas, com funções diferentes.

Execute a tarefa

greet("Amira");
greet("Li");

A primeira chamada atribui a name o valor "Amira" e imprime “Hello, Amira!”. A segunda inicia uma nova chamada com name igual a "Li" e imprime “Hello, Li!”. A definição é compartilhada; a entrada pertence à chamada individual.

greet sozinho se refere ao valor da função. Ele não executa o corpo. Essa distinção importa quando uma linha parece não fazer nada: sayHi; lê um valor de função e o descarta, enquanto sayHi(); imprime “Hi”.

Substitua instruções copiadas

Suponha que vários relatórios precisem de um cabeçalho cercado por linhas:

function printHeading(title) {
  console.log("-----");
  console.log(title);
  console.log("-----");
}

printHeading("Report");
printHeading("Totals");

A primeira chamada imprime uma linha, “Report” e outra linha. A segunda imprime a mesma moldura ao redor de “Totals”. Para alterar o estilo das linhas, edite as duas instruções que as imprimem nessa única definição. Sem a função, cada cabeçalho copiado precisaria de sua própria correção.

Escolha um nome que diga o que uma chamada faz. printHeading descreve uma ação; isValidEmail nomeia uma verificação de sim ou não. Use camelCase, com a primeira palavra em minúsculas e as palavras seguintes começando com maiúsculas. Se um nome proposto unir duas tarefas separadas com “e”, considere dar a cada tarefa sua própria função.

Leia código que chama uma declaração antes de sua posição

As declarações são preparadas antes da execução do código ao redor. Esse comportamento é chamado de elevação:

sayHi();
function sayHi() {
  console.log("Hi");
}

A chamada funciona dentro do escopo da declaração, embora a definição escrita venha depois. A elevação não faz o corpo ser executado antes; ela disponibiliza a função para uma chamada.

Verifique a escrita e o uso de maiúsculas e minúsculas quando uma chamada falhar. Greet() e greet() são nomes diferentes. Chamar uma greeet() não declarada gera um ReferenceError; omitir os parênteses da chamada pode falhar silenciosamente, pois apenas ler uma função existente é código válido.

Funções são valores. Você pode manter uma em uma variável, copiar sua referência, passá-la para outra função ou retorná-la. Uma expressão de função cria esse valor onde se espera uma expressão.

Armazene uma função

const square = function (n) {
  return n * n;
};

const answer = square(4);

A expressão depois de = cria uma função. A atribuição a armazena em square; a chamada posterior retorna 16. Essa instrução termina com ponto e vírgula, seguindo a convenção de formatação usada aqui.

A posição de function distingue as formas. Uma definição escrita como uma instrução independente, function square(n) { ... }, é uma declaração. Uma função escrita depois de = ou diretamente como argumento de uma chamada é uma expressão. Ambas as formas de função comum podem aceitar parâmetros e retornar valores.

Use const para uma variável que contém uma função quando seu valor deve permanecer o mesmo. Chamar square(5) é permitido; atribuir square = 5; gera um TypeError. A constante protege a variável contra substituição. Ela não impede chamadas repetidas.

Guarde uma função ou seu resultado

const sq = square;
const result = square(3);

sq se refere à mesma função que square. Chamar sq(3) retorna 9. result contém o número 9 retornado por uma chamada. Ele não pode ser chamado como função. typeof square e typeof sq são "function"; typeof result é "number".

Ler uma atribuição da direita para a esquerda ajuda: primeiro decida se o lado direito cria uma função, refere-se a uma função existente ou chama uma função. A variável à esquerda recebe esse valor. Copiar a referência não cria uma segunda implementação independente.

Aguarde a execução da atribuição

Uma declaração e uma expressão armazenada ficam disponíveis para chamada em momentos diferentes:

Com const ou let, o nome não pode ser usado antes da inicialização. Com var, o nome existe desde o início, mas o valor da função só é atribuído quando a execução chega à expressão. A elevação da variável não eleva a atribuição.

Dê um nome interno a uma expressão

const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

O nome externo é factorial. O nome fact pertence ao interior da função e permite que ela chame a si mesma; o código externo não pode usar esse nome interno diretamente. O nome da expressão também pode facilitar a leitura de rastreamentos de pilha. Por exemplo, factorial(3) calcula 3 vezes 2 vezes 1 e retorna 6.

Declarações funcionam bem para as principais tarefas nomeadas em um script. Expressões se encaixam onde o código precisa de um valor de função, como em uma atribuição a variável ou em um argumento. Escolher uma expressão muda como o valor é criado e armazenado, não como os parênteses o chamam.

Funções de seta são expressões de função com uma escrita mais curta. Seu comportamento de retorno depende do que vem depois da seta, então examine o corpo antes de decidir o que uma chamada produz.

Escolha a forma dos parâmetros

const sayHi = () => "hi";
const double = n => n * 2;
const add = (a, b) => a + b;

Sem parâmetros, são necessários parênteses vazios. Um parâmetro simples pode dispensar os parênteses. Dois ou mais exigem parênteses. Um parâmetro padrão ou rest também precisa de parênteses: (n = 1) => n * 2 e (...nums) => nums.length são válidos.

A seta separa as entradas do corpo. const double = n => n * 2; cria a função e a armazena; double(6) depois a chama e retorna 12. Como qualquer const que contém uma expressão de função, double não pode ser lida antes da execução de sua linha de inicialização.

Retorne uma expressão ou escreva um bloco

Um corpo conciso retorna sua expressão automaticamente. As chaves iniciam um bloco de instruções. Em um bloco, avaliar uma expressão não a envia de volta a quem chamou a função; escreva return explicitamente.

Use um bloco quando a tarefa precisar de etapas intermediárias:

const describe = (n) => {
  const kind = n % 2 === 0 ? "even" : "odd";
  return n + " is " + kind;
};

Para describe(7), a condição é falsa, então kind recebe "odd". O retorno junta o número e as palavras em “7 is odd”. Remover esse retorno manteria o cálculo local, mas entregaria undefined a quem chamou a função.

Retorne um literal de objeto

Um literal de objeto também usa chaves. Envolva-o em parênteses para que o analisador sintático o interprete como uma expressão:

const makePoint = (x, y) => ({ x: x, y: y });

makePoint(2, 5) retorna um objeto com x igual a 2 e y igual a 5. Sem os parênteses, a primeira chave inicia um bloco. A forma com uma propriedade, () => { value: 1 }, retorna undefined; a forma semelhante com duas propriedades separadas por vírgula gera um erro de sintaxe. Os parênteses mudam como o corpo é interpretado.

Conheça os limites da forma mais curta

Funções de seta não têm seus próprios this ou arguments e não podem ser chamadas com new para construir objetos. Para um cálculo simples que não usa this nem arguments, uma função de seta e uma expressão de função comum se comportam da mesma forma. Substituir todas as funções comuns por funções de seta pode alterar o código que depende desses recursos.

Funções de seta curtas são especialmente fáceis de ler como funções de retorno. [1, 2, 3].map(n => n * 10) passa uma função que retorna um elemento transformado, produzindo [10, 20, 30]. Alterá-la para n => { n * 10; } faz cada valor de retorno se perder silenciosamente.

Os parâmetros de uma função dão nomes aos valores fornecidos por uma chamada. Para rastrear uma chamada, primeiro associe as entradas pela posição e depois acompanhe as operações no corpo.

Relacione posições e tipos

function area(width, height) {
  return width * height;
}

area(4, 2.5);

width e height são parâmetros; 4 e 2,5 são argumentos. Durante essa chamada, width contém 4 e height contém 2,5, então o resultado é 10. Os nomes dos parâmetros não são associados aos nomes das variáveis de quem chama a função. Com divide(a, b), trocar divide(10, 2) por divide(2, 10) muda o resultado de 5 para 0,2.

JavaScript não exige uma quantidade específica de argumentos. area(4) deixa height como undefined; multiplicar por esse valor produz NaN. area(4, 2, 99) retorna 8 porque esse corpo não usa o terceiro argumento. Uma função pode coletar argumentos extras, mas argumentos extras não usados não causam um erro automático.

Os tipos também importam, mesmo quando a chamada é aceita. area("4", 2) retorna 8 porque a multiplicação converte o texto. Uma função de adição se comporta de forma diferente: add("4", 2) retorna “42” quando seu corpo é return a + b;. Se o texto representa um número, add(Number("4"), 2) retorna 6.

Reatribua um parâmetro local

Cada parâmetro é local à sua chamada. Atribuir um novo número a ele não reatribui a variável de quem chamou a função:

let score = 5;
function reset(s) {
  s = 0;
}
reset(score);

A chamada copia o valor 5 para s. A atribuição muda s para 0, e score permanece 5. Números, cadeias de caracteres e booleanos seguem essa regra de cópia de valor. O código externo não pode ler s diretamente; uma função aninhada pode manter acesso a ele por meio de um fechamento.

Altere um vetor por meio de uma referência copiada

Um valor de vetor é uma referência a um vetor. Passar esse valor copia a referência, então quem chamou a função e o parâmetro podem acessar o mesmo vetor:

const list = [1, 2];
function addItem(arr) {
  arr.push(3);
}
addItem(list);

list agora é [1, 2, 3]. A função não reatribuiu list; ela alterou o vetor que ambos os nomes acessam. Uma declaração const impede a substituição da referência armazenada, não a alteração do conteúdo do vetor.

Compare com uma reatribuição local:

function clearLocal(arr) {
  arr = [];
}
clearLocal(list);

Isso faz apenas arr apontar para um novo vetor vazio. list ainda acessa [1, 2, 3]. Pergunte-se se uma operação altera um vetor existente, como faz push, ou atribui um valor diferente a um nome, como faz =.

Retorne um novo vetor quando a entrada deve permanecer intacta

function withItem(arr, item) {
  return arr.concat(item);
}

withItem([1, 2], 3) produz [1, 2, 3] como um novo vetor. O vetor de entrada permanece [1, 2]. Isso torna a função útil quando quem a chama precisa tanto da lista antiga quanto da lista ampliada. Deixe claras pelo nome e pelo comportamento da função as alterações que ela pretende fazer na entrada, para que outras pessoas possam usá-la de forma previsível.

Valores padrão tornam uma entrada opcional; parâmetros rest permitem que uma chamada forneça muitas entradas. A sintaxe de espalhamento conecta um vetor existente a uma função que espera argumentos separados.

Aplique um valor padrão apenas para undefined

function greet(name = "friend") {
  return "Hello, " + name;
}

Tanto greet() quanto greet(undefined) retornam “Hello, friend”. greet(null) retorna “Hello, null”, e greet("") retorna “Hello, ”. Um valor padrão é aplicado para undefined, não para todo valor que parece vazio.

Valores padrão são avaliados quando uma chamada precisa deles. Eles podem usar parâmetros anteriores: function makeBox(width, height = width) { return width * height; } retorna 9 para makeBox(3) e 12 para makeBox(3, 4). O segundo argumento explícito substitui o valor padrão nessa chamada.

Coloque as entradas obrigatórias primeiro. Com function total(amount, rate = 0.25) { return amount + amount * rate; }, total(80) retorna 100 e total(80, 0.5) retorna 120. Inverter os parâmetros faria a chamada comum com a taxa padrão exigir total(undefined, 80).

Código antigo pode usar level = level || 50;. Isso também substitui 0, false e uma cadeia de caracteres vazia porque são valores avaliados como falsos. Um parâmetro padrão preserva esses valores: function setVolume(level = 50) { return level; } retorna 0 para setVolume(0) e 50 para setVolume(undefined).

Reúna argumentos com rest

function sum(...numbers) {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
}

sum(1, 2, 3) coloca [1, 2, 3] em numbers e retorna 6. sum() fornece a ele um vetor vazio, então o laço não adiciona nada e retorna 0. Um parâmetro rest é um vetor verdadeiro, pronto para métodos de vetor ou iteração.

Uma entrada fixa pode vir antes de rest: em function log(label, ...values) { console.log(label, values); }, log("scores", 7, 9) atribui a label a cadeia “scores” e a values o vetor [7, 9]. Apenas um parâmetro rest é permitido, e ele deve vir por último; caso contrário, JavaScript não consegue atribuir os argumentos restantes sem ambiguidade usando essa sintaxe.

Expanda argumentos com espalhamento

Math.max(...[3, 7, 2]) recebe três números e retorna 7. Math.max([3, 7, 2]) recebe um vetor e retorna NaN. Os três pontos são idênticos na página, mas a sintaxe ao redor indica qual função eles desempenham.

Funções comuns também têm um objeto arguments que contém os argumentos passados a elas. Ele é semelhante a um vetor, com entradas indexadas e um tamanho, mas não é um vetor verdadeiro e não tem seus próprios métodos map ou filter. Funções de seta não têm seu próprio arguments. Prefira um parâmetro rest em código novo que precise de uma lista flexível de entradas.

Um valor retornado é a saída que outro código recebe de uma chamada. A impressão pode mostrar o mesmo valor na tela, mas fornece um resultado diferente a quem chamou a função, a menos que ela também o retorne.

Use a chamada como valor

function double(n) {
  return n * 2;
}
const x = double(5) + 1;

double(5) retorna 10, então a atribuição é avaliada como 10 mais 1 e armazena 11. Uma chamada pode aparecer em qualquer lugar onde seja necessário um valor apropriado. double(double(3)) primeiro obtém 6 da chamada interna e depois retorna 12 da externa. Math.round(double(2.3)) dobra o valor para 4,6 e arredonda para 5.

return também encerra imediatamente a chamada atual. Uma cláusula de guarda trata um caso especial antes do trabalho principal:

function safeDivide(a, b) {
  if (b === 0) {
    return null;
  }
  return a / b;
}

safeDivide(6, 0) retorna null e nunca chega à divisão. safeDivide(6, 2) pula a cláusula de guarda e retorna 3. Coloque a condição antes da operação que ela protege.

Separe o retorno da exibição

function addLog(a, b) {
  console.log(a + b);
}

addLog(2, 3) imprime 5, mas seu valor de retorno é undefined. Consequentemente, addLog(2, 3) * 2 imprime 5 e é avaliado como NaN. Uma função que chega ao fim sem um retorno, ou executa apenas return;, retorna undefined. A exibição no console é um efeito colateral, não a saída numérica utilizável da chamada.

Se quem chama a função precisa de uma soma, escreva return a + b;. Depois, quem chama pode escolher entre imprimi-la, armazená-la ou usá-la em outro cálculo. Isso mantém as decisões de exibição fora de um cálculo reutilizável.

Mantenha a expressão retornada na mesma linha

function brokenAdd(a, b) {
  return
  a + b;
}

JavaScript encerra a instrução return na quebra de linha. A função retorna undefined; a expressão posterior nunca é alcançada. Para uma expressão longa, comece-a ou abra um parêntese na linha de return e continue abaixo.

Reúna vários resultados em um valor

Uma chamada retorna um valor, mas esse valor pode ser um vetor:

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [low, high] = minMax([4, 9, 1]);

O vetor retornado é [1, 9]. A desestruturação atribui sua primeira entrada a low e a segunda a high. Ainda há um único valor retornado, que contém dois resultados úteis.

Uma função pura calcula sua saída a partir de seus argumentos e não altera nada fora de si. double é pura. Imprimir, atualizar uma variável externa e modificar um vetor de entrada são efeitos colaterais. Cálculos puros são fáceis de verificar com exemplos de entrada e saída; efeitos colaterais devem ficar em funções com nomes claros, onde o programa precisa de alterações visíveis.

Quando uma função chama outra, a função que fez a chamada pausa até que essa chamada retorne. A pilha de chamadas registra o trabalho não concluído para que a execução possa continuar no lugar certo.

Adicione e remova quadros de chamada

Cada chamada ativa tem um quadro que contém seus parâmetros, variáveis locais e o ponto de retorno. Uma nova chamada vai para o topo da pilha; um retorno remove esse quadro do topo.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}
sumOfSquares(3, 4);

Primeiro, sumOfSquares começa com a igual a 3 e b igual a 4. Ela chama square(3), que retorna 9 e termina. Depois, square(4) é executada e retorna 16. A adição pausada pode agora terminar como 9 mais 16, e sumOfSquares retorna 25. As duas chamadas de square não se sobrepõem nesse rastreamento.

Cada chamada recebe novos parâmetros e variáveis locais. Chamar a mesma função duas vezes não reutiliza o estado numérico local de uma chamada anterior. Mesmo quando uma função chama a si mesma, a nova chamada tem seu próprio quadro.

Reduza um problema com recursão

Uma função recursiva chama a si mesma. Um caso base termina sem outra chamada a si mesma; um caso recursivo dá um passo em direção a esse caso base.

function factorial(n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

Para entradas inteiras não negativas, isso multiplica os inteiros até chegar a 1. Rastreie factorial(4) em duas direções:

1. factorial(4) espera por factorial(3).
2. Essa chamada espera por factorial(2).
3. Essa chamada espera por factorial(1).
4. O caso base retorna 1.
5. As chamadas em espera retornam 2, depois 6 e depois 24.

A multiplicação na chamada com n igual a 4 acontece depois que a chamada menor retorna. Seu próprio n permaneceu 4 enquanto ela esperava.

Um caso base precisa ser alcançável. Usar apenas n === 1 falha para uma entrada inicial de 0 se cada chamada recursiva subtrair 1: os valores se tornam negativos e nunca chegam a 1. n <= 1 cobre tanto 0 quanto 1. Sem um caminho de parada, chamadas repetidas esgotam a pilha. Chrome e Node.js informam “RangeError: Maximum call stack size exceeded”; o Firefox usa “InternalError: too much recursion”.

Reconheça uma cópia menor da mesma tarefa

function countItems(list) {
  let count = 0;
  for (const item of list) {
    if (Array.isArray(item)) {
      count += countItems(item);
    } else {
      count += 1;
    }
  }
  return count;
}

countItems([1, [2, 3], [4, [5]]]) retorna 5. Cada vetor aninhado faz a mesma pergunta de contagem para uma lista menor. Um laço também é adequado para um fatorial simples; a recursão é especialmente útil quando os próprios dados são aninhados.

Se uma chamada falhar, leia o rastreamento de pilha a partir da chamada mais recente no topo. As entradas seguintes mostram quais chamadas ainda não concluídas levaram até ela. Entradas repetidas para uma função podem revelar uma recursão que não parou.

O escopo de uma variável é a região onde seu nome pode ser usado. O escopo permite que funções mantenham seus dados de trabalho separados e ainda usem entradas e valores do código ao redor.

Delimite as declarações

let e const têm escopo de bloco. Um bloco é uma região dentro de chaves, como um corpo de if, um corpo de laço ou um corpo de função:

if (true) {
  const msg = "hi";
  console.log(msg);
}

A impressão funciona dentro do bloco. Adicionar console.log(msg); depois dele gera um ReferenceError porque esse código externo não consegue acessar a declaração. Outra declaração externa com o mesmo nome seria uma variável diferente.

Parâmetros e variáveis dentro de uma função são locais a ela. Em function f() { let temp = 1; }, o código externo não consegue ler temp. Duas funções podem ter, cada uma, um total local sem compartilhá-lo. Cada chamada começa com novas variáveis locais; uma função aninhada retornada pode preservar o acesso posteriormente por meio de um fechamento.

Leia declarações antigas com var

function test() {
  if (true) {
    var x = 1;
  }
  return x;
}

test() retorna 1 porque var ignora o limite do if. Substituí-lo por let x = 1; faz o retorno falhar: o x do bloco não está disponível ali. Da mesma forma, for (let i = 0; i < 3; i++) {} mantém i dentro do laço, enquanto um var i permanece disponível na função ou no script que o contém após o laço e contém 3.

Procure para fora a partir da posição em que a função foi escrita

Escopos são aninhados. Uma função interna pode usar nomes nos escopos que a envolvem, mas o código externo não pode procurar nas variáveis locais de uma função interna. Isso é escopo léxico: o lugar onde o código é escrito determina os nomes disponíveis.

const level = "global";
function show() {
  return level;
}
function run() {
  const level = "local";
  return show();
}

run() retorna “global”. show foi definida fora de run, então o escopo que a envolve contém o level externo. Chamá-la de dentro de run não lhe dá acesso ao level local de quem a chamou.

Mantenha o estado compartilhado sob controle

Uma variável de nível superior em um script comum é global e pode ser acessada por funções desse script. Variáveis globais compartilhadas podem fazer tarefas independentes afetarem umas às outras; scripts na mesma página também podem entrar em conflito por causa de nomes. Passar entradas e retornar saídas mantém as dependências visíveis.

Declare toda variável. No modo estrito, count = 5; gera um ReferenceError se não houver uma declaração acessível. Sem o modo estrito, uma atribuição assim pode criar uma variável global acidental. Um script pode ativar o modo estrito com "use strict"; em seu início; módulos o ativam automaticamente. Prefira const para valores que não são reatribuídos e let quando a reatribuição for necessária.

O mesmo nome pode aparecer em vários escopos. JavaScript encontra a declaração relevante procurando para fora a partir do código atual e parando na primeira correspondência.

Siga a cadeia de escopos

let x = 1;
function f() {
  let x = 2;
  return x;
}

f() retorna 2. A declaração local sombreia o x externo, então a busca para dentro de f. O valor externo permanece 1. Um parâmetro pode sombrear um nome da mesma maneira. Se nenhum escopo da cadeia declarar um nome, sua leitura gera um ReferenceError.

Uma atribuição não declara uma nova variável. Com let count = 0; function add() { count = count + 1; }, add encontra a declaração externa e a altera. Inserir let muda o significado: cria um novo nome local, que pode ocultar justamente o valor que você pretendia ler.

Separe o registro da inicialização

A elevação descreve como as declarações são registradas antes da execução de seu escopo. Seu comportamento antes da inicialização é diferente:

Por exemplo, console.log(a); var a = 5; imprime undefined. A atribuição de 5 ainda não aconteceu. Já console.log(b); let b = 5; falha. O intervalo em que o nome léxico existe, mas não pode ser acessado, é sua zona morta temporal, frequentemente abreviada como TDZ.

Rastreie o sombreamento antes de uma linha de declaração

let n = 10;
function f() {
  console.log(n);
  let n = 20;
}
f();

O n interno sombreia o externo em todo o corpo da função, inclusive antes da linha em que a declaração foi escrita. Em console.log(n), esse nome interno ainda está em sua TDZ, então a chamada gera um ReferenceError. JavaScript não ignora uma declaração local não inicializada para recorrer ao valor externo 10.

O mesmo problema aparece em let count = count + 1; dentro de add. O lado direito lê o novo count local antes de sua inicialização. Se a intenção for atualizar um contador externo, use uma atribuição sem uma nova declaração. Se a intenção for calcular um valor separado, dê a ele outro nome e leia explicitamente o contador externo.

Distinga reatribuição de mutação

let e const não podem declarar novamente o mesmo nome em um escopo; fazer isso gera um SyntaxError. Um escopo interno pode declarar seu próprio nome, o que é sombreamento. var permite declarações repetidas em seu escopo, tornando mais difícil perceber a reutilização acidental de nomes.

const impede a reatribuição de sua variável. Ele não congela um vetor:

const list = [];
list.push(1);

A referência armazenada em list permanece a mesma enquanto o vetor muda para [1]. list = []; tentaria substituir a referência armazenada e falharia.

Mantenha uma declaração no menor escopo que precisa dela. Nomes distintos para tarefas distintas reduzem a necessidade de acompanhar mentalmente o sombreamento, e inicializar antes do uso evita falhas na TDZ.

Uma função mantém uma ligação com o escopo onde foi criada. A função e esse acesso preservado formam um fechamento. A ligação se torna especialmente útil quando uma função aninhada é retornada e chamada depois que sua chamada externa terminou.

Dê memória a uma função retornada

function makeCounter() {
  let count = 0;
  return function () {
    count = count + 1;
    return count;
  };
}
const counter = makeCounter();

A chamada de makeCounter cria count, cria uma função interna e retorna essa função. Ela ainda não executa o corpo interno. counter agora contém o valor da função. Sua primeira chamada altera o count preservado de 0 para 1 e retorna 1. Sua chamada seguinte altera a mesma variável para 2 e retorna 2.

O quadro de pilha da chamada externa terminou, mas a variável capturada permanece acessível. Uma variável local que não tem mais nenhum uso acessível pode ser liberada; aqui, a função interna que pode ser chamada ainda precisa dela. O acesso pelo fechamento permanece após um retorno sem tornar a variável global.

Crie memórias independentes com chamadas separadas

const a = makeCounter();
const b = makeCounter();
a();
a();
b();

Os resultados são 1, 2 e 1. Cada chamada da fábrica criou um count diferente. As duas funções retornadas por chamadas separadas têm o mesmo código, mas ambientes preservados diferentes.

Copiar uma referência a uma função retornada funciona de outra maneira. Se const alias = a;, então alias() usa o contador existente de a; não chama makeCounter nem cria outro ambiente.

Mantenha variáveis, não cópias fixas

let greeting = "Hi";
const say = () => greeting;
greeting = "Hello";

say() retorna “Hello”. O fechamento lê a variável quando é executado, então uma atualização posterior fica visível. Ele não armazena uma cópia fixa de “Hi” no momento da criação.

O código externo não pode acessar diretamente o count local, e counter.count é undefined. Apenas código com acesso a esse ambiente léxico pode lê-lo ou atualizá-lo. Chamar o contador de outra função não muda qual contador ele usa.

Compartilhe estado dentro de uma chamada externa

function makeWallet() {
  let balance = 0;
  return [
    function deposit(n) { balance += n; return balance; },
    function getBalance() { return balance; }
  ];
}
const [deposit, getBalance] = makeWallet();
deposit(50);
deposit(20);

getBalance() retorna 70 porque as duas funções retornadas foram criadas na mesma chamada e se referem ao mesmo balance. Outra chamada de makeWallet() cria um saldo separado.

Uma fábrica de funções usa o acesso de um fechamento para criar funções com configurações ou estado próprios. Quem chama a fábrica fornece a configuração uma vez e depois usa a função retornada muitas vezes.

Configure uma função com um parâmetro

function makeMultiplier(factor) {
  return (n) => n * factor;
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);

double(5) retorna 10 e triple(5) retorna 15. Cada função de seta retornada mantém o factor de sua própria chamada da fábrica. A função externa configura o comportamento; a interna executa o trabalho repetido.

A forma compacta é const makeMultiplier = (factor) => (n) => n * factor;. Duas setas significam duas criações de função, não dois cálculos consecutivos sobre um número. makeMultiplier(4)(5) primeiro retorna uma função configurada com 4 e depois a chama com 5 para obter 20.

Aplique uma regra ao estado privado

function makeLimiter(max) {
  let used = 0;
  return function () {
    if (used >= max) {
      return false;
    }
    used = used + 1;
    return true;
  };
}
const tryLogin = makeLimiter(3);

As três primeiras chamadas retornam true e incrementam used. A quarta retorna false antes de incrementar. used é local à chamada da fábrica, então o código externo não pode redefini-la por esse nome. A função retornada controla quais alterações estão disponíveis. Outro limitador teria sua própria variável used e seu próprio máximo.

Analise funções criadas em laços

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}

O laço cria três funções, mas apenas um var i. Após o laço, essa variável contém 3. Chamar qualquer função armazenada agora retorna 3 porque cada fechamento lê a mesma vinculação atual. Criar uma função não avalia seu corpo nem guarda uma cópia fixa do i atual.

Alterar o cabeçalho para let i = 0 dá ao laço uma vinculação separada para cada iteração. As funções armazenadas retornam então 0, 1 e 2. A mesma distinção explica a impressão adiada: uma função de retorno de setTimeout que lê var i depois do laço vê o valor final, enquanto a versão com let mantém o valor de cada iteração.

Reconheça uma expressão imediatamente invocada

Código antigo muitas vezes cria um escopo de função privado e o executa imediatamente:

(function () {
  var hidden = 1;
  console.log(hidden);
})();

Isso é uma expressão de função imediatamente invocada, ou IIFE. Os parênteses externos criam uma expressão de função; os parênteses finais a chamam. hidden pertence a essa função, mantendo-se fora do escopo global ao redor. É um padrão comum em código escrito antes das declarações com escopo de bloco e dos módulos.

O acesso preservado também afeta a memória. Um fechamento que pode ser chamado e precisa de um vetor grande mantém esses dados acessíveis. Quando a função e seus dados capturados deixam de estar acessíveis, eles podem ser liberados. Armazene fechamentos de longa duração de forma consciente quando sua memória fizer parte da tarefa.

Uma função de retorno é uma função fornecida como argumento para que outra função a chame. Ela permite que a função receptora cuide da tarefa geral enquanto quem faz a chamada fornece uma ação ou teste específico.

Passe uma ação para um laço

function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i);
  }
}
repeat(3, (i) => console.log(i));

repeat controla o laço e escolhe os valores 0, 1 e 2. A função de seta determina o que fazer com cada valor: imprimi-lo. Cada action(i) chama a função fornecida com o número daquela iteração.

Você pode passar uma função existente ou escrever uma no ponto de uso. repeat(2, sayHi) passa a função nomeada. repeat(2, (i) => console.log("Round " + (i + 1))) imprime “Round 1” e “Round 2”. Uma função de retorno pode ignorar argumentos de que não precisa.

Passe o valor, sem chamar antes

repeat(3, sayHi()) avalia sayHi() ao preparar os argumentos. Se sayHi apenas imprime, seu valor de retorno é undefined, então repeat recebe esse valor como action. A chamada posterior de action(i) falha com um TypeError porque undefined não pode ser chamado.

Use repeat(3, sayHi) para passar a função. Se a chamada posterior precisar de argumentos escolhidos, passe uma função envoltória como () => sayHi() para que a chamada aconteça dentro do corpo da função de retorno. Criar uma função e invocá-la são etapas separadas.

Verifique quais argumentos a função receptora fornece

Funções de retorno de vetores muitas vezes recebem mais de um argumento: o elemento, o índice e o vetor inteiro. Passar uma função existente só é seguro quando essas entradas correspondem aos significados de seus parâmetros.

["1", "2", "3"].map(parseInt);

Isso retorna [1, NaN, NaN]. parseInt aceita um segundo argumento para a base numérica, então o índice do vetor altera seu comportamento. Use ["1", "2", "3"].map((s) => parseInt(s, 10)) para escolher explicitamente a base 10, ou .map(Number) para converter essas cadeias de caracteres.

Retorne uma resposta à função receptora

function countIf(arr, test) {
  let n = 0;
  for (const x of arr) {
    if (test(x)) {
      n++;
    }
  }
  return n;
}

countIf([3, 8, 12, 5], (x) => x > 4) retorna 3. A função de retorno responde a uma pergunta para cada item; countIf usa cada resposta para decidir se incrementa o contador. Compare com repeat, cujo laço ignora o valor de retorno da função de retorno. O código ou a documentação da função receptora informa tanto os argumentos quanto a função do resultado.

Funções de retorno podem ser executadas imediatamente ou mais tarde. repeat e os métodos de vetor as chamam de forma síncrona antes de retornar. setTimeout(sayHi, 2000) agenda uma para mais tarde enquanto o código seguinte continua imediatamente. Ser uma função de retorno descreve como uma função é fornecida, não quando ela deve ser executada.

Uma função de ordem superior recebe uma função, retorna uma função ou faz ambas as coisas. O valor de função fornece o comportamento, enquanto a função de ordem superior gerencia um padrão reutilizável.

Escreva o padrão uma vez

function myMap(arr, transform) {
  const result = [];
  for (const item of arr) {
    result.push(transform(item));
  }
  return result;
}

myMap([1, 2, 3], (n) => n * n) retorna [1, 4, 9]. O laço e a construção do vetor de saída permanecem os mesmos; a função de retorno decide como cada entrada muda. Um filtro correspondente adiciona um item apenas quando test(item) é avaliado como verdadeiro. Com [4, 7, 10, 3] e (n) => n % 2 === 0, esse padrão mantém [4, 10].

Escolha o contrato de função de retorno necessário

map, filter e find não modificam o vetor de entrada por si mesmos, mas as funções de retorno ainda podem modificá-lo. Retornar um novo vetor de um método não torna puras todas as funções de retorno fornecidas.

Transporte um resultado por uma redução

[5, 10, 15].reduce((total, n) => total + n, 0);

O acumulador inicial é 0. A função de retorno retorna 5 para o primeiro item, 15 para o segundo e 30 para o terceiro. Cada retorno se torna o total da chamada seguinte. O método retorna 30 após o último item. Um vetor vazio sem acumulador inicial faz reduce gerar um TypeError; um valor inicial explícito também define o resultado útil para uma entrada vazia.

Retornar vetores torna o encadeamento possível. [3, 8, 12, 5].filter((n) => n > 4).map((n) => n * 2) primeiro mantém [8, 12, 5] e depois o transforma em [16, 24, 10]. Leia a cadeia na ordem de execução, da esquerda para a direita.

Forneça uma regra de ordenação numérica

Sem um comparador, sort compara entradas como cadeias de caracteres. Portanto, [10, 9, 1].sort() produz [1, 10, 9]. Para ordem numérica crescente, use .sort((a, b) => a - b). Um retorno negativo coloca a primeiro, um retorno positivo coloca b primeiro e zero deixa o par equivalente para a ordenação. Ao contrário de map e filter, sort reorganiza seu vetor de entrada.

Verifique os valores retornados

[1, 2, 3].map((n) => { n * 2; }) produz [undefined, undefined, undefined] porque o bloco não tem retorno. Usar forEach para construir um novo resultado por atribuição também falha se você esperar que o próprio método retorne um vetor. Escolha map para transformação e forEach para ações cujas saídas coletadas não são necessárias.

Um método de ordem superior expressa claramente um padrão conhecido. Um laço simples continua útil quando o trabalho precisa de break ou não se encaixa no contrato do método.

Uma função pode retornar uma nova função que mantém uma função existente na memória. Funções envoltórias, composição e aplicação parcial usam esse padrão para adaptar o comportamento sem copiar o corpo da função original.

Envolva uma chamada e preserve seu resultado

function logged(fn) {
  return (...args) => {
    console.log("Calling with", args);
    const result = fn(...args);
    console.log("Result", result);
    return result;
  };
}
const add = (a, b) => a + b;

logged(add) cria uma função que mantém add como fn. Chamar logged(add)(2, 3) reúne os argumentos, repassa-os para add, imprime o valor retornado e retorna 5. Rest reúne as entradas da função envoltória; o espalhamento as repassa. O retorno final mantém a saída disponível para cálculos posteriores.

Já logged(add(2, 3)) passa o número 5. Chamar essa função envoltória mais tarde tenta chamar 5 e gera um TypeError. Há duas etapas: configurar a função envoltória com uma função e depois chamar a função retornada com entradas.

Mantenha estado ao redor de uma operação

function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (!done) {
      done = true;
      result = fn(...args);
    }
    return result;
  };
}

Para uma operação que retorna normalmente, a primeira chamada executa fn e armazena seu resultado. Chamadas posteriores retornam esse valor armazenado sem executar fn novamente, mesmo que seus argumentos sejam diferentes. O booleano registra se a operação foi executada; verificar se o resultado é avaliado como verdadeiro estaria errado quando um resultado válido fosse 0 ou false. Cada chamada de once cria seu próprio indicador e resultado armazenado.

Passe um resultado para outra função

const compose = (f, g) => (x) => f(g(x));
const addOne = (n) => n + 1;
const square = (n) => n * n;

compose(square, addOne)(3) executa addOne(3) primeiro e depois eleva 4 ao quadrado para retornar 16. compose(addOne, square)(3) primeiro eleva 3 ao quadrado e depois adiciona 1, retornando 10. A função mais próxima da entrada é executada primeiro, então a ordem dos argumentos de compose importa.

Fixe alguns argumentos antecipadamente

function partial(fn, ...fixed) {
  return (...rest) => fn(...fixed, ...rest);
}
const greetWith = (greeting, name) => greeting + ", " + name;
const hello = partial(greetWith, "Hello");

hello("Ana") chama greetWith("Hello", "Ana") e retorna “Hello, Ana”. Essa função auxiliar de aplicação parcial coloca os argumentos fixos primeiro e os argumentos posteriores depois; mudar essa ordem altera a chamada subjacente.