Cortocircuito: el comportamiento oculto de && y ||

Al finalizar este tema

Comprenderás por qué && y || devuelven valores que no son booleanos (verdadero/falso) y podrás aplicarlos en la práctica para el renderizado condicional y los patrones de valores predeterminados.

&& y || no devuelven booleanos

console.log("hello" && "world"); // "world"
console.log(0 || 42);            // 42

En otros lenguajes, && y || siempre devuelven true/false. JavaScript es diferente. Devuelve uno de los operandos sin modificar. Esto se conoce como evaluación de cortocircuito.

Comportamiento de &&

Si && evalúa como falso en el lado izquierdo, devuelve el lado izquierdo; si evalúa como verdadero, devuelve el lado derecho.

false && "hello"   // false — el lado izquierdo es falsy, se devuelve el lado izquierdo
"hi" && "hello"    // "hello" — el lado izquierdo es truthy, se devuelve el lado derecho
0 && "hello"       // 0 — el lado izquierdo es falsy
"hi" && 0          // 0 — el lado izquierdo es truthy, se devuelve el lado derecho

Si la expresión del lado izquierdo es falsa, la expresión del lado derecho no se evalúa. De ahí proviene el término «cortocircuito».

const user = null;
user && console.log(user.name); // user es null, por lo que el resto no se ejecuta

Operación ||

|| devuelve el valor del operando izquierdo si este es verdadero; de lo contrario, devuelve el valor del operando derecho.

"hello" || "world"  // "hello" — la izquierda es truthy, devuelve la izquierda
0 || 42             // 42 — la izquierda es falsy, devuelve la derecha
"" || "default"     // "default" — la izquierda es falsy
null || "fallback"  // "fallback"

Se puede entender como que devuelve el primer valor que se evalúa como verdadero.

Renderizado condicional en React

El caso de uso más común de && en React es el renderizado condicional:

function Dashboard({ user }) {
  return (
    <div>
      {user && <UserProfile user={user} />}
      {user?.isAdmin && <AdminPanel />}
    </div>
  );
}

Si existe user, se renderiza <UserProfile />; de lo contrario, no se renderiza nada. Esto permite realizar una renderización condicional en una sola línea, sin necesidad de utilizar sentencias if.

Sin embargo, es importante tener en cuenta lo siguiente:

{count && <Badge count={count} />}

¿Qué ocurre si count es 0? && devuelve 0. React renderiza el valor 0. En la pantalla se mostrará "0". Probablemente, este no sea el resultado deseado.

{count > 0 && <Badge count={count} />}

De esta manera, el uso de expresiones booleanas es seguro.

Establecer valores predeterminados con ||

const name = user.name || "Anonymous";
const theme = config.theme || "light";

Es un patrón común establecer el valor predeterminado con ||. Sin embargo, cuando se deba tratar a 0 o "" como valores válidos, utilice ??.

Conceptos clave

&& devuelve el valor de la izquierda si es falso y el de la derecha si es verdadero. || devuelve el valor de la izquierda si es verdadero y el de la derecha si es falso. Al realizar renderizado condicional en React con &&, recuerde tener cuidado con el número 0.