DEV Community: Vinicius Lopes

Boas praticas no js que utilizo no dia a dia

Vinicius Lopes — Tue, 25 Apr 2023 03:36:31 +0000

Salve galera, meu nome é Vinicius e comecei a trabalhar como dev em 2018.

Esse é meu primeiro post aqui no dev.to, resolvi trazer um pouco de boas praticas que utilizo no meu dia a dia.

1 - Função com três ou mais parâmetros, eu prefiro passar um objeto.

Quando tenho que desenvolver uma função com três ou mais parâmetros fica um pouco trabalhoso de passar os parâmetros para a função e quando não é uma função que eu desenvolvi, porém preciso utilizar necessito voltar na declaração da função para saber oque é necessario passar em cada campo.

Exemplo de uma função com mais que três parâmetros:

No momento que chamamos a função se somos o criador da função fica até facil de lembrar, porém os valores ficam soltos e é necessario ir direto na declaração da função para saber oque é necessario passar em cada campo.

Como essa função ultrapassa os três parâmetros podemos refatorar usando um objeto.

Exemplo de como é fazer a chamada da função sendo que os parâmetros estão em um objeto:

Sim! Parece que escrevemos mais! Porém tem algumas vantagens…

Parece que o codigo esta mais verboso só que temos algumas vantagens que vou listar.

Primeiro que temos um tipo encapsulado do nosso metodo que podemos reutilizar em alguns outros locais.
A ordem dos valores agora tanto faz na invocação e fica bem mais facil de saber quais parâmetros são necessarios sem precisar ver a declaração da função, diminuindo o esforço cognitivo em futuras manutenções.
Legibilidade, quando alguem olha para a invocação da função imediatamente consegue identificar os parâmetros usados.

2 - Programação funcional > programação imperativa 😲

Estou brincando, na verdade seria utilizar os artificios funcionais da linguagem quando for possivel.

Javascript é uma linguagem que não é funcional 100% porém podemos utilizar alguns artificios que ajuda na legibilidade e no nosso dia a dia.

Vou mostrar um exemplo de uma soma de valores feito de um modo imperativo.

Essa carinha do for já é bem manjada porque aprendemos na faculdade, porém podemos fazer algo mais simples e que provavelmente vai melhorar o nosso desempenho e conhecimento de como podemos trabalhar com arrays no JS.

esse acima é o reduce ele é um metodo para arrays no JS, em primeiro momento parece um pouco complicado porém com uma breve explicação da para entender, vamos a explicação.

const total = comandas.reduce((acc, comanda) => acc + comanda.valor, 0);

Como é um metodo funcional primeiramente ele recebe uma função que no javascript normalmente chamamos de função de callback, essa função recebe um acumulador (acc) e um campo da comanda, depois dessa função ele recebe o valor inicial do acumulador que é 0.

Logo em seguida a função de callback é rodada recebendo campo a campo do array alterando o acumulador pelo retorno da função do reduce que seria acc + comanda.valor e após passar em todos os campos do array executando a função e guardando o acumulador ele retorna oque foi acumulado para a variavel total

Além do reduce temos o map , flatMap, filter, find, sort, todos esses ajudam bastante no dia a dia e melhoram a legibilidade e diminui o esforço cognitivo no codigo.

3 - Não utilize ELSE!!

Okay isso pode ser um pouco complicado de inicio e vai necessitar um pouco que você exercite, não utilizar else é uma regra do object calisthenics e eu acho ela uma das mais legais entre as 9 regras descritas.

Sem o else você consegue diminuir o fluxo de condições do seu codigo e com isso diminui a complexidade, maior problema do else que eu vejo é que ele é TUDO que não for if, em certas ocasiões faz total sentido ter um else ,dependendo da regra de negocio pode ser necessario um else porém a maioria do tempo não precisariamos dele.

Uma tecnica legal é utilizar o early return, ele consiste em sempre retornar o mais rapido possivel de um metodo, sempre saia rapido de dentro de um metodo.

Uma ideia que utilizo é verificar as possiveis condições como regra de negocio e erros no inicio e o “caminho feliz” fica no final.

