Operadores LÓGICOS en JavaScript: ¿Cuáles son? Con ejemplos!

Los operadores lógicos en JavaScript son esenciales para evaluar múltiples condiciones al mismo tiempo. ¿Qué son y para qué sirven? Estos operadores permiten combinar expresiones y determinar si una condición es verdadera o falsa. A lo largo del artículo, aprenderás cuáles son, sus características y funciones, junto con ejemplos prácticos para entender su funcionamiento en tus proyectos.

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

1. ¿Qué son los operadores lógicos en JavaScript?

Los operadores lógicos en el lenguaje de JavaScript son herramientas fundamentales que nos permiten realizar comparaciones y tomar decisiones basadas en valores booleanos (verdadero o falso) de una o más expresiones. Estos operadores son esenciales para controlar el flujo de ejecución de un programa y construir lógica condicional.

En otras palabras, son como reglas que utilizamos para comparar valores y tomar decisiones en nuestros programas o páginas web. Estas reglas nos permiten establecer condiciones que deben cumplirse para que se ejecute una determinada parte del código.

Ejemplos de lo que se puede hacer con estos operadores en una tienda online:

• Aplicar descuentos: Puedes ofrecer descuentos a los clientes que cumplan ciertas condiciones. Por ejemplo, si un cliente compra más de 10 productos y se registra en el boletín, puede obtener un descuento adicional.
• Mostrar productos recomendados: Puedes recomendar productos a los clientes en función de sus compras anteriores. Por ejemplo, si un cliente ha comprado un teléfono celular, puedes recomendarle una funda protectora o unos auriculares.
• Validar formularios: Puedes asegurarte de que los usuarios ingresen información válida en los formularios. Por ejemplo, puedes verificar que el correo electrónico tenga un formato correcto y que la contraseña tenga al menos 8 caracteres.

Lo PRINCIPALES OPERADORES LÓGICOS son:

• AND (&&): Devuelve true solo si ambos operandos son true. Es decir, actúa como una conjunción lógica.
• OR (||): Devuelve true si al menos uno de los operandos es true. Es decir, actúa como una disyunción lógica.
• NOT (!): Invierte el valor booleano de un operando. Si es true, lo convierte en false, y viceversa.

En el siguiente punto iremos ampliando sobre cada uno de ellos!

1.1. ¿Cómo funcionan los operadores lógicos en una página web exactamente?

En una página web, los operadores lógicos se usan para tomar decisiones basadas en condiciones. Generalmente, se combinan con otras estructuras de control, como if, while, o for, para ejecutar diferentes bloques de código según el resultado de ciertas comparaciones o evaluaciones.

Por ejemplo, en una página web con formularios de registro o login, podrías querer verificar que el usuario haya completado los campos de nombre y correo antes de permitir que envíe el formulario. Aquí es donde los operadores lógicos son útiles.

Ejemplo de uso en una página web:

Supón que tienes un formulario en HTML y quieres asegurarte de que el usuario haya completado los campos de nombre y correo electrónico antes de enviar los datos.

HTML:

<form id="userForm">
  <input type="text" id="name" placeholder="Nombre">
  <input type="email" id="email" placeholder="Correo electrónico">
  <button type="submit">Enviar</button>
</form>Lenguaje del código: HTML, XML (xml)

JavaScript:

document.getElementById("userForm").addEventListener("submit", function(event) {
  // Obtener los valores de los campos
  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;

  // Usar operadores lógicos para verificar si los campos están llenos
  if (name === "" || email === "") {
    // Si alguno de los campos está vacío, mostrar un mensaje y prevenir el envío
    alert("Por favor, completa todos los campos.");
    event.preventDefault(); // Evita que el formulario se envíe
  } else {
    // Si ambos campos están llenos, permite enviar el formulario
    alert("Formulario enviado correctamente.");
  }
});Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo anterior:

• OR (||): En este caso, el operador OR verifica si uno de los dos campos está vacío (name === "" || email === ""). Si cualquiera de las dos expresiones es verdadera, significa que uno de los campos no se completó, y el código muestra una alerta pidiendo al usuario que llene todos los campos.
• Si ambos campos están completos, el formulario se envía normalmente y se muestra el mensaje de éxito.

1.2. ¿Otros ejemplo para entender que hacen estos operadores lógicos?

Los operadores lógicos permiten combinar varias condiciones o expresiones y evaluar si se deben realizar ciertas acciones. En un sitio web, los usas para cosas como:

1. Validar formularios: Asegurarte de que los campos estén llenos antes de enviar un formulario.
2. Mostrar u ocultar contenido: Evaluar si un usuario está logueado para mostrar información personalizada.
3. Controlar flujos de ejecución: Según el estado de la aplicación (por ejemplo, si la conexión a la red está disponible), ejecutar diferentes partes del código.
4. Comportamientos condicionales: Como el comportamiento de un botón, la activación de animaciones o la carga de recursos según el estado de ciertos datos.

RESUMEN: Los operadores lógicos permiten tomar decisiones complejas en tu código, que afectan directamente cómo se comporta una página web, dependiendo de las condiciones que estés evaluando.

2. ¿Cuáles son los operadores lógicos en JavaScript?.

A continuación dejamos un resumen, y luego ampliamos sobre cada uno:

Los principales operadores lógicos son:

1. && (AND): Devuelve verdadero si ambas expresiones a su lado son verdaderas. Es como decir «y».
   • Ejemplo: (5 > 3) && (10 < 20) es verdadero, porque tanto 5 es mayor que 3 como 10 es menor que 20.
2. || (OR): Devuelve verdadero si al menos una de las expresiones es verdadera. Es como decir «o».
   • Ejemplo: (5 > 10) || (3 < 4) es verdadero, porque aunque 5 no es mayor que 10, 3 sí es menor que 4.
3. ! (NOT): Invierte el valor de verdad de una expresión. Es como decir «no».
   • Ejemplo: !(5 > 3) es falso, porque 5 sí es mayor que 3, pero el operador NOT lo invierte.

2.1. El operador lógico AND (&&):

El operador AND lógico (&&) en JavaScript evalúa dos o más expresiones y retorna un valor basado en su evaluación. Es útil para ejecutar código cuando todas las condiciones son verdaderas.

EJEMPLO:

let edad = 25;
let tieneLicencia = true;

if (edad >= 18 && tieneLicencia) {
  console.log("Puedes conducir");
}Lenguaje del código: JavaScript (javascript)

En este ejemplo:

• edad >= 18 verifica si la edad es mayor o igual a 18.
• tieneLicencia verifica si la persona tiene licencia.
• && une ambas condiciones.
• Si ambas condiciones son verdaderas, console.log de JavaScript ejecutará el código dentro del if. En este caso sería «Puedes conducir»

2.1.1. Comportamiento del operador &&:

• Evalúa de izquierda a derecha.
• Si encuentra un valor falso en cualquier parte de la evaluación, retorna ese valor inmediatamente y no evalúa las siguientes expresiones (esto se llama «cortocircuito»).
• Si todas las expresiones son verdaderas, retorna el último valor evaluado.

2.1.2. ¿Cómo usar el operador &&? Paso a paso:

1. Identifica las condiciones:
   • Define las expresiones booleanas que quieres evaluar. Estas pueden ser comparaciones (mayor que, menor que, igual), resultados de funciones que devuelvan booleanos, o cualquier otra expresión que se evalúe a verdadero o falso.
2. Une las condiciones con &&:
   • Coloca el operador && entre las condiciones que quieres combinar.
3. Evalúa la expresión:
   • JavaScript evaluará las condiciones de izquierda a derecha. Si encuentra una condición falsa, se detendrá y el resultado de toda la expresión será falso. Si todas las condiciones son verdaderas hasta el final, el resultado será verdadero.
4. Utiliza el resultado en una estructura de control:
   • Generalmente, el resultado del operador && se utiliza dentro de una estructura de control como if para tomar decisiones en función del resultado.

2.1.3. ¿Cuándo se usa el operador &&?

• Validaciones: Para verificar que múltiples condiciones se cumplan antes de realizar una acción.
• Decisiones: Para tomar decisiones basadas en la combinación de varias circunstancias.
• Creación de expresiones más complejas: Se puede combinar con otros operadores lógicos para crear expresiones más sofisticadas.

2.1.4. Evaluación del operador && con valores no booleanos:

¿Qué son los valores no booleanos en JavaScript?

En JavaScript, no todos los valores son estrictamente true o false. Ciertos valores se consideran «truthy» (verdaderos) o «falsy» (falsos), dependiendo de cómo se evalúan en un contexto lógico. Esto significa que el operador && no solo evalúa valores booleanos (true o false), sino que puede evaluar cualquier tipo de dato y devolver ese valor como resultado.

