18 Dicas de JavaScript para um código limpo e mais eficiente

Neste post, vou compartilhar 18 dicas de JavaScript, com exemplos que você deve conhecer para escrever um código limpo e eficiente.

Vamos começar! 🚀

Arrow Function

Você pode usar arrow functions para simplificar declarações de função.

Por exemplo:

function add(a, b) {
  return a + b;
}
// Arrow Function
const add = (a, b) => a + b;

Array.from()

O método Array.from() pode ser usado para converter quaisquer objetos iteráveis em arrays.

const str = "Olá!";
const arr = Array.from(str);
console.log(arr); //Saída: ['O', 'l', 'á', '!']

Exibir dados com console.table()

Se você quiser que seus dados sejam organizados ou em formato de tabela no console, então você pode usar console.table().

const person = {
    name: 'Pedro', 
    age: 25,
    profession: 'Programador'
}
console.table(person);

Use const e let eficientemente

Use const para variáveis que não serão reatribuídas e let para aquelas que serão, para uma melhor organização do código.

const PI = 3.14;
let timer = 0;

Extrair Propriedades do Objeto com Desestruturação

Ao usar desestruturação para extrair propriedades de objetos, você pode melhorar a legibilidade do código.

const person = {
    name: 'Pedro', 
    age: 25,
    profession: 'Programador'
}

//Em vez disso
console.log(person.name);
console.log(person.age);

//Faça isso
const {name, age} = person;
console.log(name);
console.log(age);

Definir Valores Padrão com Operador Lógico OR

Defina valores padrão facilmente usando o operador ||.

function greet(name) {
  name = name || 'Pessoa';
  console.log(`Olá, ${name}!`);
}
greet(); //Saída: Olá, Pessoa!
greet("Pedro"); //Saída: Olá, Pedro!

Esvaziar um Array Facilmente

Você pode esvaziar um array facilmente usando a propriedade length.

let numbers = [1, 2, 3, 4];
numbers.length = 0;
console.log(numbers); //Saída: []

JSON.parse()

Use JSON.parse() para converter uma string JSON em um objeto JavaScript, isso garante uma manipulação de dados sem problemas.

const jsonStr = '{"name": "Pedro", "age": 25}';
const person = JSON.parse(jsonStr);
console.log(person); 
//Saída: {name: 'Pedro', age: 25}

Função Map()

Use a função map() para transformar elementos em um novo array sem modificar o array original.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(numbers); //Saída: [1, 2, 3, 4]
console.log(doubled); //Saída: [2, 4, 6, 8]

Object.seal()

Você pode usar o método Object.seal() para evitar adicionar ou remover propriedades no objeto.

const person = {
    name: 'Pedro', 
    age: 25
};

Object.seal(person);
person.profession = "Programador";

console.log(person); //Saída: {name: 'Pedro', age: 25}

Object.freeze()

Você pode usar o método Object.freeze() para evitar quaisquer alterações em um objeto, incluindo adicionar, modificar ou excluir propriedades.

const person = {
    name: 'Pedro', 
    age: 25
};

Object.freeze(person);
person.name = "Mark";

console.log(person); //Saída: {name: 'Pedro', age: 25}

Note que existe diferença entre o Object.seal() e Object.freeze(), de forma bem resumida, com Object.seal() você pode modificar as propriedades existentes do objeto, mas não pode adicionar ou remover novas propriedades. E com Object.freeze(), você não pode adicionar, remover ou modificar as propriedades existentes do objeto.

Remover Duplicatas de um Array

Você pode remover elementos duplicados de um array usando Set.

const arrComDuplicatas = [1, 12, 2, 13, 4, 4, 13];
const arrSemDuplicatas = [...new Set(arrComDuplicatas)];

console.log(arrSemDuplicatas); 
//Saída: [1, 12, 2, 13, 4]

Trocar Valores usando Desestruturação

Você pode trocar duas variáveis facilmente usando desestruturação.

let x = 7, y = 13;
[x, y] = [y, x];

console.log(x); //13

Spread Operator

Você pode copiar ou mesclar arrays de forma eficiente usando o operador spread.

const arr1 = [1, 2, 3];
const arr2 = [9, 8, 7];

const arr3 = [...arr2];
const arrMesclado = [...arr1, ...arr2];

console.log(arr3); //[9, 8, 7]
console.log(arrMesclado); //[1, 2, 3, 9, 8, 7]

Interpolação de Template

Utilize literais de modelo para interpolação de strings e melhorar a legibilidade do código.

const name = 'Pedro';
const message = `Olá, ${name}!`;

Operador Ternário

Você pode simplificar declarações condicionais com o operador ternário.

const age = 20;

//Em vez disso
if(age>=18){
    console.log("Você pode dirigir");
}else{
    console.log("Você não pode dirigir");
}

//Faça isso
age >= 18 ? console.log("Você pode dirigir") : console.log("Você não pode dirigir");

Use === em Vez de ==

Evite problemas de coerção de tipo usando igualdade estrita (===) em vez de igualdade solta (==).

const num1 = 5;
const num2 = '5';

//Em vez de usar ==
if (num1 == num2) {
  console.log('Verdadeiro');
} else {
  console.log('Falso');
}

//Use ===
if (num1 === num2) {
  console.log('Verdadeiro');
} else {
  console.log('Falso');
}

Use Nomes de Variáveis e Funções Descritivos

Use nomes significativos e descritivos para variáveis e funções para melhorar a legibilidade e manutenção do código.

// Não declare variável assim
const a = 18;

// Use nomes descritivos
const numberOfTips = 18;

O que achou das dicas? Me conta nos comentários se teve alguma dúvida ou sugestão.

Continue seguindo meu blog ou assine a newsletter para ler artigos como esse.

Espero que tenha um excelente dia!

Código Limpo Melhores Práticas