Shorthands: Técnicas de abreviação no JavaScript

O JavaScript inclui uma grande variedade de nomes abreviados para melhorar nosso desempenho programando. Na maioria das vezes, queremos reduzir o número de linhas de código, é aí que entram os shorthands. Às vezes, os métodos tradicionais podem ser difíceis de lembrar, então, os shorthands são extremamente úteis.

É muito importante levar em conta a legibilidade do seu código antes de sair usando shorthands, porque nós escrevemos código para outras pessoas lerem também, então não podemos tornar essa tarefa inviável.

Shorthands para Objetos

Object.entries()

Permite converter objetos em arrays de chave/valor.

const author = {
  name: 'Orbital',
  location: 'São Paulo'
}
const array = Object.entries(author)
console.log(array)
// [
//   ['name', 'Orbital'],
//   ['location', 'São Paulo']
// ]

Object.values()

Tem a mesma função do Object.entries(), mas sem a parte da chave/valor.

const astronaut = {
  name: 'Wallace Eick',
  country: 'Brazil',
  age: 32
}
const array = Object.values(astronaut )
console.log(array)
// ['Wallace Eick', 'Brazil', 32]

Propriedades do Objeto

Você pode utilizar o shorthand para este caso, se o nome da variável e a chave do objeto forem iguais.

const x = 1
const y = 2

// Longhand
const obj = {
  x: x,
  y: y
}

// Shorthand
const obj = { x, y }

Loop

Esse shorthand é muito útil se você quer deixar seu código simples e não depender de bibliotecas.

const developers = ['frontend', 'backend', 'fullstack']

// Longhand
for (let i = 0; i < developers.length; i++) {
  /* do something */
}

// Shorthand
for (let dev of developers) {
  /* do something */
}

Shorthands para Arrays

Desestruturação de Array

É a separação dos valores do array ou atributos de objetos em variáveis.

const numbers = [2, 4, 6]

// Longhand
const a = numbers[0]
const b = numbers[1]
const c = numbers[2]

// Shorthand
const [a, b, c] = numbers

Spread Operator

Ele pode substituir funções de array específicas, podemos usá-lo para unir e clonar arrays utilizando 3 pontos.

const odd = [3, 5, 7]
const even = [2, 4, 6]

// Longhand
const numbers = even.concat(odd) // [2, 4, 6, 3, 5, 7]
const clone = even.slice() // [2, 4, 6]
    
// Shorthand
const numbers = [...even, ...odd] // [2, 4, 6, 3, 5, 7]
const clone = [...even] // [2, 4, 6]

Diferente da função concat(), você pode utilizar o spread operator para inserir um array em qualquer lugar dentro de outro array.

const odd = [3, 5, 7]
const numbers = [2, ...odd, 4, 6] // [2, 3, 5, 7, 4, 6]

Shorthands para Strings

Concatenação de Linhas

Utilizando backticks, você anula a necessidade do operador ‘+’ para concatenar as linhas.

// Longhand
const text = 
  "Lorem, ipsum dolor sit amet" +
  "consectetur adipisicing elit" +
  "quod eaque sint voluptatem aspernatur provident"

// Shorthand
const text = 
  `Lorem, ipsum dolor sit amet
  consectetur adipisicing elit
  quod eaque sint voluptatem aspernatur provident`

Template Literals

Além dos backticks, você pode deixar a string dinâmica com variáveis utilizando ${}​​.

const name = 'Wallace Erick';
const job = 'Front-end Developer'

// Longhand
const text = "My name is " + name + ", and i'm a " + job + "."

// Shorthand
const text = `My name is ${name}, and i'm a ${job}.`

String para Número

Você não precisa utilizar os métodos de parse convencionais para executar essa conversão.

// Longhand
const int = parseInt('1000');
const float = parseFloat('1000.01')

// Shorthand
const int = +'1000'
const float = +'1000.01'

Shorthands para Expoentes

Potência

Você pode elevar o primeiro número a potência do segundo, sem utilizar o Math.pow, utilizando apenas **.

// Longhand
Math.pow(2, 3) // 8

// Shorthand
2 ** 3 // 8

Base Decimal

É um método sofisticado de escrever número inteiros sem os zeros finais.

// Longhand
for (let i = 0; i < 10000000; i++) {
  /* do something */
}

// Shorthand
for (let i = 0; i < 1e7; i++) {
  /* do something */
}

Outras Operações

Abreviação de Variáveis

É uma boa prática declarar suas variáveis ​​no início de suas funções. Esse método condensado pode ajudá-lo a economizar muito tempo e espaço ao criar um grande número de variáveis ​​de uma só vez.

// Longhand
let x
let y
let z = 3

// Shorthand
let x, y, z = 3

Short-Circuit Evaluation

Quando o valor esperado de uma variável for falso, esse atalho utiliza o operador || para fornecer um valor padrão para a variável.

let string = ''
let text

// Longhand
if (string !== null && string !== undefined && string != '') {
  text = string
} else {
  text = 'default text'
}

// Shorthand
let text = string || 'default text' // 'default string'

---

Conclusão

Esses são apenas alguns exemplos de shorthand utilizados, temos muitos outros. Aprender a utilizar shorthands poder ser uma habilidade valiosa, tornando seu código mais fácil de ler e de efetuar eventuais melhorias.