• Valores «falsy»: Aquellos que se evalúan como false en un contexto lógico. Los principales son:
  • false — El valor booleano falso.
  • 0 — El número cero.
  • "" (una cadena vacía) — Un string sin caracteres.
  • null — Representa la ausencia de valor.
  • undefined — Indica que una variable no tiene valor asignado
  • NaN — Significa «Not a Number» (No es un número).
• Valores «truthy»: Cualquier otro valor que no sea considerado «falsy» se evalúa como true. Ejemplos:
  • Cualquier valor numérico distinto de 0 (por ejemplo, -1, 1.5).
  • Cualquier cadena de texto no vacía (por ejemplo, "hola", " ").
  • Objetos y arrays (incluso si están vacíos, como {} o []).
  • Funciones.
  • El valor booleano true.

¿Cómo funciona && con valores no booleanos?

Cuando se utilizan valores no booleanos con el operador &&, éste no convierte automáticamente los valores a true o false. En lugar de eso, simplemente retorna el primer valor que se evalúa como falso o, si no encuentra ningún valor falso, retorna el último valor (sigue el comportamiento de cortocircuito).

Ejemplo 1: Primer valor «falsy».

console.log(0 && "Hola"); // 0Lenguaje del código: JavaScript (javascript)

• Aquí, 0 es un valor «falsy», por lo tanto, el operador && retorna inmediatamente 0 sin evaluar el segundo valor ("Hola"). Esto ocurre porque, con el operador &&, si una de las expresiones es falsa, el resultado total será falso, y no necesita seguir evaluando el resto.

Ejemplo 2: Todos los valores son «truthy».

console.log("Hola" && 123); // 123Lenguaje del código: JavaScript (javascript)

• En este caso, ambos valores son «truthy» ("Hola" y 123), por lo que el operador && evalúa ambas expresiones y devuelve el último valor, que es 123. Esto ocurre porque si todos los valores son verdaderos, el resultado total también será verdadero, y el operador devuelve el último valor evaluado.

Ejemplo 3: Combinación de varios valores.

console.log("Texto" && 42 && true && "JavaScript"); // "JavaScript"<span style="background-color: initial; color: var(--ast-global-color-8);"></span>Lenguaje del código: JavaScript (javascript)

• Aquí, todos los valores son «truthy», por lo que el operador && evalúa todas las expresiones y retorna el último valor evaluado, que es "JavaScript".

Ejemplo 4: Encuentra un valor «falsy»

console.log("Texto" && 0 && true && "JavaScript"); // 0Lenguaje del código: JavaScript (javascript)

• En este caso, el operador && encuentra 0, que es «falsy», en la segunda posición. Por lo tanto, retorna inmediatamente 0 y deja de evaluar las expresiones restantes.

Resumen del comportamiento del operador && con valores no booleanos:

• El operador && evalúa las expresiones de izquierda a derecha.
• Si encuentra un valor «falsy», devuelve ese valor y deja de evaluar las expresiones siguientes.
• Si todos los valores son «truthy», devuelve el último valor evaluado.

2.1.5. Ejemplo más complejo usando el operador lógico AND (&&):

let hora = 10;
let dia = "domingo";

if (hora >= 9 && hora <= 17 && dia !== "domingo") {
  console.log("La tienda está abierta.");
} else {
  console.log("La tienda está cerrada.");
}Lenguaje del código: JavaScript (javascript)

Análisis de este ejemplo:

Este código utiliza el operador lógico AND (&&) para verificar varias condiciones al mismo tiempo, con el propósito de determinar si una tienda está abierta o cerrada, basándose en la hora y el día. Vamos a analizarlo paso a paso:

1. Variables: Primero se crean dos variables JavaScript:
   • hora = 10: Representa la hora actual (10 de la mañana).
   • dia = "domingo": Representa el día actual, que es domingo.
2. Condicional: Aquí tenemos una estructura if-else que evalúa tres condiciones con el operador AND (&&). (dentro de la estructura se usan operadores de asignación JavaScript).
   • hora >= 9: La primera condición >= verifica si la hora es mayor o igual a 9 (la hora de apertura de la tienda).
   • hora <= 17: La segunda condición verifica si la hora es menor o igual a 17 (la hora de cierre de la tienda).
   • dia !== "domingo": La tercera condición verifica si no es domingo (!== significa «no es igual a»). Esto implica que la tienda está cerrada los domingos.
3. El operador AND (&&):
   • El operador AND evalúa que todas las condiciones deben ser verdaderas para que el bloque de código if se ejecute. Si alguna de las condiciones es falsa, entonces se ejecutará el bloque else.
4. Análisis del código con los valores actuales:
   • hora >= 9: Esta condición es true, porque la hora es 10, que es mayor o igual a 9.
   • hora <= 17: Esta condición también es true, porque la hora es 10, que es menor o igual a 17.
   • dia !== "domingo": Esta condición es false, porque el día es «domingo», lo cual no cumple con la condición de que no sea domingo.
5. Resultado final:
   • Como la tercera condición es falsa (dia !== "domingo" es false), el operador AND (&&) determina que no todas las condiciones son verdaderas.
   • Debido a que el operador AND necesita que todas las condiciones sean verdaderas para ejecutar el bloque if, el código ejecuta el bloque else, que imprime: console.log("La tienda está cerrada.");

2.1.6. Conclusión del operador lógico AND (&&):

Este tipo de lógica es muy común para verificar si ciertas variables existen antes de realizar operaciones más complejas, lo que ayuda a evitar errores y optimizar el rendimiento del código.

Además, el operador && en JavaScript no solo trabaja con valores booleanos, sino también con cualquier tipo de dato. El operador sigue una lógica simple:

• Retorna el primer valor «falsy» que encuentra o, si no hay ningún valor «falsy», retorna el último valor evaluado.

2.2. El operador lógico OR (||):

El operador lógico OR (||) en JavaScript es utilizado para evaluar dos o más expresiones y devolver el primer valor verdadero que encuentre. Si todas las expresiones son falsas, entonces devuelve el último valor evaluado.

Al igual que el operador AND (&&), el operador OR realiza una evaluación de cortocircuito, lo que significa que deja de evaluar tan pronto como encuentra un valor verdadero.

2.2.1. Comportamiento básico del operador ||:

• Evalúa las expresiones de izquierda a derecha.
• Si encuentra un valor que se evalúa como verdadero (truthy), retorna ese valor inmediatamente. (sigue el concepto de cortocircuito)
• Si todos los valores son falsos (falsy), retorna el último valor.

2.2.2. Ejemplo usando operador ||:

let nombreUsuario = "";
let nombrePorDefecto = "Invitado";

let nombreAMostrar = nombreUsuario || nombrePorDefecto;

console.log(nombreAMostrar); // "Invitado"Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Variables:
   • nombreUsuario = "": Esta variable representa el nombre ingresado por el usuario. En este caso, está vacía (un valor «falsy»).
   • nombrePorDefecto = "Invitado": Es un valor alternativo que queremos mostrar si nombreUsuario está vacío.
2. Operador OR (||):
   • nombreAMostrar = nombreUsuario || nombrePorDefecto: Aquí usamos el operador OR para evaluar ambas variables.
   • El operador OR (||) evalúa las expresiones de izquierda a derecha y devuelve el primer valor que sea verdadero (o «truthy»).
3. Evaluación del operador OR:
   • Primera expresión (nombreUsuario): "" es un valor «falsy» en JavaScript, lo que significa que se evalúa como false. Entonces, el operador OR continúa evaluando la siguiente expresión.
   • Segunda expresión (nombrePorDefecto): "Invitado" es un valor «truthy» porque es una cadena no vacía, lo que significa que se evalúa como true.
   • Como "Invitado" es el primer valor «truthy» que encuentra, nombreAMostrar se asigna con este valor.
4. Resultado:
   • El valor "Invitado" es impreso en la consola porque es el primer valor «truthy» que encontró el operador OR. Si nombreUsuario hubiera sido un valor válido (por ejemplo, "Manuel"), el operador OR habría seleccionado ese valor.

2.2.3. ¿Cómo usar el operador ||? Paso por paso:

1. Identifica las condiciones:
   • Define las expresiones booleanas que quieres evaluar. Pueden ser comparaciones, resultados de funciones que devuelvan booleanos, o cualquier otra expresión que se evalúe a verdadero o falso.
2. Une las condiciones con ||:
   • Coloca el operador || entre las condiciones que quieres combinar.
3. Evalúa la expresión:
   • JavaScript evaluará las condiciones de izquierda a derecha. Si encuentra una condición verdadera, se detendrá y el resultado de toda la expresión será verdadero. Si todas las condiciones son falsas hasta el final, el resultado será falso.
