5

Estava vendo injeção de dependência em JavaScript e me deparei com a seguinte sintaxe:

() => () => {}

Sei que () => {} é uma arrow function que, em resumo, é uma maneira diferente de criar uma função em que não é necessário dar um nome, que nos parênteses ficam os parâmetros e que nas chaves fica o código da função.

Porém não consigo entender quando há 2 parenteses:

() => () => {}

Vocês podem me explicar para que serve o primeiro () => no exemplo acima?

Um exemplo:

Arquivo calcular.js:

const Celular = (carregador) => () => {
    const carregar = (){
        return carregador.enviaEnergia()
    }
    return{
        carregar
    }
}
modules.exports = celular

Outro arquivo:

const Celular = require('./celular')
const Carregador = require('./carregador')
const carregador = Carregador(5)
const celular = Celular(carregador)()

Sei que carregador é um modulo qualquer que irá fazer injeção dentro de dependência em celular.

1
  • pode colocar um exemplo na sua pergunta? Commented 19/05/2020 às 22:15

2 Respostas 2

6

Agora entendi... vi isso num curso, esse recurso chama-se curry ou curryng.

Basicamente é usado quando uma function recebe mais de um parâmetro e, no lugar de passar todos os parâmtros juntos para dentro da function, passamos cada parâmtro separado e retornamos uma function após cada parâmetro.

No seu exemplo não fez muito sentido porque o segundo parâmetro foi omitido, sendo só (), mas se houvesse um parâmetro seria mais fácil de entender.

Para ficar mais fácil, vamos portar uma function para curry para ver a diferença:

var soma = (a, b) => { return a + b; }

var somaCurried = (a) => (b) => { return a + b; }

alert(soma(2,3));

alert (somaCurried(2)(3));

Veja que o resultado é o mesmo, mas na prática, a segunda function retorna uma function após receber o primeiro valor, e em seguida, passa o resultado para a segunda.

Quando vi isso, foi explicado algumas aplicações que sinceramente não precebi bem onde usar, mas uma me chamou a atenção: injetar um valor em uma das functions em cadeia sem alterar a function principal. Talvez seja esse o objetivo desse seu exemplo.

Tentei mostrar um exemplo pegando parte do seu código e mostrando como aplicar:

var CelularFunction = function(carregador, aparelho) {
  return "Voltagem: " + carregador + ", aparelho:" + aparelho;
};


var CelularCurry = (carregador) => (aparelho) => {
    return "Voltagem: " + carregador + ", aparelho:" + aparelho;
}

// criei uma nova func "injetando" o primeiro valor:
var CelularInject = CelularCurry("500V");

alert(CelularFunction("110v", "Samsung"));
alert(CelularCurry("220v")("Nokia"));

// faço call da function só com o segundo parâmetro, que na prática vai ser passado para a segunda function
alert(CelularInject("Motorola"));

Veja que nesse exemplo, a function CelularInject, "injeta" um valor para o primeiro parâmetro da cadeia, que vai para a primeira function, e em seguida chama a segunda. O resultado pode ser visto ao executar.

Espero que dê pra entender a ideia. cada ()=> com ou sem parâmetro gera uma function na cadeia de curry, que vai retornar um valor, e como vimos, pode ser manipulada separadamente, o que daria trabalho para fazer numa function comum.

5

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 closures 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 só por achar "bonito", o que é o caso aí.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .