Explicação de atribuição de variável JavaScript OR (||)

Dado este trecho de JavaScript ...

var a;
var b = null;
var c = undefined;
var d = 4;
var e = 'five';

var f = a || b || c || d || e;

alert(f); // 4

Alguém pode me explicar como é chamada essa técnica (meu melhor palpite está no título desta pergunta!)? E como / por que funciona exatamente?

Meu entendimento é que a variável freceberá o valor mais próximo (da esquerda para a direita) da primeira variável que tem um valor que não é nulo ou indefinido, mas não consegui encontrar muito material de referência sobre essa técnica e visto que usava muito.

Além disso, essa técnica é específica para JavaScript? Eu sei que fazer algo semelhante no PHP resultaria em fter um verdadeiro valor booleano, e não o valor em dsi.

Consulte avaliação de curto-circuito para obter a explicação. É uma maneira comum de implementar esses operadores; não é exclusivo do JavaScript.

Isso é feito para atribuir um valor padrão , neste caso o valor de y, se a xvariável for falsa .

Os operadores booleanos em JavaScript podem retornar um operando, e nem sempre um resultado booleano, como em outros idiomas.

O operador OR lógico ( ||) retorna o valor do seu segundo operando, se o primeiro for falso, caso contrário, o valor do primeiro operando será retornado.

Por exemplo:

"foo" || "bar"; // returns "foo"
false || "bar"; // returns "bar"

Falsas valores são aqueles que coerce para falsequando usado em contexto booleano, e eles são 0, null, undefined, uma cadeia vazia, NaNe, é claro false.

Javacript usa avaliação de curto-circuito para operadores lógicos ||e &&. No entanto, é diferente de outros idiomas, pois retorna o resultado do último valor que interrompeu a execução, em vez de a true, ou falsevalue.

Os seguintes valores são considerados falsos em JavaScript.

• falso
• nulo
• "" (cadeia vazia)
• 0 0
• Nan
• Indefinido

Ignorando as regras de precedência do operador e simplificando, os exemplos a seguir mostram qual valor interrompeu a avaliação e é retornado como resultado.

false || null || "" || 0 || NaN || "Hello" || undefined // "Hello"

Os primeiros 5 valores até NaNsão falsos, portanto, todos são avaliados da esquerda para a direita, até atingir o primeiro valor de "Hello"verdade - o que torna toda a expressão verdadeira, para que qualquer coisa acima não seja avaliada e "Hello"retorne como resultado da expressão . Da mesma forma, neste caso:

1 && [] && {} && true && "World" && null && 2010 // null

Os 5 primeiros valores são todos verdadeiros e são avaliados até atingir o primeiro valor falso ( null) que torna a expressão falsa, portanto, 2010não é mais avaliada e nullé retornada como resultado da expressão.

O exemplo que você deu está usando essa propriedade do JavaScript para executar uma atribuição. Pode ser usado em qualquer lugar em que você precise obter o primeiro valor de verdade ou falsidade entre um conjunto de valores. Este código abaixo irá atribuir o valor "Hello"para b, uma vez que torna mais fácil para atribuir um valor padrão, em vez de fazer verificações de if-else.

var a = false;
var b = a || "Hello";

Você poderia chamar o exemplo abaixo de exploração desse recurso e acredito que torna o código mais difícil de ler.

var messages = 0;
var newMessagesText = "You have " + messages + " messages.";
var noNewMessagesText = "Sorry, you have no new messages.";
alert((messages && newMessagesText) || noNewMessagesText);

Dentro do alerta, verificamos se messagesé falso e, se sim, avaliamos e retornamos noNewMessagesText, caso contrário, avaliamos e retornamos newMessagesText. Como é falso neste exemplo, paramos em noNewMessagesText e alertamos "Sorry, you have no new messages.".

As variáveis ​​Javascript não são digitadas; portanto, pode ser atribuído um valor inteiro a f, mesmo que ele tenha sido atribuído por meio de operadores booleanos.

f é atribuído ao valor mais próximo que não é equivalente a false . Portanto, 0, falso, nulo, indefinido, são todos ignorados:

alert(null || undefined || false || '' || 0 || 4 || 'bar'); // alerts '4'

Não há mágica nisso. Expressões booleanas como a || b || c || dsão avaliadas preguiçosamente. O intérprete procura o valor de a, é indefinido, então é falso, então segue em frente, depois vê o bque é nulo, o que ainda dá resultado falso, então segue em frente, depois vê c- a mesma história. Finalmente, ele vê de diz 'huh, não é nulo, então eu tenho o meu resultado' e o atribui à variável final.