4. Utiliza el resultado en una estructura de control:
   • Generalmente, el resultado del operador || se utiliza dentro de una estructura de control como if para tomar decisiones en función del resultado.

2.2.4. El operador || también trabaja con valores no booleanos:

Al igual que en el caso del operador &&, el operador || trabaja con cualquier tipo de dato, no solo booleanos. Recordemos que en JavaScript, algunos valores se consideran «falsy» y otros «truthy» (en el punto 2.1.4. explicamos estos conceptos).

Al trabajar con valores no booleanos seguirá su lógica de encontrar el primer valor truthy o devolver el último valor si todos son falsos.

2.2.5. Uso común del operador || en JavaScript:

El operador || es muy útil para establecer valores predeterminados o manejar casos en los que una variable podría ser null o undefined. Es común verlo en lógica de inicialización y asignación de variables.

Ejemplo 1: Valores predeterminados:

let nombre = usuarioNombre || "Invitado";
console.log(nombre); // "Invitado" si `usuarioNombre` es falsyLenguaje del código: JavaScript (javascript)

• Si la variable usuarioNombre es «falsy» (por ejemplo, si es null, undefined, "", etc.), el operador || asigna el valor "Invitado". Si usuarioNombre tiene un valor «truthy», ese valor se asignará en su lugar.

Ejemplo 2: Verificar múltiples condiciones:

let resultado = obtenerValor() || obtenerValorAlternativo();
console.log(resultado);Lenguaje del código: JavaScript (javascript)

• En este caso, si obtenerValor() devuelve un valor «falsy», se ejecutará la función obtenerValorAlternativo() para proporcionar un valor alternativo.

2.2.6. Conclusión sobre el operador || en JavaScript::

• El operador || evalúa expresiones de izquierda a derecha.
• Retorna el primer valor «truthy» que encuentra y deja de evaluar las demás expresiones.
• Si todas las expresiones son «falsy», retorna el último valor.
• Es muy útil para establecer valores predeterminados y evitar errores al manejar valores como null o undefined.

2.3. El operador lógico NOT (!):

El operador lógico NOT (!) en JavaScript es un operador unario que se utiliza para invertir el valor de una expresión o variable. Es decir, convierte un valor verdadero en falso, y un valor falso en verdadero.

Sintaxis:

!expresión

2.3.1. ¿Cómo usar el operador lógico NOT (!)? Paso por paso:

1. Identifica la expresión:
   • Define la condición que quieres invertir. Puede ser una simple comparación, una variable booleana o una expresión más compleja.
2. Coloca el operador NOT antes de la expresión:
   • El signo de exclamación (!) debe ir inmediatamente antes de la expresión que quieres negar.
3. Evalúa la expresión:
   • JavaScript evaluará la expresión original y luego invertirá su resultado.

2.3.2. ¿Cómo funciona el operador !?:

• ! toma una expresión y la convierte en su valor booleano contrario.
• Si la expresión se evalúa como true (verdadero), ! la convierte en false.
• Si la expresión se evalúa como false (falso), ! la convierte en true.

2.3.3. Ejemplos simples con valores booleanos:

Ejemplo 1: Valor verdadero:

let a = true;
console.log(!a); // falseLenguaje del código: JavaScript (javascript)

• Aquí, a es true, pero el operador ! invierte ese valor y devuelve false.

Ejemplo 2: Valor falso:

let b = false;
console.log(!b); // trueLenguaje del código: JavaScript (javascript)

• En este caso, b es false, pero el operador ! invierte el valor y devuelve true.

2.3.4. Uso del operador ! con valores no booleanos:

El operador ! también puede trabajar con cualquier valor, no solo con valores booleanos. Sin embargo, en estos casos, primero convierte el valor a su equivalente booleano (truthy o falsy), y luego invierte ese valor (recuerda que los valores truthy y falsy los explicamos en el punto 2.1.4.).

Ejemplo 1: Valor «falsy»:

let valor = 0;
console.log(!valor); // trueLenguaje del código: JavaScript (javascript)

• Aquí, 0 es un valor «falsy», por lo que !0 devuelve true (el inverso de false).

Ejemplo 2: Valor «truthy»:

let valor = "Hola";
console.log(!valor); // falseLenguaje del código: JavaScript (javascript)

• En este caso, "Hola" es un valor «truthy», por lo que ! lo convierte en false.

2.3.5. Doble negación (!!):

Una práctica común en JavaScript es usar el operador ! dos veces seguidas (!!). Esto sirve para convertir cualquier valor en su equivalente booleano. El primer ! invierte el valor, y el segundo ! lo vuelve a invertir, resultando en su valor booleano original.

Ejemplo:

let valor = "Texto";
console.log(!!valor); // trueLenguaje del código: JavaScript (javascript)

• "Texto" es un valor «truthy». Usar !!valor primero convierte "Texto" a false (por el primer !) y luego a true (por el segundo !). Es una forma rápida de convertir un valor a true o false sin importar su tipo original.

Otro ejemplo:

let valor = 0;
console.log(!!valor); // falseLenguaje del código: JavaScript (javascript)

• Aquí, 0 es un valor «falsy», y la doble negación devuelve false.

2.3.6. Uso común del operador !:

El operador ! se utiliza principalmente para verificar si una condición es falsa o para asegurarse de que algo no está ocurriendo. Es muy común en condiciones if, ciclos, y para manejar errores o validaciones.

Ejemplo práctico:

let usuarioAutenticado = false;

if (!usuarioAutenticado) {
  console.log("Acceso denegado");
}Lenguaje del código: JavaScript (javascript)

• En este ejemplo, la condición !usuarioAutenticado verifica si el usuario no está autenticado. Si usuarioAutenticado es false, el operador ! lo convierte en true, ejecutando el bloque de código.

2.3.7. Resumen del operador !:

• ! invierte el valor booleano de una expresión o variable.
• Convierte un valor «truthy» en false y un valor «falsy» en true.
• !! se usa para convertir cualquier valor en su correspondiente booleano.

Ejemplos de resumen:

console.log(!true);    // false
console.log(!false);   // true
console.log(!0);       // true (porque 0 es falsy)
console.log(!"Hola");  // false (porque "Hola" es truthy)
console.log(!!123);    // true (convierto 123 en su valor booleano equivalente)
console.log(!!null);   // false (porque null es falsy)Lenguaje del código: JavaScript (javascript)

En resumen, el operador ! es una herramienta fundamental para controlar el flujo de un programa, permitiendo manejar condiciones opuestas de manera sencilla.

3. Uso combinado y precedencia de los operadores lógicos en JavaScript.

El uso combinado de los operadores lógicos en JavaScript (AND &&, OR ||, y NOT !) permite construir expresiones más complejas y tomar decisiones condicionales con mayor precisión. Al combinarlos, puedes evaluar múltiples condiciones, aplicar lógica inversa, y crear estructuras de control más avanzadas.

Antes de ver su uso combinado, es importante conocer que es la precedencia de estos operadores lógicos en JavaScript

3.1. Precedencia de operadores lógicos:

En JavaScript, los operadores lógicos tienen una jerarquía de precedencia. Esto determina el orden en que se evalúan cuando hay múltiples operadores en una misma expresión.

1. Operador lógico NOT (!):
   • Tiene la mayor precedencia entre los operadores lógicos. Esto significa que siempre se evalúa primero cuando está presente en una expresión.
2. Operador lógico AND (&&):
   • Tiene la siguiente precedencia después de !. Cuando aparece junto con el operador OR (||), AND se evalúa antes.
3. Operador lógico OR (||):
   • Tiene la precedencia más baja entre los operadores lógicos. Esto significa que si no usas paréntesis para alterar el orden, se evaluará después de && y !.

Orden de precedencia:

1. ! (NOT)
2. && (AND)
3. || (OR)

3.1.1. Uso de paréntesis para afectar el orden de precedencia:

• Los paréntesis se utilizan para alterar el orden de precedencia y garantizar que ciertas partes de una expresión se evalúen primero, sin importar la precedencia natural de los operadores.
• Sin paréntesis, los operadores se evalúan según su precedencia natural. Con paréntesis, puedes controlar qué partes de la expresión se evalúan primero, haciendo el código más claro y preciso.

EJEMPLO 1: Sin paréntesis:

Veamos un ejemplo en el que mezclamos los operadores lógicos y cómo la precedencia influye en el resultado:

let a = true;
let b = false;
let c = true;

let resultado = a || b && c;
console.log(resultado); // trueLenguaje del código: JavaScript (javascript)

Evaluación paso a paso:

1. Precedencia del operador AND (&&):
   • Primero, se evalúa b && c. En este caso, b es false y c es true.El resultado de b && c es false (porque en && ambas partes deben ser verdaderas).
   • Después de evaluar el &&, la expresión queda como: a || false;
2. Operador OR (||):
   • Luego, se evalúa a || false. Aquí, a es true, por lo que el operador OR retorna el primer valor «truthy», que es true.
   • Resultado final: true;

EJEMPLO 2: Con paréntesis:

Ahora, usando paréntesis para alterar la precedencia de los operadores:

let a = true;
let b = false;
let c = true;

let resultado = (a || b) && c;
console.log(resultado); // trueLenguaje del código: JavaScript (javascript)

Evaluación paso a paso:

1. Paréntesis:
   • Debido a los paréntesis, la expresión a || b se evalúa primero. a es true y b es false, por lo que a || b se evalúa como true (porque OR devuelve true si al menos uno de los valores es verdadero).
   • La expresión se convierte en: true && c;
2. Operador AND (&&):
   • Luego, se evalúa true && c. Dado que c también es true, el resultado de true && true es true.
   • Resultado final: true;

EJEMPLO 3: Uso del operador NOT (!)

El operador NOT tiene la mayor precedencia. Veamos cómo afecta su comportamiento:

let a = true;
let b = false;

let resultado = !a || b;
console.log(resultado); // falseLenguaje del código: JavaScript (javascript)

Evaluación paso a paso:

1. Operador NOT (!):
   • Se evalúa primero !a. Dado que a es true, !a se convierte en false.
   • La expresión queda: false || b;
2. Operador OR (||):
   • Luego, se evalúa false || b. Como b es false, el resultado final es false.
   • Resultado final: false;

3.1.2. CONCLUSIÓN: ¿Cuándo usar paréntesis?

Siempre que tengas operadores mezclados (!, &&, ||), es importante que entiendas la precedencia de estos operadores para evitar errores lógicos. Usar paréntesis cuando la lógica es compleja o cuando quieres asegurar un orden específico de evaluación es una buena práctica, ya que hace el código más claro y predecible.

REGLA GENERAL: Si tienes cualquier duda sobre cómo se va a evaluar una expresión compleja, usa paréntesis para asegurarte de que el código haga exactamente lo que quieres.

3.2. Uso combinado de &&, ||, y !:

A continuación te muestro algunos ejemplos prácticos de cómo se pueden combinar estos operadores para resolver problemas condicionales.

3.2.1. Ejemplo 1: Evaluar múltiples condiciones con && y ||

El código que presentas evalúa si una persona puede conducir dependiendo de su edad y si tiene una licencia, combinando operadores lógicos AND (&&) y OR (||).

A continuación, dejamos un análisis detallado, explicando cómo JavaScript evalúa estas condiciones.

let edad = 25;
let tieneLicencia = true;

if (edad >= 18 && tieneLicencia || edad === 16) {
  console.log("Puedes conducir.");
} else {
  console.log("No puedes conducir.");
}Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo paso a paso:

1. Variables iniciales:
   • let edad = 25;: La variable edad tiene el valor 25, que es mayor de 18.
   • let tieneLicencia = true;: La variable tieneLicencia es true, lo que significa que la persona tiene licencia para conducir.
2. Evaluación de la condición if: La condición del if utiliza una combinación de operadores AND (&&) y OR (||): if (edad >= 18 && tieneLicencia || edad === 16). Para evaluar esta expresión, debemos considerar el orden de precedencia de los operadores lógicos en JavaScript:
   • El AND (&&) tiene mayor precedencia que el OR (||), por lo que JavaScript evalúa primero la parte que contiene &&.
   • Una vez evaluada esa parte, se realiza la comparación con el operador ||.
3. Evaluación con cortocircuito y precedencia: Vamos a dividir la evaluación en pasos para ver cómo JavaScript procesa la expresión.
   • Primera comparación (edad >= 18 && tieneLicencia):
     • edad >= 18 evalúa si edad es mayor o igual a 18. En este caso, edad es 25, por lo que esta expresión es true.
     • Luego, tieneLicencia es true, ya que la persona tiene licencia.
     • Como ambas condiciones son true, la expresión completa edad >= 18 && tieneLicencia se evalúa como true.
   • Segunda comparación (edad === 16):
     • Después de evaluar edad >= 18 && tieneLicencia, JavaScript pasa a evaluar edad === 16.
     • En este caso, edad es 25, por lo que edad === 16 se evalúa como false.
4. Uso del operador ||:
   • Ahora JavaScript evalúa la expresión completa con el operador OR (||):
   • El resultado de edad >= 18 && tieneLicencia es true y el resultado de edad === 16 es false.
   • Como el operador OR (||) devuelve true si al menos una de las expresiones es true, la condición final es true.
5. Resultado de la condición:
   • Dado que la condición if es true, el programa ejecuta el siguiente código:
   • console.log("Puedes conducir.");

Conclusión del ejemplo:

Este código evalúa si una persona puede conducir bajo dos posibles escenarios:

• La persona tiene 18 años o más y tiene licencia para conducir.
• O, la persona tiene exactamente 16 años.

En este caso, como edad es 25 y la persona tiene licencia, cumple la primera condición, por lo que la salida es "Puedes conducir.".

3.2.2. Ejemplo 2: Forzar precedencia con paréntesis

let a = true;
let b = false;
let c = true;

if (a || (b && !c)) {
  console.log("Se cumple la condición.");
} else {
  console.log("No se cumple la condición.");
}Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo paso a paso:

1. Variables iniciales:
   • let a = true;: La variable a tiene el valor true.
   • let b = false;: La variable b tiene el valor false.
   • let c = true;: La variable c tiene el valor true.
2. Evaluación de la condición if: La condición que se evalúa es: if (a || (b && !c)). Para evaluar esta expresión, es importante tener en cuenta el orden de precedencia de los operadores lógicos:
   • NOT (!) tiene la mayor precedencia, por lo que se evalúa primero.
   • AND (&&) tiene mayor precedencia que OR (||), por lo que después de ! se evalúa b && !c.
   • Finalmente, se evalúa el OR (||).
3. Evaluación con precedencia: Vamos a dividir la evaluación en pasos basándonos en la precedencia de los operadores lógicos.
   • Primera evaluación (!c):
     • El operador NOT (!) se aplica primero a la variable c, que tiene el valor true.
     • !c invierte el valor de c, por lo que !c se convierte en false.
     • Ahora tenemos la expresión reducida a:javascriptCopiar códigoif (a || (b && false))
   • Segunda evaluación (b && !c):
     • A continuación, se evalúa la expresión b && false.
     • Dado que el valor de b es false, y el operador AND (&&) requiere que ambas condiciones sean verdaderas para que el resultado sea true, la expresión completa b && false es false.
     • La expresión se reduce ahora a:javascriptCopiar códigoif (a || false)
   • Tercera evaluación (a || false):
     • Finalmente, se evalúa la expresión a || false.
     • Como a tiene el valor true, y el operador OR (||) devuelve true si al menos una de las condiciones es verdadera, el resultado final es true.
4. Resultado de la condición:
   • Dado que la condición del if es true, el bloque de código dentro del if se ejecuta:javascriptCopiar códigoconsole.log("Se cumple la condición.");

Resumen del análisis:

Este código verifica una condición compuesta usando OR y AND, junto con la inversión de valores con NOT. Dado que a es true, la condición completa también resulta true, sin necesidad de evaluar más allá de la primera parte del OR (||), lo que hace que se imprima "Se cumple la condición.".

3.2.3. Ejemplos de uso práctico en código real:

El uso combinado de operadores lógicos es útil en situaciones más complejas, como:

Validaciones de formularios:

let nombre = "Juan";
let email = "";
let esMayorDeEdad = true;

if (nombre && email && esMayorDeEdad) {
  console.log("Formulario válido.");
} else {
  console.log("Formulario inválido.");
}Lenguaje del código: JavaScript (javascript)

Explicación paso a paso:

1. Variables iniciales:
   • let nombre = "Juan";: El valor de la variable nombre es la cadena "Juan", lo que se considera un valor «truthy» en JavaScript (ya que cualquier cadena no vacía es «truthy»).
   • let email = "";: La variable email es una cadena vacía "", lo que es un valor «falsy» en JavaScript (las cadenas vacías son consideradas como false).
   • let esMayorDeEdad = true;: El valor de esMayorDeEdad es true, por lo tanto, es un valor «truthy».
2. Evaluación de la condición if: El bloque if contiene una combinación de tres expresiones con el operador lógico AND (&&):
   • if (nombre && email && esMayorDeEdad)
3. Precedencia y evaluación de los operadores lógicos: El operador lógico AND (&&) tiene una precedencia de izquierda a derecha y sigue una estrategia de cortocircuito. Esto significa que si una de las condiciones es «falsy», JavaScript dejará de evaluar el resto de las expresiones, porque el resultado completo de la operación ya será false.
   • Primera comparación (nombre && email):
     • La primera expresión que se evalúa es nombre && email.
     • nombre es "Juan", que es «truthy».
     • email es "", que es «falsy».
     • Debido a que email es «falsy», la evaluación se detiene aquí (no se evalúa esMayorDeEdad), y la expresión completa nombre && email && esMayorDeEdad resulta ser false.
4. Resultado de la condición:
   • Dado que la expresión completa es false (por la cadena vacía en email), el bloque else se ejecuta.
   • El programa ejecuta el siguiente código:javascriptCopiar códigoconsole.log("Formulario inválido.");

RESUMEN:

Este código valida el formulario comprobando si todas las condiciones (nombre, email y esMayorDeEdad) son verdaderas. Como email es una cadena vacía (valor «falsy»), la validación falla, y se imprime "Formulario inválido." en la consola.

3.3. Consejos al combinar operadores lógicos:

• Cortocircuito: Tanto && como || pueden dejar de evaluar expresiones cuando ya han encontrado un resultado que determina el valor final. Esto puede mejorar el rendimiento en ciertos casos y también evitar errores, como tratar de acceder a una propiedad de null o undefined.
• Precedencia: Recuerda que ! se evalúa primero, seguido de && y luego ||. Si no estás seguro del orden en que se evaluarán las expresiones, es mejor usar paréntesis para hacerlo explícito.

4. Operadores lógicos JavaScript en asignaciones y expresiones.

Los operadores lógicos en JavaScript no solo se usan en condiciones simples dentro de estructuras como if-else, sino que también tienen un uso poderoso en asignaciones condicionales de valores y evaluación de funciones, lo que te permite escribir código más conciso, legible y eficiente.

A continuación, ampliamos este concepto y su aplicación práctica.

4.1. Asignaciones condicionales:

Los operadores lógicos, como && (AND) y || (OR), se pueden usar directamente al asignar valores a variables, para decidir qué valor asignar dependiendo de ciertas condiciones. En lugar de usar estructuras if-else, se puede utilizar estos operadores para realizar la asignación de manera más concisa.

4.1.1. Ejemplo de asignación con OR (||):

let usuario = null;
let nombre = usuario || "Invitado";
console.log(nombre);  // "Invitado"Lenguaje del código: JavaScript (javascript)

En este caso, si la variable usuario es null o cualquier otro valor «falsy», se le asigna el valor "Invitado". El operador lógico OR (||) evalúa el valor de usuario. Como usuario es null (falsy), se asigna «Invitado» a la variable nombre. Se imprime «Invitado» en la conso

4.1.2. Ejemplo de asignación con AND (&&):

let isAdmin = true;
let access = isAdmin && "Acceso concedido";
console.log(access);  // "Acceso concedido"Lenguaje del código: JavaScript (javascript)

Aquí, si isAdmin es true, se asigna el valor "Acceso concedido" a la variable access. Si isAdmin fuera false, la expresión completa devolvería false, y no se asignaría el texto.

4.2. Expresiones:

Una expresión es cualquier fragmento de código que devuelve un valor, lo cual incluye tanto operaciones matemáticas como operaciones lógicas, o incluso llamadas a funciones. En este contexto, los operadores lógicos pueden evaluarse en el medio de una expresión para decidir el flujo o resultado de esa expresión.

4.2.1. Ejemplo en una expresión:

let edad = 20;
let mensaje = (edad >= 18) && "Eres mayor de edad";
console.log(mensaje);  // "Eres mayor de edad"Lenguaje del código: JavaScript (javascript)

Aquí, la expresión edad >= 18 es true, por lo que se evalúa el lado derecho del operador AND (&&) y el valor "Eres mayor de edad" se asigna a la variable mensaje.

Si la expresión fuera false, entonces && devolvería false, y la asignación no ocurriría, por ejemplo:

let edad = 16;
let mensaje = (edad >= 18) && "Eres mayor de edad";
console.log(mensaje);  // falseLenguaje del código: JavaScript (javascript)

4.3. Ventajas del uso en asignaciones y expresiones:

• Concisión: Se evita la necesidad de escribir estructuras if-else explícitas.
• Legibilidad: El código es más fácil de leer, ya que se combina la lógica con la asignación.
• Eficiencia: Los operadores lógicos implementan cortocircuito. Si se encuentra una condición que ya determina el resultado, JavaScript no evalúa las demás expresiones.

5. Uso de operadores lógicos con funciones en Javascript.

El uso de operadores lógicos dentro de funciones en JS permite simplificar la lógica y mejorar el control de flujo, lo que conduce a un código más limpio y eficiente. Los operadores lógicos pueden reemplazar estructuras como if-else en muchos casos, permitiendo que las funciones sean más compactas y fáciles de leer.

5.1. Simplificación de funciones con operadores lógicos

Al usar operadores lógicos dentro de funciones, puedes evitar el uso de bloques condicionales complejos y mantener las evaluaciones más simples y claras.

Esto también puede hacer que tu código sea más eficiente, ya que los operadores lógicos pueden «cortar» la evaluación cuando se cumplen ciertas condiciones (corto circuito).

5.1.1. Operador OR (||) en funciones

El operador OR (||) se utiliza para devolver el primer valor verdadero (truthy) encontrado en una serie de condiciones. Esto es útil para definir valores por defecto dentro de una función o para evitar la ejecución de lógica adicional si ya se tiene un valor válido.

function obtenerNombreUsuario(nombreUsuario) {
    return nombreUsuario || "Invitado";
}

console.log(obtenerNombreUsuario("Manuel")); // "Manuel"
console.log(obtenerNombreUsuario(""));        // "Invitado"Lenguaje del código: JavaScript (javascript)

• Explicación: Si nombreUsuario tiene un valor válido (truthy), la función lo devolverá. Si nombreUsuario es un valor falsy (como "", null, undefined), retornará "Invitado".

5.1.2. Operador AND (&&) en funciones

El operador AND (&&) se usa para evaluar una segunda expresión solo si la primera es verdadera (truthy). Esto te permite ejecutar partes de una función condicionalmente, de forma concisa.

function mostrarMensajeBienvenida(estaLogueado) {
    estaLogueado && console.log("Bienvenido al sistema!");
}

mostrarMensajeBienvenida(true);  // "Bienvenido al sistema!"
mostrarMensajeBienvenida(false); // (No muestra nada)Lenguaje del código: JavaScript (javascript)

• Explicación: El mensaje de bienvenida se muestra solo si estaLogueado es true. Si es false, la función no ejecuta console.log.

5.2. Control de flujo en funciones con operadores lógicos

Los operadores lógicos pueden mejorar el control de flujo en una función al permitir que se tomen decisiones sobre qué se ejecuta y cuándo de forma más directa que con condicionales tradicionales.

5.2.1. Usar || para valores predeterminados en funciones.

Si una función espera ciertos parámetros que podrían no ser proporcionados, puedes usar el operador OR (||) para asignar valores predeterminados si los parámetros son undefined o falsy.

function crearPerfil(nombre, edad) {
    nombre = nombre || "Anónimo";
    edad = edad || 18;

    return `Nombre: ${nombre}, Edad: ${edad}`;
}

console.log(crearPerfil("Manuel", 30)); // "Nombre: Manuel, Edad: 30"
console.log(crearPerfil());             // "Nombre: Anónimo, Edad: 18"Lenguaje del código: JavaScript (javascript)

• Explicación: Si nombre o edad no se proporcionan o son valores falsy (como undefined), se asignan valores predeterminados "Anónimo" y 18, respectivamente.

5.2.2. Uso del operador AND (&&) para ejecutar acciones condicionalmente

El operador AND (&&) es útil cuando necesitas ejecutar una acción solo si se cumple una condición específica.

function enviarNotificacion(usuario) {
    usuario.estaLogueado && console.log(`Notificación enviada a ${usuario.nombre}`);
}

let usuario = { nombre: "Manuel", estaLogueado: true };
enviarNotificacion(usuario); // "Notificación enviada a Manuel"

usuario.estaLogueado = false;
enviarNotificacion(usuario); // No se ejecutaLenguaje del código: JavaScript (javascript)

• Explicación: La notificación solo se envía si usuario.estaLogueado es true. Si no lo es, la función simplemente no ejecuta el console.log.

5.2.3. Uso combinado de && y || en funciones