Ta bom já expliquei o suficiente vamos ver um codigo para ficar mais claro.

Este codigo acima verificamos se o valor é acima de 90 não cobramos frete e caso não seja maior que 90 cobraremos frete, porém podemos melhora-lo.

Beleza, ficou um pouco mais limpo sem o else e conseguimos diminuir o esforço cognitivo de entender esse metodo, também diminuimos os fluxos que a aplicação pode seguir.

3.1 Early return são os amigos que fazemos pelo caminho.

O early return consiste em falhar rapido, ( ué oque significa isso ? ) valide os possiveis problemas antes do “caminho feliz” vamos direto ao codigo.

Percebe que é até feio de olhar para um codigo desse ?

Nesse codigo verificamos se o cara gastou mais de 90 e se for franqueado não paga frete, porém se for franqueado paga o frete, e no else verificamos se o valor ta invalido e avisamos o usuario do valor invalido, caso esteja valido apenas cobra o frete normalmente.

Imagina para o nosso cerebro que utilizamos ele o dia todo, o esforço cognitivo que utilizamos para entender.

Podemos refatorar esse codigo pensando em uma regra do early return, falhar rapidamente, exemplo:

Levamos a validação de campo invalido para o começo do metodo e retornamos o quanto antes o erro para o usuario e não precisamos entrar no codigo todo, porém podemos melhorar ainda mais as validações.

Aqui fazemos as validações antes e deixamos o “*************caminho feliz”************* por ultimo, verificamos se o usuario é franqueado caso seja pula para o outro if e verifica se o valor é acima de 90 e não cobra o frete e caso não seja acima de 90 cobra o frete normalmente.

Não precisamos aninhar if algum e conseguimos manipular melhor as condições e nosso esforço para entender é bem menor.

4 - Substituindo os switchs do nosso codigo

No Javascript as vezes nos perdemos em fazer um switch/case ou até varios if que funcionam para verificar um valor constante e retornar algo, nesses casos podemos usar o object literal, não confunda com template literal.

Object literal nada mais é que um objeto javascript porém como tem a chave e valor do objeto podemos criar algumas “verificações” que facilitam e limpam bastante o codigo.

Exemplo com if

Exemplo com switch/case

Apenas um exemplo porém deu para perceber que são valores estaticos, sem validações e estamos fazendo um parser dos valores para outra informação.

Mesmo assim ficou um codigo estranho e complicado para pouca coisa que ele faz, fora a repetição de codigo e no caso do switch/case o erro de esquecer um break; é enorme.

Podemos trazer o object literals para nós ajudar nisso e melhorar a legibilidade do codigo, exemplo:

Uau parece magica né, porém o oque fazemos é passar o tipo para o objeto e pela chave do campo ele retorna o valor e o valor padrão sera Visitante caso não tenha nenhum retorno.

Podemos ver que melhorou a legibilidade e também a manutenção desse codigo, é um codigo que pode escalar rapidamente apenas incluindo novos valores na variavel tiposDeUsuarios e não precisamos repetir codigo.

Acaba aqui 🤙

Espero ter agregado algum valor a nossa comunidade, escrevi as primeiras coisas que chegaram na minha cabeça e fiz alguns exemplos para ilustrar.

Se vocês tiverem boas praticas que sempre lembram de utilizar no dia a dia comenta que também quero saber.

Tamo junto galera. 🤓

Good practices in js that I use every day

Vinicius Lopes — Fri, 21 Apr 2023 04:01:18 +0000

Hey guys, my name is Vinicius and I started working as a dev in 2018.

This is my first post ever, I don't really like to expose myself, I'm trying to change that over time, but as it's a really nice environment here, I decided to bring some good practices that I use in my day to day.

1 - Function with three or more parameters, I prefer passing an object.

When I have to develop a function with three or more parameters, it is a bit difficult to pass the parameters to the function and when it is not a function that I developed, but I need to use it, I need to go back to the function declaration to know what is necessary to pass in each field .

Example of a function with more than three parameters:

const createInvoice = (
  name: string,
  lastName: string,
  totalValue: number,
  address: string
) => {
  console.log(name, lastName, totalValue, address);
};

