Funções mais legíveis em Javascript com options object

#javascript #cleancode #programming

Escrever funções legíveis, fáceis de entender, reutilizáveis e simples de se usar é uma ótima prática em qualquer linguagem de programação. Em Javascript uma das estratégias pra se fazer isso é usar o design pattern objeto de opções ou options object.

Usando options object, funções tem como parâmetro apenas um objeto que possui todos os argumentos, isso traz algumas vantagens sobre o modo padrão e mais comumente usado, os parâmetros tem os nomes mais visíveis para outras pessoas lendo o código, facilita o uso de argumentos padrão e a função fica mais resiliente à mudanças.

Usando options object na prática

Como exemplo, vamos declarar uma função de criação de um usuário. Ela não precisa receber a data de nascimento ou CPF e tem por padrão o envio de materiais de marketing como verdadeiro.

function addUser(
    name, 
    email, 
    password,
    birth_date = null, 
    username, 
    cpf = null, 
    receive_marketing = true
) { ... }

Ao chamar essa função, alguns problemas são muito aparentes, os primeiros argumentos são fáceis de se identificar, porém, passar undefined como argumento é péssimo para a legibilidade, incoveniente, além de abrir uma porta para comportamentos inesperados e o false não diz muito sobre seu significado sem documentação, ou uma análise da declaração da função, qualquer pessoa lendo isso pela primeira vez vai ter dificuldade de entender o que cada parâmetro é

addUser(
    'Jolyne Kujo', 
    'jolyne@example.com', 
    '0930ce1c372fda803f16af5553096fda744f19ca',
    undefined,
    'jojolyne',
    undefined,
    false
)

Redeclarando essa função usando um option object, conseguimos resolver esses problemas

function addUser({
    name, 
    email, 
    password, 
    birth_date = null, 
    username, 
    cpf = null, 
    receive_marketing = true
}) { ... }

Agora, quando esperamos usar os argumentos padrão, não é necessário colocar undefined em nenhuma posição, o booleano sobre recebimento de marketing é claro sem necessidade de mais nenhuma informação e caso seja necessário adicionar mais parâmetros, não há preocupação em precisar alterar todas as outras chamadas para ela (por esse mesmo motivo, alterações devem ser feitas com precaução)

addUser({
    username: 'jojolyne',
    name: 'Jolyne Kujo', 
    email: 'jolyne@example.com', 
    password: '0930ce1c372fda803f16af5553096fda744f19ca',
    receive_marketing: false
})

Como um exemplo do mundo real, a biblioteca axios utiliza esse design pattern extensivamente, uma implementação que mostra o tamanho do impacto de uma mudança simples

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

Onde não usar

Assim como qualquer outro design pattern, options object não é uma bala de prata e apesar de ser muito útil, deve ser usado com precaução e onde sua aplicação faz sentido, funções que tem um nome expressivo e recebem apenas um argumento, sem expectativa de mudança são um exemplo onde esse pattern mais atrapalha que ajuda.

Nessa função é muito claro que o único argumento passado deve ser o id de um usuário, usar um options object apenas deixaria ela mais verbosa

function getUserById(id) { ... }

Conclusão

Escrever boas funções é um grande desafio, e conhecer novas ferramentas pra isso é sempre útil espero ter te ajudado com um novo conhecimento, Aproveito para recomendar mais textos em meu blog, como este sobre funções de ordem superior em Javascript. Vale a pena conferir!