Nós já chegamos a falar deste assunto em outro artigo, porém o JavaScript nunca deixa de nos surpreender!

Nesta segunda parte do artigo sobre APIs desconhecidas do JavaScript, vamos tocar em alguns outros pontos interessantes que podem facilitar muito o desenvolvimento de suas aplicações.

Tagged Template Literals

Os tagged templates estão mais presentes se você já usou styled-components no React, mas em essência, o tagged literals permitem que você tenha mais controle sobre sua string.

taggingFn`Olá! Meu nome é ${name}`

A palavra taggingFn é, na verdade, uma função com a seguinte assinatura:

function taggingFn (strings, ...values) {
  console.log(strings) // [ 'Olá! Meu nome é ', '' ]
  console.log(values) // [ 'Lucas' ]
}
  
const name = 'Lucas'
taggingFn`Olá! Meu nome é ${name}`

Com isso podemos manipular a string e fazer o que quisermos com os valores.

Comma Operator

Este operador é realmente bem pouco conhecido, o que ele faz é simplesmente separar todas as expressões e retornar somente a última expressão da cadeia como um todo:

let expression = (1, 2, 3)
console.log(expression) // 3

O que temos aqui é que todas as expressões sofrem um eval e somente o último é enviado para o valor de expression. A usabilidade desse tipo de operador é mais relacionada a execução de funções curtas, parecidas com expressões lambda.

Vamos supor que queremos inserir uma série de itens concatenados em um array e depois queremos retornar este array para quem está chamando:

const pushItems = (arr, ...items) => (arr.push(...items), arr)
const a = pushItems([], 1,2,3,4)
console.log(a) // [1,2,3,4]

Reduzindo a quantidade de itens de um array sem delete

O jeito padrão que usamos atualmente para reduzir um array removendo seus itens é o clássico delete:

const arr = [1,2,3]
delete arr[2]
console.log(arr) // [ 1, 2, <1 empty item> ]

Porém note que, mesmo removendo o item, o array ainda tem espaço de alocação para 3 itens, e um deles está vazio. Para poder resolver este problema, geralmente criamos um filter para remover itens nulos logo em seguida:

const arr = [1,2,3]
delete arr[2]
console.log(arr.filter((i) => !!i)) [ 1, 2 ]

Porém existe um método mais simples, usando o length. É de senso comum que o array.length é uma propriedade do array que mostra a quantidade de itens que existe no mesmo, porém, o que poucos sabem é que é possível alterar esse número, e a alteração deste número leva a redução de itens do array a partir do último, então o nosso código anterior poderia ser escrito assim:

const arr = [1,2,3]
arr.length = 2
console.log(arr) // [ 1, 2 ]

const arr = [1,2,3]
arr.length = 4
console.log(arr) // [ 1, 2, <1 empty item>, <1 empty item> ]

class A {
  method () {
    console.log('A')
  }
}
  
const a = new A()
a.method() // A

(new A()).method() // A

(new A).method() // A
(new Date).toISOString()
  
const a = new A

class A {
  method () {
    return 'A'
  }
}
  
const a = new A
console.log(void a.method()) // undefined

+"12" // 12
+{} // NaN
+null // 0
+undefined // NaN
+ { valueOf: () => 22 } // 22
+"something" // NaN

const obj = {
  port: +(process.env.PORT || 8080)
}

-"12" // -12
-{} // NaN
-null // -0
-undefined // NaN
- { valueOf: () => 22 } // -22
-"something" // NaN

- +0 // -0
- -0 // 0