DEV Community: Pedro Tashima

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

Pedro Tashima — Sun, 19 Sep 2021 22:22:24 +0000

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!

Referências

https://www.freecodecamp.org/news/elegant-patterns-in-modern-javascript-roro-be01e7669cbd/

https://www.codereadability.querycom/what-are-javascript-options-objects/#:~:text=An options object is a,all of which are optional.

https://www.tinyblog.dev/blog/2020-07-13-javascript-roro-pattern/

https://github.com/axios/axios#axios-api

O que são funções de ordem superior em Javascript?

Pedro Tashima — Sun, 19 Sep 2021 22:17:37 +0000

Antes de dar uma definição formal, vamos entender onde elas podem ser úteis e por que usá-las.
Em um certo sistema, diversas operações de divisão de arrays são necessárias.
Essa é uma das maneiras de implementar essas operações:

const copyArrayAndDivideBy2 = (arr) => {
 const result = []
  for(let i = 0; i < arr.length; i++) {
   result.push(arr[i] / 2)
 }
  return result
}

const copyArrayAndDivideBy3 = (arr) => {
 const result = []
  for(let i = 0; i < arr.length; i++) {
   result.push(arr[i] / 3)
 }
  return result
}

Obviamente essa solução é péssima, praticamente todo o código é repetido, bugs conseguem se esconder facilmente e se caso a lógica mude, alguém vai precisar encontrar todas as funções e alterar uma por uma. Existem várias soluções melhores pra esse problema e uma delas é utilizar funções de ordem superior, que é o que vamos fazer a seguir.

O que são funções de ordem superior?

Uma função de ordem superior, ou higher order function (HOF), como vamos chama-la, é uma função que recebe como argumento, ou retorna uma função. Isso é possível porque em Javascript, funções são entidades de primeira classe, ou seja, é possível passar elas como argumentos para uma outra função.

Mas por que HOFs são importantes? Elas são ótimas ferramentas para evitar repetição desnecessária e seguir princípios como o DRY e KISS.

Como usar em Javascript

Vamos continuar o exemplo anterior, refatorando aquelas funções para uma HOF.

Aqui, toda a parte de copiar o array e iterar sobre ele é separada da lógica, que vai ser passada como argumento quando essa função for chamada.

