Skip to main content
adicionou 41 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

Note que no exemplo acima deixamos de retornar uma função, mas sim um objeto com várias funções. Note também que cada contador tem um estado diferente, o que se deve ao sistema de closujes do JavaScriptclosures do JavaScript. Cada função tem o seu próprio closure, o que permite esse tipo de armazenamento de estado.

No entanto, a legibilidade é comprometida. Eu pessoalmente sempre irei optar por usar declarações de funções em casos como esse. Ademais, arrow functions não têm esse objetivo. Às vezes as pessoas usam algo desnecessariamente algo só por achar "bonito", o que é o caso aí.

Note que no exemplo acima deixamos de retornar uma função, mas sim um objeto com várias funções. Note também que cada contador tem um estado diferente, o que se deve ao sistema de closujes do JavaScript. Cada função tem o seu próprio closure, o que permite esse tipo de armazenamento de estado.

No entanto, a legibilidade é comprometida. Eu pessoalmente sempre irei optar por usar declarações de funções em casos como esse. Ademais, arrow functions não têm esse objetivo. Às vezes as pessoas usam algo desnecessariamente algo só por achar "bonito", o que é o caso aí.

Note que no exemplo acima deixamos de retornar uma função, mas sim um objeto com várias funções. Note também que cada contador tem um estado diferente, o que se deve ao sistema de closures do JavaScript. Cada função tem o seu próprio closure, o que permite esse tipo de armazenamento de estado.

No entanto, a legibilidade é comprometida. Eu pessoalmente sempre irei optar por usar declarações de funções em casos como esse. Ademais, arrow functions não têm esse objetivo. Às vezes as pessoas usam algo desnecessariamente só por achar "bonito", o que é o caso aí.

Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

Essa sintaxe não implica injeção de dependência, apenas significa que uma função está retornando outra. De modo mais explícito, o que está ocorrendo é o seguinte:

function Carregar() {
  return function() {

  };
}

No entanto, esse tipo de construção te permite alcançar alguns objetivos com maior facilidade em razão do sistema de closures do JavaScript. O padrão acima também recebe o nome de função fábrica ou factory function em inglês, em que Carregar é a fábrica. Nesse caso, Carregar é a função fábrica, que sempre que for chamada criará uma nova função, retornando-a.

De algum modo, esse padrão se assemelha levemente a uma classe, que criará uma instância de algo. Nesse caso, a factory function sempre criará uma nova função.

Você pode atingir várias coisas com esse tipo de construção, como criar algum tipo de contador que mantém um estado interno e privado:

function createCounter() {
  let current = 0;
  
  function getCurrent() {
    return current;
  }
  
  function increment(step = 1) {
    current += step;
  }
  
  return {
    getCurrent,
    increment
  };
}

const counter1 = createCounter();
counter1.increment(5);
counter1.increment(3);

const counter2 = createCounter();
counter2.increment(4);

console.log('Valor do contador 1:', counter1.getCurrent()); // 8
console.log('Valor do contador 2:', counter2.getCurrent()); // 4

Note que no exemplo acima deixamos de retornar uma função, mas sim um objeto com várias funções. Note também que cada contador tem um estado diferente, o que se deve ao sistema de closujes do JavaScript. Cada função tem o seu próprio closure, o que permite esse tipo de armazenamento de estado.

Isso também pode ser usado como forma de atingir a injeção de dependência em funções, de modo que você usa a função superior para passar as dependências e a(s) função(ões) retornada(s) não precisam mais de receber esse tipo de valor em seus argumentos. Veja a diferença:

// A nossa "dependência":
const consoleLogSender = {
  send: (message) => console.log(message)
};

function sum(sender, a, b) {
  const result = a + b;
  sender.send(a + b);
}

// Para usar:
sum(consoleLogSender, 2, 2); // 4
sum(consoleLogSender, 3, 5); // 8

Agora, com esse padrão de factory function:

// A nossa "dependência":
const consoleLogSender = {
  send: (message) => console.log(message)
};

function createSum(sender) {
  return function sum(a, b) {
    const result = a + b;
    sender.send(a + b);
  }
}

const consoleLogSum = createSum(consoleLogSender);

consoleLogSum(2, 2); // 4
consoleLogSum(3, 5); // 8

Note que o resultado é o mesmo, mas algumas pessoas preferem essa segunda maneira, principalmente buscando uma arquitetura desacoplada, algo em partes atingível pela injeção de dependência.

Agora, voltando as arrow functions, o código acima pode ser escrito como:

// A nossa "dependência":
const consoleLogSender = {
  send: (message) => console.log(message)
};

const createSum = (sender) => (a, b) =>
  sender.send(a + b);

const consoleLogSum = createSum(consoleLogSender);

consoleLogSum(2, 2); // 4
consoleLogSum(3, 5); // 8

No entanto, a legibilidade é comprometida. Eu pessoalmente sempre irei optar por usar declarações de funções em casos como esse. Ademais, arrow functions não têm esse objetivo. Às vezes as pessoas usam algo desnecessariamente algo só por achar "bonito", o que é o caso aí.