Archivo de diciembre de 2020

JS > Cuando NO usar el operador ternario

Publicado por Iván Gajate el 29 de diciembre de 2020 en Sin categoría | No hay comentarios »

Hay quien utiliza el operador ternario como sustituto del condicional… sin embargo no son equivalentes.

Un ternario es una expresión, es decir, que devuelve un valor. Mientras que un if/else es una estructura de código, bifurca un camino.

La situación ideal para usarlo es esta:

// Incorrecto
const a = 5;
let b;
if (a === 5){
  b = 3;
} else {
  b = 2;
}

// Correcto
const a = 5;
const b = a === 5 ? 3 : 2;
  • Se debe utilizar un operador ternario sólo cuando se necesita utilizar el valor que devuelve.
  • Cuando el valor devuelto es uno de dos valores distintos.
  • Cada parte de la expresión (detrás del ? y de : ) debe devolver un valor sin generar efectos secundarios.
  • Si el operador ternario genera demasiada complejidad, código difícil de mantener o dificulta la lectura es mejor usa otras estructuras más fáciles de simples.

Muchas veces es más simple usar un condicional o un operador lógico:

// Incorrecto	 	 
a = x ? b : a;	
 	 
// Correcto	 	 
if (x){	 	 
 a = b;	 	 
}
// Incorrecto	 	 
a = a ? a : b;
	 
// Correcto	 	 
a = a || b;

Hay una regla de Linter que pone ejemplos interesantes:

https://eslint.org/docs/rules/no-unneeded-ternary

JS – Emitir eventos con EventTarget

Publicado por Iván Gajate el 4 de diciembre de 2020 en Desarrollo Web, Eventos, JavaScript | No hay comentarios »

Con esta API relativamente nueva de JavaScript podemos hacer que nuestros propios objetos emitan eventos como lo haría un elemento nativo del DOM.

La definición es un poco escueta, pero es que es tan simple de usar que parece mentira ;p

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

// MyClass.js
class MyClass extends EventTarget {
    myMethod() {
        this.dispatchEvent(new CustomEvent('my-custom-event', {
            detail: 'Contenido que se envía en el evento'
        }));
    }
}

// Para usarlo
const myObject = new MyClass();
myObject.addEventListener('my-custom-event', (event) => {
    console.log(event); // Evento completo con el detail
});