En funciones más avanzadas, puedes combinar && y || para crear lógica más eficiente.

function obtenerRolUsuario(rol) {
    return rol === "admin" && "Administrador" || "Usuario Regular";
}

console.log(obtenerRolUsuario("admin"));   // "Administrador"
console.log(obtenerRolUsuario("cliente")); // "Usuario Regular"Lenguaje del código: JavaScript (javascript)

• Explicación: Si rol es "admin", se devuelve "Administrador". Si no, se devuelve "Usuario Regular". El uso combinado de && y || permite una lógica más compacta que un if-else tradicional.

5.3. Evaluación condicional de funciones

Además de usarse para asignaciones y control de flujo, los operadores lógicos también pueden hacer que las funciones se evalúen solo bajo ciertas condiciones. Esto permite una ejecución eficiente, especialmente en casos en los que no es necesario evaluar funciones si no se cumplen las condiciones iniciales.

5.3.1. Llamar a funciones condicionalmente con AND (&&)

Puedes usar el operador AND (&&) para ejecutar una función solo si una condición es verdadera, evitando así llamadas innecesarias.

function saludar(nombre) {
    return `¡Hola, ${nombre}!`;
}

let usuario = { nombre: "Manuel", estaLogueado: true };

// Solo se ejecuta saludar si usuario.estaLogueado es true
usuario.estaLogueado && console.log(saludar(usuario.nombre)); 
// "¡Hola, ManuelLenguaje del código: JavaScript (javascript)

• Explicación: La función saludar solo se ejecuta si usuario.estaLogueado es true. Si es false, la función no se llama, lo que evita operaciones innecesarias.

5.3.2. Valores por defecto en funciones con OR (||)

Si tienes una función que depende de parámetros, puedes usar el operador OR (||) para proporcionar valores por defecto cuando los argumentos no se pasen o sean undefined.

function obtenerDescuento(precio, descuento) {
    descuento = descuento || 0.10; // 10% de descuento por defecto
    return precio - (precio * descuento);
}

console.log(obtenerDescuento(100));      // 90
console.log(obtenerDescuento(100, 0.20)); // 80Lenguaje del código: JavaScript (javascript)

• Explicación: Si descuento no se pasa como argumento, se establece un valor por defecto de 0.10 (10%).

5.4. Optimización de flujo con operadores lógicos en funciones

El uso de operadores lógicos no solo simplifica el código, sino que también optimiza el flujo de las funciones. En lugar de tener múltiples bloques condicionales, puedes reducir la cantidad de código innecesario utilizando operadores lógicos para manejar condiciones y valores de manera eficiente.

5.4.1. Manejo de errores o valores no válidos

Puedes usar el operador OR (||) para devolver un valor seguro o ejecutar una función de respaldo si algo sale mal, mejorando el control de errores.

function obtenerPrecio(producto) {
    return producto.precio || "Precio no disponible";
}

let producto1 = { nombre: "Laptop", precio: 1000 };
let producto2 = { nombre: "Monitor" };

console.log(obtenerPrecio(producto1)); // 1000
console.log(obtenerPrecio(producto2)); // "Precio no disponible"Lenguaje del código: JavaScript (javascript)

• Explicación: Si producto.precio no está definido, se devuelve el mensaje "Precio no disponible" en lugar de un valor indefinido.

5.5. Conclusión sobre usar operadores lógicos dentro de funciones:

Usar operadores lógicos dentro de funciones en JavaScript te permite escribir código más compacto y eficiente.

Puedes simplificar la lógica de control, manejar asignaciones condicionales y evaluar funciones solo cuando sea necesario. Esto resulta en funciones más legibles y fáciles de mantener, que reducen el número de bloques condicionales y mejoran el control de flujo general de la aplicación.

6. Operadores lógicos con Arrays y Objetos en JavaScript

Los operadores lógicos (&&, ||, !) no solo son útiles para manejar valores simples como booleanos, números y cadenas, sino que también funcionan muy bien con arrays y objetos, permitiendo verificar condiciones y trabajar con estructuras de datos más complejas.

Al comprender cómo interactúan con estas estructuras, puedes escribir código más eficiente y limpio para manejar datos, realizar verificaciones de condiciones y optimizar el flujo de tu programa.

6.1. Operador AND (&&) con Arrays y Objetos

El operador AND (&&) devuelve el primer valor falsy que encuentre o, si no lo encuentra, devuelve el último valor evaluado. Esto es útil para verificar si existe un objeto o un array antes de acceder a sus propiedades o elementos.

6.1.1. Verificar la existencia de propiedades de objetos.

El operador AND se usa comúnmente para verificar si un objeto existe antes de acceder a una propiedad dentro de él, lo que previene errores como intentar acceder a una propiedad de undefined o null.

let usuario = {
  nombre: "Manuel",
  direccion: {
    ciudad: "Buenos Aires",
  }
};

let ciudad = usuario && usuario.direccion && usuario.direccion.ciudad;
console.log(ciudad); // "Buenos Aires"Lenguaje del código: JavaScript (javascript)

• Explicación: En este caso, usuario && usuario.direccion && usuario.direccion.ciudad asegura que tanto el objeto usuario como su propiedad direccion existen antes de intentar acceder a la propiedad ciudad. Si alguna de estas no existiera, la expresión devolvería undefined en lugar de lanzar un error.

6.1.2. Verificar si un array tiene elementos

Puedes usar el operador AND para verificar si un array tiene elementos antes de realizar una operación sobre ellos, como acceder a su longitud o iterar sobre ellos.

let listaCompras = ["pan", "leche", "huevos"];

listaCompras.length && console.log("La lista no está vacía.");
// "La lista no está vacía."

listaCompras = [];
listaCompras.length && console.log("La lista no está vacía.");
// (No se imprime nada)Lenguaje del código: JavaScript (javascript)

• Explicación: La expresión listaCompras.length && ... verifica si la longitud del array es mayor a 0 (lo que significa que no está vacío). Si listaCompras está vacío, no se ejecuta la segunda parte de la expresión.

6.2. Operador OR (||) con Arrays y Objetos

El operador OR (||) devuelve el primer valor truthy que encuentre. Esto es útil para asignar valores predeterminados a objetos o arrays si están vacíos o son null/undefined.

6.2.1. Asignar valores predeterminados a objetos

Puedes usar el operador OR para asignar un valor predeterminado si un objeto es undefined o null, evitando así la necesidad de hacer una verificación explícita con if.

let configuracion = null;
let configuracionPredeterminada = { tema: "claro", idioma: "español" };

let opciones = configuracion || configuracionPredeterminada;
console.log(opciones); // { tema: "claro", idioma: "español" }Lenguaje del código: JavaScript (javascript)

• Explicación: Si configuracion es null, se utiliza configuracionPredeterminada. De lo contrario, se usa configuracion si contiene algún valor. Esto asegura que siempre haya un objeto válido con el que trabajar.

6.2.2. Asignar valores predeterminados a arrays

De forma similar, puedes usar OR para asignar un array vacío si el array original es null o undefined.

let productos = null;
let listaProductos = productos || [];
console.log(listaProductos); // []Lenguaje del código: JavaScript (javascript)

• Explicación: Si productos es null o undefined, listaProductos se asigna como un array vacío ([]). Esto previene errores al intentar trabajar con productos.

---

6.3. Operador NOT (!) con Arrays y Objetos

El operador NOT (!) invierte el valor de verdad de un valor. Con arrays y objetos, puede ser útil para verificar si una estructura de datos está vacía o no.

6.3.1. Verificar si un array está vacío

Puedes usar el operador NOT para verificar si un array no tiene elementos de manera más concisa.

let tareas = [];

if (!tareas.length) {
  console.log("No hay tareas pendientes.");
}Lenguaje del código: JavaScript (javascript)

• Explicación: El operador ! se usa aquí para verificar si tareas.length es 0, lo que indica que el array está vacío. Si es así, imprime «No hay tareas pendientes».

6.3.2. Verificar si un objeto está definido

El operador NOT también se puede usar para verificar si un objeto es null o undefined.

let usuario = null;

if (!usuario) {
  console.log("El usuario no está definido.");
}Lenguaje del código: JavaScript (javascript)

• Explicación: !usuario evalúa a true si usuario es null o undefined, lo que desencadena la ejecución del código dentro del bloque if.

6.4. Uso de operadores lógicos en estructuras de datos complejas

6.4.1. Verificar múltiples propiedades de objetos con AND

El operador AND es muy útil cuando deseas verificar la existencia de varias propiedades dentro de un objeto antes de realizar una operación. Esto es particularmente importante cuando trabajas con datos que pueden no estar completos o pueden venir de fuentes externas.

