Curso javascript nivel medio

En JavaScript, existen varios operadores especiales que permiten realizar tareas específicas de manera más eficiente y legible. Uno de estos es el Operador de Coalescencia Nula (??), pero hay otros operadores especiales también importantes. Aquí te explico algunos de los operadores especiales más comunes:

Operador de Coalescencia Nula (??)

Descripción: El operador de coalescencia nula (??) se utiliza para devolver el valor del lado derecho si el valor del lado izquierdo es null o undefined. Es útil para establecer valores predeterminados cuando se trabaja con variables que podrían ser null o undefined.

Ejemplo:

1let nombre = null;
2let saludo = nombre ?? "Usuario desconocido";
3console.log(saludo); // Muestra "Usuario desconocido"
Salida de Consola!:
Usuario desconocido

En este ejemplo:

  • Como nombre es null, el operador ?? devuelve "Usuario desconocido".

Operador || (OR)

El operador lógico || (OR) se utiliza para devolver el primer valor "truthy" (es decir, un valor que no es considerado "falso") entre dos o más operandos.

Si el primer operando es "falsy" (como null, undefined, false, 0, una cadena vacía ''), entonces evalúa el segundo operando.

Este operador es útil cuando deseas proporcionar valores predeterminados en caso de que el primero sea "falsy".

Ejemplo:

1let nombre = '';
2let saludo = nombre || "Usuario desconocido";
3console.log(saludo);
Salida de Consola!:
Usuario desconocido

Explicación:

  • En este ejemplo, nombre es una cadena vacía '', que es un valor "falsy".
  • Por lo tanto, el operador || evalúa el segundo valor y devuelve "Usuario desconocido".

Diferencia entre ?? y ||

|| (OR):

  • Devuelve el primer valor "truthy".
  • Se utiliza para establecer valores predeterminados.
  • Si no hay "truthy", devuelve el último valor.
1let resultado = false || 0 || 'Texto' || null;
2console.log(resultado); // Resultado: "Texto"
Salida de Consola!:
Texto

&& (AND):

  • Devuelve el primer valor "falsy".
  • Evalúa todas las condiciones solo si son "truthy".
  • Si no hay "falsy", devuelve el último valor.
1let resultado = true && 1 && 'Texto';
2console.log(resultado); // Resultado: "Texto"
Salida de Consola!:
Texto

Operador de Encadenamiento Opcional (?.)

Descripción: El operador de encadenamiento opcional (?.) se utiliza para acceder a propiedades de un objeto de manera segura, sin causar un error si una propiedad intermedia no existe. Devuelve undefined si la propiedad no existe.

Ejemplo:

1let usuario = { nombre: "Juan", direccion: null };
2let ciudad = usuario.direccion?.ciudad;
3console.log(ciudad); // Muestra "undefined" en lugar de causar un error
Salida de Consola!:
undefined

En este ejemplo:

  • direccion es null, por lo que usuario.direccion?.ciudad devuelve undefined en lugar de lanzar un error.

Operador de Asignación Lógica (&&=, ||=, ??=)

Descripción: Estos operadores combinan una operación lógica con una asignación. Están disponibles en ES2021 (ES12) y permiten hacer asignaciones basadas en condiciones lógicas.

  • &&=: Asigna si el valor actual es true.
  • ||=: Asigna si el valor actual es false.
  • ??=: Asigna si el valor actual es null o undefined.

Ejemplo:

1let a = 0;
2a ||= 5; // Solo asigna si a es falsy (0 es falsy), por lo que a se convierte en 5
3console.log(a); // Muestra 5
Salida de Consola!:
5
1let b = null;
2b ??= 10; // Solo asigna si b es null o undefined, por lo que b se convierte en 10
3console.log(b); // Muestra 10
Salida de Consola!:
10

Operador de Propagación (...)

Descripción: El operador de propagación (...) se utiliza para expandir elementos de un iterable (como un array o un objeto) en un nuevo contexto, como en una función o un array nuevo. También se puede usar para copiar y combinar arrays u objetos.

Ejemplo:

1let numeros = [1, 2, 3];
2let masNumeros = [...numeros, 4, 5];
3console.log(masNumeros); // Muestra [1, 2, 3, 4, 5]
Salida de Consola!:
[ 1, 2, 3, 4, 5 ]
1let persona = { nombre: "Juan" };
2let personaCompleta = { ...persona, edad: 30 };
3console.log(personaCompleta); // Muestra { nombre: "Juan", edad: 30 }
Salida de Consola!:
{ nombre: 'Juan', edad: 30 }