createInvoice(`Vinicius`, `Lopes`, 1500, `Pennsylvania Avenue NW`);

The moment we call the function, if we are the creator of the function, it is even easier to remember, but the values are loose and it is necessary to go straight to the function declaration to know what is necessary to pass in each field.

As this function exceeds the three parameters we can refactor using an object.

Example of how to call the function with the parameters being in an object:

type CreateInvoiceParams = {
  name: string;
  lastName: string;
  totalValue: number;
  address: string;
};

const createInvoice = ({
  name,
  lastName,
  totalValue,
  address,
}: CreateInvoiceParams) => {
  console.log(name, lastName, totalValue, address);
};

createInvoice({
  name: `Vinicius`,
  lastName: `Lopes`,
  totalValue: 1500,
  address: `Pennsylvania Avenue NW`,
});

Yes! We seem to write more! But it does have some advantages…

It seems that the code is more verbose but we have some advantages that I will list.

First, we have an encapsulated type of our method that we can reuse in a few other places.
The order of the values now does not matter in the invocation and it is much easier to know which parameters are needed without having to see the function declaration, reducing the cognitive effort in future maintenance.
Readability, when one looks at the function invocation one can immediately identify the parameters used.

2 - Functional programming > imperative programming 😲

I'm kidding, actually it would be to use the functional artifices of the language when possible.

Javascript is a language that is not 100% functional, but we can use some tricks that help with readability and in our daily lives.

I'll show you an example of a sum of values done in an imperative manner.

const orders = [
  {
    name: `Vinicius`,
    value: 50,
  },
  {
    name: `Ailton`,
    value: 80,
  },
  {
    name: `Lucas`,
    value: 100,
  },
  {
    name: `Felipe`,
    value: 50,
  },
];

let total = 0;

for (let i = 0; i < orders.lenght; i++) {
  total += orders[i].value;
}

This face of for is already well known because we learned it in college, but we can do something simpler and that will probably improve our performance and knowledge of how we can work with arrays in JS.

const orders = [
  {
    name: `Vinicius`,
    value: 50,
  },
  {
    name: `Ailton`,
    value: 80,
  },
  {
    name: `Lucas`,
    value: 100,
  },
  {
    name: `Felipe`,
    value: 50,
  },
];

const total = orders.reduce((acc, order) => acc + order.value, 0);

the one above is reduce it is a method for arrays in JS, at first it seems a little complicated but with a brief explanation to understand, let's explain.

const total = orders.reduce((acc, order) => acc + order.value, 0);

As it is a functional method, first it receives a function that in javascript we usually call a callback function, this function receives an accumulator (acc) and a command field, after this function it receives the initial value of the accumulator, which is 0.

Soon after the callback function is run receiving field by field of the array changing the accumulator by the return of the reduce function which would be acc + order.value and after going through all the fields of the array executing the function and saving the accumulator it returns what was accumulated for the total variable

In addition to reduce, we have map , flatMap, filter, find, sort, all of which help a lot in everyday life and improve readability and reduce cognitive effort in the code.

3 - Do not use ELSE!!

Okay this can be a little tricky at first and will need some practice, don't use else is a rule of object calisthenics and I think it's one of the coolest among the 9 rules described.

Without the else you can reduce the flow of conditions in your code and thus reduce the complexity, the biggest problem with the else that I see is that it is EVERYTHING that is not if, on certain occasions it makes total sense to have an else , depending on the rule in business you might need an else but most of the time we wouldn't need it.

A cool technique is to use the early return, it consists of always returning as quickly as possible from a method, always exit quickly from within a method.

One idea I use is to check the possible conditions as a business rule and errors at the beginning and the “happy path” is at the end.

Okay, I've explained enough, let's see a code to make it clearer.

const checkDeliveryPrice = (value: number) => {
  if (value > 90) {
    notChargeDelivery();
  } else {
    chargeDelivery();
  }
};

This code above we check if the value is above 90 we do not charge shipping and if it is not greater than 90 we will charge shipping, but we can improve it.

const checkDeliveryPrice = (value: number) => {
  if (value > 90) {
    notChargeDelivery();
    return;
  }

  chargeDelivery();
};

