Operadores interesantes en JavaScript

20 may. 2020

operadores

En las últimas especificaciones de JavaScript se han ido incorporando operadores bastante interesantes que amortiguan un poco el típico dolor de muelas al trabajar con objetos o acceder a ellos. Algunos de ellos necesitarán que usemos Babel con alguna configuración especial pero eso es otra historia. Veamos algunos:

nullish coalescing operator (??)

Este también está en PHP 7 y desde que lo descubrí me encanta usarlo. Devuelve el operando de la derecha cuando el izquierdo es null o undefined.

const myValue = null ?? 'Hello World';

El operador de la izquierda es null, por lo tanto el valor de myValue toma 'Hello World'.

Otros ejemplos:
'' ?? 'Hello World' retornaría una cadena vacía ya que en JavaScript, una cadena vacía no se evalúa como undefined o null. Pasa lo mismo en 0 ?? 'Hello World'. Cuidado con esto, JavaScript no evalúa de la misma manera que PHP.

Optional chaining (.?)

Este lo aprendí hace poco y es todo un descubrimiento porque te evita muchos problemas. Permite leer el valor de propiedades y subpropiedades de objetos sin tener que evaluar y comprobar si existen. Esto era desesperante en algunos casos, sobre todo cuando un objeto varía en su estructura y a veces incluye o no ciertas propiedades.

Por ejemplo

const myObject = {
  prop: {
    subprop: {
      name: 'Ignacio'
    }
  }
};

Si dicho objeto viene de una REST API que no es demasiado homogénea y cuyas propiedades pueden variar, para acceder a prop2, tendríamos que hacer varias comprobaciones:

if (myObject && 
    myObject.prop !== undefined && 
    myObject.prop.subprop != undefined ) {
  ...
}

// Esto daría un TypeError: Cannot read property 'que' of undefined
myObject.algo.que.no.existe

Con optional chaining, se puede hacer de manera más directa:

myObject?.algo?.que?.no?.existe // undefined pero ya no es error
myObject?.prop?.subprop?.name // Ignacio

Operador OR (||)

Este es muy típico ya y se usa mucho en comprobaciones lógicas pero puede que no sepas que se pueden inicializar valores con él:

// Si anotherValue es undefined, false, 0, NaN, null, ¡¡,  myValue tomaría 'cadena inicial' como valor.
const myValue = anotherValue || 'cadena inicial';

Cuando un valor es undefined, false, 0, NaN, null, '', ... en inglés se dice que es falsey. Ojo, un array u objeto vacío no son falseys. Esto es distinto a PHP y da lugar a muchos errores si venimos de ese lenguaje, como yo.

Operador de doble negación (!!)

En realidad no es un operador en sí sino más bien la unión del mismo operador. Básicamente permite transformar un valor en booleano.

const myValue = 0;

!! myValue // false
Boolean( myValue ) // Es lo mismo

Operador condicional ternario ( ? : )

Este ya creo que es ampliamente conocido y también se usa en PHP:

// Si myVariable es "falsey", la expresión retorna 'no'
myVariable ? 'yes' : 'no'

Sintaxis extendida (…)

Este es difícil de entender al principio pero muy, muy útil. Lo utilizo prácticamente todos los días. Si quieres llegar a usar JS con mucha soltura, es imprescindible. Varios ejemplos:

Llamada a funciones con varios argumentos. Una forma de reemplazar a Function.prototype.apply

const myArguments = [ 'some', 'argument' ];
myFunction( ...myArguments );
// Es como llamar a la función myFunction( 'some', 'argument' );
// O también myFunction.apply( null, myArguments );

Pero también sirve para hacer merges de arrays o añadir nuevos elementos a estos:

const verdura = [ 'pimiento', 'cebolla' ];
const fruta = [ 'manzana', 'pera' ];
[ ...verdura, ...fruta ] // Hace un merge entre los dos arrays
[ ...verdura, 'pepino' ] // Añade 'pepino' al primer array

Y de manera equivalente con objetos, pero se pueden sobreescribir propiedades:

const persona = { nombre: 'Ignacio', apellido: 'Cruz' };
const camposExtra = { apodo: 'igmoweb' };

{ ...persona, ...camposExtra } // Juntaría ambos objetos en uno sólo.
{ ...persona, apellido: 'Cruz Moreno' } // Crea un nuevo objeto sobreescribiendo el campo apellido. Quedaría así:
// { nombre: 'Ignacio', apellido: 'Cruz Moreno' };