const copyArrayAndManipulate = (arr, instructions) => {
// o parâmetro `instructions` normalmente é chamado de `callback`
// ele deve ser uma funcao que contém toda a lógica de manipulação
// do elemento, antes dele ser copiado para o resultado.
    const result = []
    for(let i = 0; i < arr.length; i++) {
        result.push(instructions(arr[i])
    }
    return result
}

Agora conseguimos utilizar essa função para fazer o mesmo que antes, mas evitando repetição de código.

const divideBy2 = (input) => input / 2
const arrayDividedBy2 = copyArrayAndManipulate([2, 4, 6], divideBy2) // [1, 2, 3]

Simplificando ainda mais a implementação, podemos refatorar ela novamente:

const arrayDividedBy2 = copyArrayAndManipulate(
    [2, 4, 6], 
    (input) => input / 2
) // [1, 2, 3]

Espero que agora tenha ficado muito mais claro onde usar essas funções

HOFs na biblioteca padrão do Javascript

A função copyArrayAndManipulate é muito parecida com uma padrão da linguagem, a Array.forEach e isso não é coincidência, HOFs são utilizadas múltiplas vezes nas funções padrões do JS.

Podemos implementar uma versão mais simples do Array.forEach com os conceitos que aprendemos nesse artigo, que funciona de uma forma muito similar a original.

// recebe como parâmetro um array para iterar 
// e uma função com a lógica a ser executada
const iterateOver = (array, callback) => {
    let i = 0, len = array.length
    while(i < len) {
        const value = array[i]
        // executar a função passada por quem está chamando a função
        // e passar como argumento o elemento atual do array e o índice dele
        callback(value, i)
        i++ 
    }
}
// chamando a função definida anteriormente e passando uma função
// de callback que imprime os elementos do array junto com o índice deles
iterateOver([1, 2, 3], (a, i) => {
    console.log(`elemento: ${a}, índice: ${i}`)
})
/* output
> elemento: 1, índice: 0
> elemento: 2, índice: 1
> elemento: 3, índice: 2
*/

Conclusão

Funções de ordem superior são uma ferramenta extremamente útil para o dia a dia, elas são utilizadas em diversos lugares nas funções embutidas no JS e em outras bibliotecas, porém, o conceito pode ser um pouco difícil de se entender, se algo não ficou claro, por favor entre em contato comigo!

Referências

https://eloquentjavascript.net/05_higher_order.html

https://frontendmasters.com/courses/javascript-hard-parts-v2/

https://www.developintelligence.com/blog/2016/10/javascript-functions-as-first-class-objects/#:~:text=Basically%2C first-class citizenship simply,be assigned key%3A value pairs.

https://medium.com/@angelorubin/javascript-first-class-function-funções-de-primeira-classe-7ebf63d2c83a

http://www.macoratti.net/16/04/net_dry1.htm#:~:text=O princípio DRY%2C 'Não se,e definitiva dentro do sistema."

JavaScript fácil: Coerção de tipos

Pedro Tashima — Tue, 22 Jun 2021 22:02:38 +0000

Tipos de dados em Javascript

Em JavaScript a tipagem de dados é dinâmica, isso quer dizer que ao reservar um espaço na memória, não é necessário declarar para que tipo de dado aquele espaço será usado.
Ex: var minhaIdade = 18; Nesse caso, a variável contém um dado de tipo numérico, porém, diferente de Java ou C, é possível simplesmente atribuir outro tipo de dado sem nenhum problema. minhaIdade = "Não te interessa"; agora a variável minhaIdade contém um texto. Para uma explicação mais detalhada, recomendo a leitura deste texto.

A coerção

Responda a seguinte pergunta: Quanto é 345 + vermelho?
Ela não faz sentido, não? Lógico que não. vermelho não é um número. Para seu computador isso também não faz.
Quando uma operação não faz sentido, os valores são convertidos automaticamente para que passe a fazer. Isso é a coerção de tipos.
Ex:

Código:

var numeroExemplo = 345; //atribuindo um número
var palavraExemplo = 'vermelho'; //atribuindo um texto
var resultado = numeroExemplo + palavraExemplo; //somando o numero e o texto
console.log(resultado); //Mostrando no console o resultado

Console:

>"345vermelho"

Nesse exemplo, o número 345 foi convertido para o "texto" 345. Por mais estranho que isso possa parecer, é possível entender melhor com os próximos exemplos.

Código:

var numeroUm = 1; //declarando 1 como valor numérico
var palavraUm = '1'; //declarando 1 como um texto
var resultado = numeroUm + palavraUm; //somando as duas variáveis
console.log(resultado); //Mostrando no console o resultado

Console:

>"11"

Obviamente 1+1 é igual a 2, mas o console nos mostra 11. O que aconteceu? A variável palavraUm continha um texto e da mesma maneira que no exemplo anterior, então o computador transformou numeroUm também em um texto e concatenou os dois.

con·ca·te·nar

(latim concateno, -are)

verbo transitivo e pronominal

Estabelecer(-se) relação ou .sequência lógica entre ideias ou argumentos. = ENCADEAR, JUNTAR, LIGAR

Ou seja, ele juntou os textos, da mesma maneira que acontece se fizermos o seguinte:

Código:

var meuNome= 'Pedro'; //declarando um texto
var meuSobrenome= 'Tashima'; //declarando um texto
var resultado = numeroUm + palavraUm; //concatenando os textos
console.log(resultado); //Mostrando no console o resultado

Console:

>"PedroTashima"

Agora sim tudo voltou a fazer sentido, 1 + 1 ainda é 2 e você entende o conceito de coerção de tipos, mas para não passar vergonha falando que 1 + 0 é 10, você deveria ver os seguintes links para entender mais do assunto (e ver minhas referências também):