Operadores Avanzados en JavaScript

Operador Ternario

JavaScript incluye varios operadores avanzados que facilitan la manipulación de datos y la escritura de código más conciso y expresivo. Entre ellos destacan:

script.js

				
					// Operador de propagación
let usuario = {
  nombre: "Carlos",
  edad: 30,
  direccion: { ciudad: "Madrid", pais: "España" },
};

// Operador de encadenamiento opcional
console.log(usuario.direccion?.ciudad); // Muestra: "Madrid"
console.log(usuario.direccion?.codigoPostal); // Muestra: undefined

// Operador de coalescencia nula
let telefono = usuario.telefono ?? "No disponible";
console.log(telefono); // Muestra: "No disponible"

// Modificar el objeto utilizando propagación
let usuarioActualizado = {
  ...usuario,
  edad: 31, // Cambia la edad
};
console.log(usuarioActualizado);
// Muestra: { nombre: "Carlos", edad: 31, direccion: { ciudad: "Madrid", pais: "España" } }

Operador de coalescencia nula (`??`)

El operador de coalescencia nula devuelve el valor de su lado derecho si el lado izquierdo es null o undefined. Es útil para establecer valores predeterminados sin considerar valores como false, 0 o "" como vacíos.

				
					valor1 ?? valor2;

Si valor1 no es null ni undefined, devuelve valor1.
En caso contrario, devuelve valor2.

				
					let usuario = null;
let nombre = usuario ?? "Invitado";
console.log(nombre); // Muestra: "Invitado"

usuario = "Juan";
nombre = usuario ?? "Invitado";
console.log(nombre); // Muestra: "Juan"

Encadenamiento opcional (`?.`)

El operador de encadenamiento opcional permite acceder a propiedades de objetos o llamar funciones de manera segura, evitando errores si una propiedad o función no existe.

Sintaxis

				
					objeto?.propiedad;
objeto?.metodo();

Si la propiedad o método existe, devuelve el valor correspondiente.
Si no existe, devuelve undefined en lugar de lanzar un error.

				
					let usuario = {
  perfil: {
    nombre: "Ana",
  },
};

console.log(usuario.perfil?.nombre); // Muestra: "Ana"
console.log(usuario.direccion?.ciudad); // Muestra: undefined

Operador de propagación (`...`)

El operador de propagación permite expandir elementos de un arreglo, objeto o cadena en contextos donde se esperan múltiples valores. Se usa comúnmente para copiar o combinar estructuras.

Usos comunes del operador de propagación

Expandir arreglos

				
					let numeros = [1, 2, 3];
let masNumeros = [...numeros, 4, 5];
console.log(masNumeros); // Muestra: [1, 2, 3, 4, 5]

Copiar arreglos

				
					let copia = [...numeros];
console.log(copia); // Muestra: [1, 2, 3]

Fusionar objetos

				
					let objeto1 = { a: 1, b: 2 };
let objeto2 = { b: 3, c: 4 };
let fusion = { ...objeto1, ...objeto2 };
console.log(fusion); // Muestra: { a: 1, b: 3, c: 4 }

Convertir cadenas en arreglos

				
					let palabra = "Hola";
let letras = [...palabra];
console.log(letras); // Muestra: ["H", "o", "l", "a"]

Ventajas de los operadores avanzados

🔸Evitan errores al trabajar con valores null o undefined.

🔸Simplifican el manejo de estructuras complejas como objetos y arreglos.

🔸Reducen la cantidad de código repetitivo en operaciones comunes.

Ejercicio Práctico

Usa el operador ?? para establecer un valor predeterminado a una variable que puede ser null o undefined.

Accede a una propiedad anidada en un objeto usando « ?. «.

Si no existe, devuelve un mensaje predeterminado.

Combina dos arreglos y dos objetos usando el operador de propagación.

Más Recursos:

📚https://www.w3schools.com/js/js_assignment.asp

📚https://aprendejavascript.org/