Esse truque funcionará em todas as linguagens dinâmicas que fazem uma avaliação lenta de curto-circuito de expressões booleanas. Em linguagens estáticas, ele não é compilado (erro de tipo). Nas linguagens que estão ansiosas para avaliar expressões booleanas, ele retornará valor lógico (ou seja, verdadeiro neste caso).

Esta pergunta já recebeu várias boas respostas.

Em resumo, essa técnica está aproveitando um recurso de como o idioma é compilado. Ou seja, o JavaScript "provoca um curto-circuito" na avaliação dos operadores booleanos e retornará o valor associado ao primeiro valor da variável não falsa ou ao que a última variável contiver. Veja a explicação de Anurag sobre esses valores que serão avaliados como falsos.

O uso dessa técnica não é uma boa prática por vários motivos; Contudo.

1. Legibilidade do código: está usando operadores booleanos e, se o comportamento de como isso é compilado não for compreendido, o resultado esperado será um valor booleano.
2. Estabilidade: está usando um recurso de como o idioma é compilado que é inconsistente em vários idiomas e, devido a isso, é algo que pode ser direcionado para mudanças no futuro.

3. Recursos documentados: Existe uma alternativa existente que atende a essa necessidade e é consistente em mais idiomas. Este seria o operador ternário:

   ()? valor 1: valor 2.

O uso do operador ternário exige um pouco mais de digitação, mas distingue claramente entre a expressão booleana que está sendo avaliada e o valor que está sendo atribuído. Além disso, ele pode ser encadeado, para que os tipos de atribuições padrão executadas acima possam ser recriados.

var a;
var b = null;
var c = undefined;
var d = 4;
var e = 'five';

var f =  ( a ) ? a : 
                ( b ) ? b :
                       ( c ) ? c :
                              ( d ) ? d :
                                      e;

alert(f); // 4

Retorne o primeiro valor verdadeiro da saída .

Se todos forem falsos, retorne o último valor falso.

Exemplo:-

  null || undefined || false || 0 || 'apple'  // Return apple

Ele está configurando a nova variável ( z) para o valor de xse for "verdade" (diferente de zero, um objeto / matriz / função válido / qualquer que seja) ou de youtra forma. É uma maneira relativamente comum de fornecer um valor padrão, caso xnão exista.

Por exemplo, se você tiver uma função que aceita um parâmetro de retorno de chamada opcional, poderá fornecer um retorno de chamada padrão que não faça nada:

function doSomething(data, callback) {
    callback = callback || function() {};
    // do stuff with data
    callback(); // callback will always exist
}

Isso significa que se xfor definido, o valor para zserá x, caso contrário, se yfor definido, seu valor será definido como o zvalor de.

é o mesmo que

if(x)
  z = x;
else
  z = y;

É possível porque os operadores lógicos no JavaScript não retornam valores booleanos, mas o valor do último elemento necessário para concluir a operação (em uma sentença OR seria o primeiro valor não falso, em uma sentença AND seria o último ) Se a operação falhar, falseserá retornado.

É o chamado operador de curto-circuito.

A avaliação de curto-circuito diz que o segundo argumento é executado ou avaliado apenas se o primeiro argumento não for suficiente para determinar o valor da expressão. quando o primeiro argumento da função OR (||) é avaliado como verdadeiro, o valor geral deve ser verdadeiro.

Também pode ser usado para definir um valor padrão para o argumento da função.`

function theSameOldFoo(name){ 
  name = name || 'Bar' ;
  console.log("My best friend's name is " + name);
}
theSameOldFoo();  // My best friend's name is Bar
theSameOldFoo('Bhaskar');  // My best friend's name is Bhaskar`

Ele avaliará X e, se X não for nulo, a cadeia vazia ou 0 (falso lógico), será atribuído a z. Se X for nulo, a cadeia vazia ou 0 (falso lógico), ele atribuirá y a z.

var x = '';
var y = 'bob';
var z = x || y;
alert(z);

Produzirá 'bob';

De acordo com a publicação no blog de Bill Higgins ; o idioma lógico de atribuição OU do Javascript (fevereiro de 2007), esse comportamento é verdadeiro a partir da v1.2 (pelo menos)

Ele também sugere outro uso para ele (citado): " leve normalização das diferenças entre navegadores "

// determine upon which element a Javascript event (e) occurred
var target = /*w3c*/ e.target || /*IE*/ e.srcElement;