OK, it was a little cleaner without the else and we managed to reduce the cognitive effort of understanding this method, we also reduced the flows that the application can follow.

3.1 Early return are the friends we make along the way.

The early return consists of failing quickly, ( what does that mean ? ) validate the possible problems before the “happy way” we go straight to the code.

const checkDeliveryPrice = (value: number, franchised: boolean) => {
  if (value > 90) {
    if (franchised) {
      notChargeDelivery();
    }
    if (!franchised) {
      alert(`You are not a franchisee, you will be charged shipping`);
      chargeDelivery();
    }
  } else {
    if (value !== undefined) {
      alert(`Invalid value`);
      return;
    }
  }
  chargeDelivery();
};

Do you realize that it's even ugly to look at a code like that?

In this code we check if the guy spent more than 90 and if he is a franchisee he does not pay shipping, but if he is a franchisee he pays the freight, and in the else we check if the value is invalid and we warn the user of the invalid value, if it is valid he only charges the shipping normally.

Imagine for our brain that we use it all day, the cognitive effort we use to understand.

We can refactor this code thinking about an early return rule, fail quickly, example:

const checkDeliveryPrice = (value: number, franchised: boolean) => {
  if (valor !== undefined) {
    alert(`Invalid value`);
    return;
  }
  if (value > 90) {
    if (franchised) {
      notChargeDelivery();
    }
    if (!franchised) {
      alert(`You are not a franchisee, you will be charged shipping`);
      chargeDelivery();
    }
  } else {
    chargeDelivery();
  }
};

We take the invalid field validation to the beginning of the method and return the error to the user as soon as possible and we don't need to enter the whole code, but we can improve the validations even more.

const checkDeliveryPrice = (value: number, franchised: boolean) => {
  if (valor !== undefined) {
    alert(`Invalid value`);
    return;
  }

  if (!franchised) {
    alert(`You are not a franchisee, you will be charged shipping`);
    chargeDelivery();
    return;
  }

  if (value > 90) {
    notChargeDelivery();
    return;
  }

  chargeDelivery();
};

Here we do the validations first and leave the “happy path” for last, we check if the user is a franchisee, if it is, skip to the other if and check if the value is above 90 and does not charge shipping and if it is not above 90, it charges shipping normally.

We don't need to nest any if and we can better manipulate the conditions and our effort to understand is much less.

4 - Replacing the switches in our code

In Javascript, sometimes we get lost in making a switch/case or even several if that work to check a constant value and return something, in these cases we can use the object literal, not to be confused with a template literal.

Object literal is nothing more than a javascript object, but as it has the object's key and value, we can create some “checks” that make the code much easier and cleaner.

Example with if

const verifyUser = (userType: "admin" | "user" | "guest") => {
  if (userType === "admin") return "Administrator";
  if (userType === "user") return "User";
  if (userType === "guest") return "Anonymous";
};

Example with switch/case

const verifyUser = (userType: "admin" | "user" | "guest") => {
  switch (userType) {
    case "admin":
      return "Administrator";
    case "user":
      return "User";
    case "guest":
      return "Anonymous";

    default:
      return "Anonymous";
  }
};

Just an example, however, you can see that they are static values, without validations and we are parsing the values for other information.

Even so, it was a strange and complicated code for the little thing it does, apart from code repetition and, in the case of switch/case, the error of forgetting a break; It is huge.

We can bring the object literals to help us with this and improve the readability of the code, example:

const userTypes = {
  admin: "Administrator",
  user: "User",
  guest: "Anonymous",
};

const verifyUser = (type: "admin" | "user" | "guest") => {
  return userTypes[type] || "Anonymous";
};

Wow, it looks like magic, right, but what we do is pass the type to the object and by the field key it returns the value and the default value will be Anonymous if there is no return.

We can see that it has improved the readability and also the maintenance of this code, it is a code that can scale quickly just by including new values in the variable userTypes and we don't need to repeat code.

It ends here 🤙

I hope I have added some value to our community, I wrote the first things that came into my head and made some examples to illustrate.

If you have good practices that you always remember to use in everyday life, comment that I also want to know.

Thanks for reading. 🤓