let usuario = {
  nombre: "Manuel",
  contacto: {
    email: "[email protected]",
    telefono: null,
  }
};

let telefono = usuario.contacto && usuario.contacto.telefono || "Teléfono no disponible";
console.log(telefono); // "Teléfono no disponible"Lenguaje del código: JavaScript (javascript)

• Explicación: El código verifica si existe la propiedad usuario.contacto.telefono. Si es null o undefined, el operador OR asigna un valor predeterminado: "Teléfono no disponible".

6.4.2. Buscar elementos en un array con OR

El operador OR puede usarse para devolver un elemento predeterminado si no se encuentra un valor truthy en un array.

let opciones = [null, undefined, "Opción válida"];
let primeraOpcion = opciones[0] || opciones[1] || opciones[2];
console.log(primeraOpcion); // "Opción válida"Lenguaje del código: JavaScript (javascript)

• Explicación: El operador OR devuelve el primer valor truthy en el array, que en este caso es "Opción válida".

6.4.3. Combinar operadores lógicos para simplificar el manejo de datos

En estructuras de datos complejas como arrays y objetos anidados, puedes combinar varios operadores lógicos para realizar verificaciones y asignaciones de forma más eficiente.

let carritoCompras = null;

let totalArticulos = carritoCompras && carritoCompras.length || 0;
console.log(totalArticulos); // 0Lenguaje del código: JavaScript (javascript)

• Explicación: Aquí, el operador AND verifica si carritoCompras no es null antes de acceder a su longitud. Si carritoCompras es null, el operador OR asigna 0 como valor predeterminado.

---

6.5. Conclusión sobre el funcionamiento de los operadores lógicos con Arrays y Objeto.

Los operadores lógicos son herramientas poderosas para trabajar con arrays y objetos en JavaScript. Al entender cómo interactúan con valores truthy y falsy dentro de estas estructuras, puedes verificar condiciones, manejar datos de manera segura y asignar valores predeterminados de forma eficiente. Esto mejora la legibilidad de tu código y evita errores comunes como acceder a propiedades no definidas o trabajar con arrays vacíos.

7. Ejemplos avanzada: Crear condiciones dinámicas con operadores lógicos.

Una vez que comprendes los operadores lógicos básicos y su interacción con valores truthy y falsy, puedes utilizarlos para crear condiciones más complejas y dinámicas. Estas condiciones permiten manejar entradas variables de forma flexible, generando lógica personalizada en función de diferentes escenarios.

Un uso clave de esta técnica es en la validación de formularios, el control del flujo de la aplicación y la toma de decisiones basadas en datos.

A continuación se presentan algunas formas avanzadas de usar los operadores lógicos para crear condiciones dinámicas y manejar escenarios complejos.

7.1. Validación de formularios usando operadores lógicos:

La validación de formularios es un escenario clásico donde las condiciones dinámicas son necesarias. Se puede verificar que todos los campos de un formulario estén completos y que cumplan con ciertos criterios (como el formato del email, la longitud de una contraseña, etc.).

Ejemplo de validación dinámica de un formulario:

function validarFormulario(datosUsuario) {
  let { nombre, email, edad, contraseña } = datosUsuario;

  if (!nombre || !email || !edad || !contraseña) {
    return "Por favor, completa todos los campos.";
  }

  if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
    return "Por favor, introduce un correo electrónico válido.";
  }

  if (edad < 18 || edad > 100) {
    return "La edad debe estar entre 18 y 100 años.";
  }

  if (contraseña.length < 6) {
    return "La contraseña debe tener al menos 6 caracteres.";
  }

  return "Formulario validado correctamente.";
}

let datosUsuario = {
  nombre: "Manuel",
  email: "[email protected]",
  edad: 25,
  contraseña: "pass123",
};

console.log(validarFormulario(datosUsuario)); // "Formulario validado correctamente."Lenguaje del código: JavaScript (javascript)

• Explicación: Usamos los operadores lógicos para validar cada campo del formulario. Si cualquier campo está vacío (falsy), devolvemos un mensaje de error. También usamos || para combinar verificaciones de email y edad, simplificando la validación.

7.2. Decisiones lógicas basadas en datos de usuarios

En aplicaciones más complejas, puedes necesitar tomar decisiones dinámicas basadas en datos que provienen de los usuarios, como el estado de inicio de sesión, permisos o roles en una plataforma.

Ejemplo de acceso basado en roles:

function verificarAcceso(usuario) {
  let { logueado, rol } = usuario;

  if (!logueado) {
    return "Por favor, inicia sesión para continuar.";
  }

  return rol === "admin" ? "Acceso completo" : "Acceso limitado";
}

let usuario1 = { logueado: true, rol: "admin" };
let usuario2 = { logueado: true, rol: "usuario" };
let usuario3 = { logueado: false, rol: "usuario" };

console.log(verificarAcceso(usuario1)); // "Acceso completo"
console.log(verificarAcceso(usuario2)); // "Acceso limitado"
console.log(verificarAcceso(usuario3)); // "Por favor, inicia sesión para continuar."Lenguaje del código: JavaScript (javascript)

• Explicación: La función utiliza una condición dinámica para determinar el nivel de acceso del usuario en función de si está logueado y su rol. Si el usuario no está logueado, se le pide que inicie sesión, y según su rol (admin o usuario), se le otorga acceso completo o limitado.

7.3. Lógica condicional con entradas variables

En aplicaciones interactivas, puedes necesitar generar una lógica que cambie en función de las entradas del usuario o los estados de la aplicación. Los operadores lógicos permiten combinar condiciones de manera flexible, generando una lógica adaptativa que responde a distintos estados.

Ejemplo: Selección dinámica de opciones

Imagina que estás construyendo un sistema de recomendación que sugiere actividades en función de la hora del día y las preferencias del usuario.

function recomendarActividad(usuario) {
  let { preferencias, hora } = usuario;
  
  if (hora >= 6 && hora < 12 && preferencias.includes("deporte")) {
    return "Te recomendamos hacer ejercicio por la mañana.";
  }

  if (hora >= 12 && hora < 18 && preferencias.includes("lectura")) {
    return "Es una buena hora para leer un libro.";
  }

  if ((hora >= 18 || hora < 6) && preferencias.includes("relajación")) {
    return "Relájate viendo una película o escuchando música.";
  }

  return "Explora nuevas actividades según tus gustos.";
}

let usuario1 = { preferencias: ["deporte"], hora: 8 };
let usuario2 = { preferencias: ["lectura"], hora: 14 };
let usuario3 = { preferencias: ["relajación"], hora: 20 };

console.log(recomendarActividad(usuario1)); // "Te recomendamos hacer ejercicio por la mañana."
console.log(recomendarActividad(usuario2)); // "Es una buena hora para leer un libro."
console.log(recomendarActividad(usuario3)); // "Relájate viendo una película o escuchando música."Lenguaje del código: JavaScript (javascript)

• Explicación: Dependiendo de la hora y las preferencias del usuario, la función sugiere una actividad distinta. Los operadores lógicos ayudan a combinar las condiciones de manera flexible, ajustando las recomendaciones en función de las entradas dinámicas.

7.4. Uso de operadores en bucles y filtros dinámicos

Los operadores lógicos también son útiles en combinación con bucles, filtros y funciones que iteran sobre arrays y objetos. Permiten generar filtros dinámicos que cambian en función de diferentes criterios.

Ejemplo: Filtrar productos por disponibilidad y precio

let productos = [
  { nombre: "Producto 1", disponible: true, precio: 100 },
  { nombre: "Producto 2", disponible: false, precio: 200 },
  { nombre: "Producto 3", disponible: true, precio: 300 },
];

let productosFiltrados = productos.filter(producto => producto.disponible && producto.precio < 250);
console.log(productosFiltrados);
// [{ nombre: "Producto 1", disponible: true, precio: 100 }]Lenguaje del código: JavaScript (javascript)

• Explicación: Usamos filter con el operador && para generar un filtro dinámico que devuelve solo los productos disponibles y con un precio inferior a 250. Esto permite que el filtro se ajuste a los parámetros que se le pasen.

7.5. Optimización del flujo de la aplicación

El uso de operadores lógicos también ayuda a optimizar el flujo de la aplicación, evitando bloques condicionales redundantes. Puedes construir flujos más concisos usando operadores para retornar resultados directamente, lo que simplifica la estructura de las funciones.

Ejemplo: Retornar valores predeterminados

function obtenerPreferencia(usuario) {
  let { preferencias, edad } = usuario;
  
  return (edad >= 18 && preferencias.includes("viajes")) ? 
         "Usuario adulto que disfruta de los viajes" : 
         "Explora nuevas opciones";
}

