Short-circuit operators. Como escrever um código mais conciso e expressivo.

Uma das intenções desse blog é mostrar aspectos do javascript que muitos programadores não conhecem. Hoje além de operadores de curto-circuito eu vou falar também sobre o operador VÍRGULA (sim, vírgula pode ser usado como operador em javascript).

Antes de explicar o que são operadores de curto-circuito é preciso entender que javascript usa o conceito de falsy e truthy. Valores falsy são aqueles que são traduzidos como false quando avaliados em um contexto booleano, são eles false, null, undefined, “”(string vazia), 0 (zero), NaN (not a number) e também document.all em alguns browsers (mas você não deveria se preocupar com isso). Todos os outros valores são considerados truthy.

Operadores de curto-circuito são aqueles em que o segundo operando só é avaliado caso o primeiro não seja o suficiente pra resolver uma operação. Como no exemplo abaixo:

false && expr; 
//Não preciso avaliar expr, pois o resultado é sempre false
true || expr;
//Não preciso avaliar expr, pois o resultado é sempre true

&& e || são os operadores de curto-circuito disponíveis em javascript, e o mais legal deles é que eles testam contra booleanos, mas retornam o resultado original, ou seja:

console.log(false && 1);//imprime false
console.log(0 && 1); // imprime 0
console.log(false || 1); // imprime 1
console.log(0 || 1 ); // imprime 1

Sendo assim, podemos facilmente utilizar essa sintaxe para implementar valores padrão para variáveis com o operador || , como no exemplo abaixo:

function imprimeZeroOuOArgumento(n){
  n = n || 0;
  console.log(n);
}
imprimeZeroOuOArgumento(1); // imprime 1
imprimeZeroOuOArgumento(); // imprime 0
imprimeZeroOuOArgumento(0); // imprime 0

Este código é exatamente igual ao código abaixo, porém muito mais sucinto:

function imprimeZeroOuOArgumento(n){
  if(!n){
    n=0;
  }
  console.log(n);
}
imprimeZeroOuOArgumento(1); // imprime 1
imprimeZeroOuOArgumento(); // imprime 0
imprimeZeroOuOArgumento(0); // imprime 0

Já o operador && pode ser utilizado para implementar safe navigation, como abaixo:

function getPreco(produto){
  var preco = produto && produto.preco;
  return preco;
}
getPreco(null); // return null , sem erro de null pointer
getPreco({preco:2}); // return 2

Que é o mesmo que:

function getPreco(produto){
  var preco=null;
  if(produto){
    preco = produto.preco;
  }
  return preco;
}
getPreco(null); // return null , sem erro de null pointer
getPreco({preco:2}); // return 2

Combinando && e || você pode até substituir if ternário, como abaixo:

function getPreco(produto){
  var preco = produto ? produto.preco : 0;
  return preco;
}
// O mesmo que 
function getPreco(produto){
  var preco = produto && produto.preco || 0;
  return preco;
}

Na verdade com a combinação certa de && e || você pode substituir todos os ifs do seu projeto (não é recomendado, mas vale para ilustrar o poder desses operadores.

Esses são os operadores de curto-circuito, e com esse conceito em mente fica fácil entender o operador vírgula, este operador sempre avalia todos os operandos, porém só retorna o último, como no exemplo abaixo:

function testeVirgula(arg){
  return 1 , 2 , 3 , arg;
}
testeVirgula(5);//retorna 5
testeVirgula(10);//retorna 10

Ou ainda em uma expressão mais bizarra:

function somaDez(n){
  return n + (1,10)
}
somaDez(1); // retorna 11
somaDez(5); // retorna 15

Não conheço nenhuma utilidade prática pra esse operador (talvez, possa ser útil com arrow function), mas é bom conhecer para conseguir ler qualquer código bizarro que você encontre por aí.