4

Estou estudando react e me deparei com a seguinte expressão:

{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}

Essa expressão em resumo irá imprimir uma pizza para cada palavra inserida no texto:

Segue o exemplo:

https://facebook.github.io/react-native/docs/handling-text-input

Bem a duvida não é sobre react mas sim sobre o que será retornado nessa função:

(word) => word && '🍕'

Esta função recebe uma palavra word e se a palavra for válida então será retornada uma pizza

Mas se caso eu fazer isto:

(word) => '🍕' && word

Será retornada a palavra e não uma pizza.

Mas essa condição não deveria retornar um bool, já que se trata de uma condição booleana? E porque sempre a ultima clausula que é retornada? Ou isso tem a ver com a função Map?

3 Respostas 3

5

O operador && no Javascript avalia a primeira expressão e sendo ela algo que possa ser considerador verdadeiro, retorna o valor da segunda expressão.

Por exemplo:

console.log('a' && 'b' && 'c');

É considerado como falso os valores 0, 0.0, null, undefined, false, '' e NaN. O resto é considerado como verdadeiro.

2
  • Então é uma especie de recursão? No caso do if ele verifica a primeira clausula, se for verdadeiro ele passa para a proxima, mas como não há um if e nem um while então ele retorna a clausula em vez do um bool? Commented 26/09/2018 às 17:58
  • 1
    @ViniciusMorais Mais ou menos isso. Ele usa o valor da última cláusula como se fosse um boolean, mesmo que não seja. Há um comportamento análogo com o || também. Commented 26/09/2018 às 18:10
3

Este comportamento é chamado de Short-Circuit Evaluation ou Avaliação de Curto-Circuito (Wikipedia e MDN), que significa basicamente: "Se eu já consigo saber a resposta, nem vou verificar adiante".

Pegue como exemplo as tabelas-verdade de um AND e um OR:

+---------+-------+-------+  +---------+-------+-------+
|           AND           |  |            OR           |
+---------+-------+-------+  +---------+-------+-------+
|     entrada     | saída |  |     entrada     | saída |
+---------+-------+-------+  +---------+-------+-------+
| false   | false | false |  | false   | false | false |
| false   | true  | false |  | false   | true  | true  |
| true    | false | false |  | true    | false | true  |
| true    | true  | true  |  | true    | true  | true  |
+---------+-------+-------+  +---------+-------+-------+

Podemos perceber que o AND só será verdadeiro se TODAS suas entradas forem verdadeiras, e o OR apenas será falso se TODAS suas entradas forem falsas. Então o interpretador não precisa saber o que vem depois de um false && ... pois já é sabido que o resultado é false.

Então quando temos:

obj.attr && doSomething(obj.attr)

Ele só vai executar a função doSomething se obj.attr for algum valor truthy.

Bem como:

let valor = param || default;

A variável valor vai receber o primeiro valor truthy que ela encontrar, da esquerda para a direita. Se não encontrar nenhum, vai ser o último valor (nesse caso default);

2

A função map pega os valores do array e os usa como chave de entrada (qualquer palavra digitada) e mapeia todos para o mesmo valor (a pizza).

O end ('🍕' && word) serve para não imprimir nada quando a chave de entrada do map for uma string vazia. Se word houver um valor (pois a pizza sempre tem um valor), será atribuído o valor da última variável avaliada (no caso dessa frase, word). Se a pizza vem por último, é ela que vai.

É um "curto circuito"

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 .