let usuario = { preferencias: ["viajes"], edad: 20 };
console.log(obtenerPreferencia(usuario)); // "Usuario adulto que disfruta de los viajes"Lenguaje del código: JavaScript (javascript)

• Explicación: Aquí, se usa un operador ternario para verificar una condición dinámica, retornando diferentes resultados según los datos del usuario. Esto simplifica el código al evitar múltiples bloques condicionales.

7.6. Conclusión sobre el uso avanzado de operadores lógicos en condiciones dinámicas.

El uso avanzado de operadores lógicos en condiciones dinámicas permite crear lógica flexible, adaptable a diferentes entradas y escenarios complejos, como la validación de formularios, la toma de decisiones basada en datos, y la manipulación de arrays y objetos.

Comprender cómo aplicar estos operadores de manera eficiente mejora tanto la legibilidad como el rendimiento de tu código, haciendo que sea más fácil de mantener y escalar a medida que crecen las necesidades de la aplicación.

8. Los operadores lógicos en Javascript y WordPress.

8.1. ¿Se usan operadores lógicos JavaScript al crear un sitio web con WordPress?

Claro que si!!! Aunque no lo veas directamente en el editor visual de WordPress, los operadores lógicos en JavaScript juegan un papel fundamental detrás de escena en la creación de sitios web dinámicos y personalizados con esta plataforma.

¿Cómo se usan los operadores lógicos en WordPress?

1. Temas y plugins personalizados:
   • Condicionales: Al crear temas o plugins personalizados, se utilizan operadores lógicos para mostrar o ocultar elementos de la página en función de ciertas condiciones. Por ejemplo, mostrar un mensaje de bienvenida solo a usuarios registrados.
   • Validaciones: Se emplean para validar datos ingresados por los usuarios en formularios. Por ejemplo, verificar que un correo electrónico tenga un formato válido antes de enviarlo.
   • Personalización: Permiten adaptar el contenido de la página según el dispositivo del usuario (móvil, tablet, escritorio).
2. Fragmentos de código (snippets):
   • Funciones personalizadas: Los operadores lógicos se usan dentro de funciones personalizadas para tomar decisiones basadas en diferentes parámetros. Por ejemplo, crear una función que muestre un mensaje diferente según el día de la semana.
3. Interacción con la API de WordPress:
   • Consultas a la base de datos: Al realizar consultas a la base de datos de WordPress, se pueden usar operadores lógicos para filtrar y ordenar los resultados. Por ejemplo, obtener todos los posts de una categoría específica y publicados en un rango de fechas determinado.

8.2. ¿Podemos agregar funcionalidades extras a mi página web hecha con WordPress usando estos operadores lógicos?

Absolutamente! Los operadores lógicos en JavaScript son herramientas poderosas que te permiten agregar funcionalidades personalizadas y dinámicas a tu sitio web de WordPress.

¿Qué tipo de funcionalidades puedes agregar?

1. Personalización avanzada:
   • Mostrar contenido diferente según el rol del usuario (administrador, editor, suscriptor).
   • Adaptar el diseño y la funcionalidad de tu sitio web en función de dispositivos (móvil, tablet, escritorio).
   • Crear experiencias personalizadas basadas en el historial de navegación del usuario.
2. Validación de formularios:
   • Asegurarte de que los usuarios ingresen datos válidos en los formularios de contacto, registro o cualquier otro tipo de formulario.
3. Creación de condicionales:
   • Mostrar o ocultar elementos de la página en función de ciertas condiciones. Por ejemplo, mostrar un mensaje de error si un campo está vacío.
4. Automatización de tareas:
   • Crear acciones automáticas basadas en eventos, como enviar un correo electrónico cuando se publica una nueva entrada.

¿Cómo implementar estas funcionalidades?

• Temas y plugins personalizados:
  • Crea un tema o plugin hijo de tu tema actual para hacer modificaciones sin perder las actualizaciones.
  • Utiliza el archivo functions.php para agregar tus funciones personalizadas.
  • Enlaza tus funciones a los hooks de WordPress para ejecutarlas en el momento adecuado.
• Fragmentos de código (snippets):
  • Agrega fragmentos de código directamente en el editor de código de tu tema o plugin.
  • Utiliza plugins como Code Snippets para gestionar tus fragmentos de código.

Consideraciones importantes:

• Seguridad: Siempre escapa los datos que ingresan los usuarios para prevenir inyecciones de código.
• Rendimiento: Evita sobrecargar tu sitio web con demasiadas funciones personalizadas.
• Mantenimiento: Mantén tu código actualizado y bien organizado para facilitar futuras modificaciones.

En resumen, los operadores lógicos te permiten crear sitios web de WordPress más personalizados y funcionales. Al comprender cómo utilizarlos, podrás llevar tus proyectos a un nivel superior.

8.3. Ejemplo práctico usando operadores lógicos en JavaScript y una página web en WordPress:

Aquí te dejamos un ejemplo sencillo para visualizar las funcionalidades de estos operadores lógicos.

Supongamos que queremos agregar un formulario en nuestra página web, y que el botón para finalizar dicho formulario se active solo cuando se cumplen ciertas condiciones.

Para ello:

1. PRIMERO:
   • En nuestro editor de Gutenberg, al hacer clic para agregar un elemento podríamos ir a «HTML personalizado».
2. SEGUNDO:
   • Ahora podemos agregar el código con el HTML para el formulario, junto con el script y los operadores lógicos para nuestro fin.
   • El código a agregar seria el siguiente:

<!--  HTML para el formulario -->
<div class="form-container">
    <form id="formulario">
        <label for="nombre">Nombre: </label>
        <input type="text" id="nombre" placeholder="Escribe tu nombre" required><br>

        <label for="email">Email: </label>
        <input type="email" id="email" placeholder="Escribe tu email" required><br>

        <label><input type="checkbox" id="terminos"> Acepto los términos y condiciones</label><br>

        <button id="enviar" disabled class="boton-desactivado">Enviar</button>
    </form>
</div>

<!--  SCRIPT con los operadores lógicos -->
<script>
document.querySelectorAll('input').forEach(function(input) {
    input.addEventListener('input', function() {
        const nombre = document.getElementById('nombre').value.trim();
        const email = document.getElementById('email').value;
        const terminos = document.getElementById('terminos').checked;
        const boton = document.getElementById('enviar');
        
        // Verificar si el email tiene un formato válido (mínimo con '@')
        const emailValido = email.includes('@');

        // Verificar si todas las condiciones son verdaderas
        const formularioValido = nombre && emailValido && terminos;

        // Habilitar el botón si todas las condiciones se cumplen
        boton.disabled = !formularioValido;

        // Cambiar el estilo del botón cuando está habilitado
        if (formularioValido) {
            boton.classList.remove('boton-desactivado');
            boton.classList.add('boton-activo');
        } else {
            boton.classList.remove('boton-activo');
            boton.classList.add('boton-desactivado');
        }
    });
});
</script>Lenguaje del código: HTML, XML (xml)

Explicación del <script> con los operadores lógicos:

1. Operador AND (&&):
   • Se usa para verificar que todas las condiciones se cumplan:
     1. El nombre no está vacío (nombre).
     2. El email tiene un formato válido (emailValido).
     3. El usuario ha aceptado los términos (terminos).
   • Si alguna de estas condiciones es falsa, el botón se mantendrá deshabilitado.
2. Operador NOT (!):
   • Se usa para invertir el resultado. En este caso, el botón se deshabilita (disabled = true) cuando cualquiera de las condiciones es falsa.
   • Si todas las condiciones se cumplen, boton.disabled será false y el botón se habilitará.
3. Operador OR (||) (implícito en la lógica):
   • Aunque no lo usamos directamente en el código, su funcionalidad es importante para entender cómo se evalúan las expresiones. Por ejemplo, si una de las tres condiciones es falsa, el operador NOT en combinación con AND deshabilitará el botón.

Funcionamiento:

• El botón de «Enviar» se mantiene deshabilitado hasta que se cumplen todas las condiciones, cuando esto sucede, el botón cambia de color y se habilita:
  1. El campo de nombre debe contener texto.
  2. El email debe tener un formato básico (contiene @).
  3. El usuario debe haber aceptado los términos marcando la casilla.
• Si una de las condiciones no se cumple, el botón seguirá deshabilitado.

Este ejemplo combina los tres operadores lógicos (&&, !, ||) de manera efectiva para controlar la interacción del usuario con el formulario en una página de WordPress hecha con Gutenberg.

En la página, este código daría el siguiente resultado:

7. Preguntas frecuentes y resumen sobre operadores lógicos en JS.