24

Recentemente lendo o código de um plugin, eu reparei na definição de variáveis e objetos usando o operador || do JavaScript. Exemplo:

function ola(nome){
    nome = nome || "estranho";
    return "Olá, " + nome;
}

Eu nunca tinha visto o operador || ser utilizado fora de um if(), então minha pergunta é, sob quais circunstâncias o operador "ou" trabalha quando definindo variáveis? Como eu sei o que retornaria após o "ou"?

Obs.: A maioria das respostas abaixo estão certas e trazem detalhes que se completam. Como apenas uma pode ser escolhida como "correta" eu escolhi a que trouxe, além da explicação, uma lista com o que é considerado falso ou verdadeiro pelo operador ||, mas eu recomendo fortemente a leitura das demais respostas.

1

5 Respostas 5

20

Isto é comum em funções (e não só) para casos em que a função é chamada sem serem passados argumentos. Ou seja se nome der falso (ie não estiver defenido), então ele toma o valor que estiver depois de ||. Pode dizer-se que o segundo valor é um valor por defeito que é tomado caso o(s) anterior(es) não estejam defenidos ou tiverem valor booleano false. Deste modo garante que o código não dá erro.

Então nome = nome || "estranho"; é o mesmo que:

if (nome) nome = nome;
else nome = "estranho"

Um bom exemplo é como escutar o mousewheel event

Um outro exemplo: em versões antigas do IE não havia addEventListener, mas sim attachEvent. Muitas vezes, faz-se:

var addEvent = document.addEventListener || document.attachEvent;

Dessa maneira a nossa nova variável, que é uma referência a uma função nativa, assume o attachEvent caso o addEventListener não exista nesse browser.

2
  • É quase um if ternário então? Como variavel == null ? doSomething() : doSomethingElse()? Commented 24/10/2014 às 15:43
  • 2
    @GustavoCinque: exatamente. valorA || valorB é exatamente o mesmo que valorA ? valorA : valorB. Commented 24/10/2014 às 15:45
17

Em uma resposta semelhante, expliquei o que significa essa operação. Dá-se o nome de colescência. Ai vai um trecho desta resposta que responde sua questão (sua questão, entretanto, não é uma duplicata):

O código abaixo:

var resultado = valorA || valorB;

é exatamente o mesmo que:

var resultado = valorA ? valorA : valorB;

Acontece que no javascript, praticamente todos os valores podem tratados de forma lógica, ou seja, convertidos para verdadeiro ou falso. Quanto à operação anterior, quando o valor valorA é tratado como verdadeiro, o resultado da expressão é o seu próprio valor. Quando é tratado como falso, o resultado da expressão é o valor valorB.

Devemos então entender o que é tratado como verdadeiro e como falso.

O que é falso:

  • string vazia: ""
  • número 0 (zero)
  • false
  • null
  • undefined
  • NaN

O que é verdadeiro:

  • tudo que não for falso... incluindo os seguintes
  • strings não vazias: "0", "true", "false" (é importante lembrar desse)
  • todos os números diferentes de 0: 1, -1, -1000, 1/10
  • true

Alguns exemplos

false || "texto qualquer"     // "texto qualquer"
"" || "texto qualquer"        // "texto qualquer"
0 || "texto qualquer"         // "texto qualquer"
null || "texto qualquer"      // "texto qualquer"
undefined || "texto qualquer" // "texto qualquer"

"algum texto" || "texto qualquer" // "algum texto"
1 || "texto qualquer"             // 1
5

Isso é usado para atribuição de valores-padrões a variáveis. Tem 3 fatores contribuindo para isso:

  1. As expressões em JavaScript sempre retornam um valor. Então nome || "estranho", sendo uma expressão, retorna algo – que no seu exemplo será usado como o valor atribuído a uma variável.

  2. Uma característica do operador lógico || na linguagem é que ele faz short-circuiting, ou seja, abandona a interpretação do que está à direita do operador se a parte da esquerda já for true.

  3. Strings não vazias são consideradas truthy, ou seja, agem como true em operações lógicas/booleanas.

Veja as consequências de tudo isso nos dois blocos de código a seguir:

var x = "um nome" || "estranho"; 
// "estranho" é ignorado via short-circuiting pois "um nome" é truthy
// equivale a var x = "um nome"
var x = "" || "estranho"; 
// x = "estranho"
// "" é falsey, então || retorna o valor à direita
4

Em Javascript, uma expressão do tipo a || b é interpretada da seguinte forma:

  • Avalie a; se não for avaliado como um dos valores lógicos "falsos", retorne a;
  • Caso contrário, retorne b.

Os valores que são considerados falsos para esse tipo de lógica são: nulo (null), indefinido (undefined), falso explícito (false), string vazia (""), zero e Not a Number (NaN).

Esse código na pergunta serve para garantir que a variável nome estará preenchida. Supondo que ela seja inicializada com o valor null - sem esse tratamento, você poderia retornar Olá, null. Experimente rodar o código sem a parte || "estranho". ;)

Note que expressões com o ou lógico podem ser encadeadas. Quando você tem algo do tipo:

a || b || c || d || e;

O interpretador, em geral, entenderá como:

a || (b || (c || (d || e)));

Isso fará com que seja retornado o primeiro elemento da série que não for avaliado como falso lógico. Mas caso sejam todos falsos lógicos, o último elemento será retornado.

Algo semelhante ocorre com o operador &&. A diferença é que o "e" lógico retorna o primeiro elemento que for logicamente falso, ou o último a direita caso sejam todos logicamente verdadeiros. É o inverso do "ou".

2

Em javascript o operador || vai avaliar a expressão e retornar o primeiro valor que não seja avaliado como falso. Se não encontrar nenhum retorna o elemento mais à direita.

Valores que são considerados false no javascript: "", false, 0, undefined, null, NaN Na expressão: nome || "estranho" a lógica é a seguinte: se nome for diferente dos valores listados acima, ele vai retornar nome. Caso contrário ele vai avaliar o próximo valor, neste caso, "estranho".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .