¿Tiene JavaScript evaluación de "cortocircuito"?

Me gustaría saber si JavaScript tiene una evaluación de "cortocircuito" como && Operator en C #. Si no es así, me gustaría saber si existe una solución alternativa que tenga sentido adoptar.

Sí, JavaScript tiene evaluación de "cortocircuito".

if (true == true || foo.foo){
    // Passes, no errors because foo isn't defined.
}

Demo en vivo

if (false && foo.foo){
    // Passes, no errors because foo isn't defined.
}

Demo en vivo

Esta respuesta entra en gran detalle sobre cómo cortocircuitofunciona en JavaScript, con todos los problemas y también temas relevantes como la precedencia del operador, si está buscando una definición rápida y ya comprende cómo funciona el cortocircuito, recomendaría verificar otras respuestas.

Lo que (pensamos) sabíamos hasta ahora:

Primero, inspeccionemos el comportamiento con el que todos estamos familiarizados, dentro del if()bloque, donde usamos &&para verificar si las dos cosas son true:

if (true && true) {
   console.log('bar');
} 

Ahora, su primer instinto probablemente sea decir: 'Ah sí, bastante simple, el código ejecuta la declaración si ambos expr1y expr2se evalúan como true'

Bueno, sí y no. Es técnicamente correcto, ese es el comportamiento que describió, pero no es exactamente así como se evalúa el código y tendremos que profundizar más para comprenderlo completamente.

¿Cómo se interpreta exactamente &&y ||?:

Es hora de mirar "bajo el capó del javascript motor ". Consideremos este ejemplo práctico:

function sanitise(x) {
  if (isNaN(x)) {
    return NaN;
  }
  return x;
}

let userinput = 0xFF; // as an example
const res = sanitise(userinput) && userinput + 5

console.log(res);

Bueno, el resultado es 260... pero ¿por qué? Para obtener la respuesta, debemos comprender cómo funciona la evaluación de cortocircuito.

Por la definición de MDN, el &&operador en expr1 && expr2se ejecuta de la siguiente manera:

Si expr1se puede convertir a true, devuelve expr2; si no, vuelve expr1.

Esto significa que, en nuestro ejemplo práctico, const resse evalúa de la siguiente manera:

1. Invocando expr1-sanitise(0xFF)
2. 0xFF es un número hexadecimal válido para 250, de lo contrario devolvería NaN
3. El expr1devolvió un valor "verdadero", tiempo para ejecutar expr2 (de lo contrario, me detendría como NaNes falso)
4. Dado que userinputes Truthy (un número), puedo añadir +5a ella

• "Verdad" significa que la expresión se puede evaluar como verdadera. Aquí hay una lista de expresiones veraces y falsas .

Así que aquí pudimos evitar ifbloqueos adicionales y isNaNverificaciones adicionales con un simple uso del &&operador.

Cómo funciona realmente:

A estas alturas, al menos deberíamos tener una idea de cómo cortocircuitolos operadores trabajan. La regla universal es:

• (some falsy expression) && expr evaluará a una expresión falsa
• (some truthy expression) || expr evaluará a la expresión veraz

Aquí hay algunos ejemplos adicionales para una mejor comprensión:

function a() { console.log('a'); return false; }
function b() { console.log('b'); return true; }

if ( a() && b() ){
     console.log('foobar'); 
}

//Evaluates a() as false, stops execution.

function a() { console.log('a'); return false; }
function b() { console.log('b'); return true; }

if ( a() || b() ){
     console.log('foobar'); 
}

/* 1. Evaluates a() as false
   2. So it should execute expr2, which is `b()`
   3. b() returned as true, executing statement `console.log('foobar');`
*/

Una última cosa molesta, pero muy importante [precedencia del operador]:

Bien, ¡espero que lo estés entendiendo! Lo último que necesitamos saber es una regla sobre la precedencia de los operadores, es decir:

• El &&operador siempre se ejecuta antes que el ||operador.

Considere el siguiente ejemplo:

function a() { console.log('a'); return true;}
function b() { console.log('b'); return false;}
function c() { console.log('c'); return false;}

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

// returns a() and stops execution

Esto volverá como, quizás confuso para algunos como a(). La razón es bastante simple, es solo nuestra vista lo que nos engaña, porque estamos acostumbrados a leer de izquierda a derecha. Saquemos el console.log()y lo que no y centrémonos únicamente en la evaluación

true || false && false

Ahora, para entender esto:

1. Dijimos que el &&operador tiene precedencia, por lo que se evalúa como el primero. Para ayudarnos a imaginar mejor la evaluación, piense en la definición

   expr1 && expr2

   Dónde:

   • expr2 es false
   • expr1 es true || false

2. Así que esa fue la parte complicada, ahora true || falsese evalúa (el expr1lado izquierdo del &&).

   • Dado el ||operador detiene la ejecución si expr1 || expr2en expr1evalúa como Truthy, el expr1se ejecuta y se detiene la ejecución de código.

3. El valor devuelto es true

Bueno ... eso fue bastante complicado, todo debido a unas pocas reglas y semánticas extrañas. Pero recuerde, siempre puede escapar de la precedencia del operador con (), al igual que en matemáticas

function a() { console.log('a'); return true;}
function b() { console.log('b'); return false;}
function c() { console.log('c'); return false;}

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

/* 1. The () escape && operator precedence
   2. a() is evaluated as false, so expr2 (c()) to be executed
   3. c()  
*/