Seleccionar página
Seguramente la mayor parte de los programadores Javascript se han olvidado o directamente no conocen la instrucción void. Este es un curioso recurso, bastante utilizado al inicio de Javascript, y que ha quedado en desuso. No obstante, tiene algunas características que pueden ser interesantes.

void

void es un operador en Javascript y se puede utilizar de estas dos formas:

  • void (expresion)
  • void expresion

El operador void indica que se evaluará la expresión que le sigue sin devolver ningún valor (o lo que es lo mismo, devolviendo undefined). Los paréntesis son completamente opcionales.

Código en blanco

En ocasiones nos interesa dejar partes del código intencionadamente sin contenido, por ejemplo, cuando queremos capturar un error, pero no queremos hacer nada con él y simplemente lo ignoramos.

try {
    JSON.parse(texto);
} catch(err) {

}

Es común que en esos casos algún otro programador no comprenda el código, o nosotros mismos tras algún tiempo cuando volvamos a leer estas instrucciones sospechemos que nos dejamos algo sin terminar.

Un muy simple solución es escribir un comentario del tipo:

try {
    JSON.parse(texto);
} catch(err) {
    // Este código se ha dejado intencionadamente en blanco
}

Otra solución, que aplicamos algunos de los más viejos programadores en Javascript es utilizar void (0).

try {
    JSON.parse(texto);
} catch(err) {
    void(0);
}

La línea void(0) lo que hace es evaluar 0 y no devolver nada, lo cual es equivalente a no hacer nada.

Operador ternario

En ocasiones al utilizar el operador ternario, sobre todo uno dentro de otro, nos podemos encontrar que tenemos que poner algo en la última instrucción, pero no queremos hacer nada específico en ese caso. De nuevo podemos utilizar el void (0).

a < 10 ? x = 1 : a < 20 ? z = 2 : void(0);

Evidentemente este código podríamos haberlo estructurado de otra forma y, seguramente, sería más fácil de leer y evitaríamos el uso de void (0), pero desde luego es un codigo válido y compacto, lo cual puede ser de agradecer en algunos casos.

Enlace en HTML

Esta expresión void(0) se popularizó en HTML como un enlace de un ancla (A) que no queremos que se dirija a ningún sitio. La expresión se evalúa pero no se carga o se desplaza la página.

<a href"javascript:void(0)">
Haga click aquí para no hacer nada
</a> |
<a href"javascript:void(document.body.style.backgroundColor='green')">
Haga click aqui para cambiar el color de fondo
</a>

Como podemos ver en el segundo caso, también se puede utilizar para evitar el retorno de la llamada a una expresión Javascript dentro del enlace.

Invocación directa de una función

Se puede utilizar para invocación directa de una función:

void function() {
  //...
}();

La función se ejecutará directamente, ya que void evalua la expresion que tiene a su derecha y esta tiene () al final de la misma.

Evitar el retorno

También se puede utilizar void parar evitar devolver el valor retornado por una función, por ejemplo, en un arrow function:

const myFunc = () => void otherFunc();

Conclusión

El operador void tiene una funcionalidad relativamente reducida, pero es interesante conocerlo y aprovechar su comportamiento en aquellos casos donde lo necesitemos.

Novedades

Template a fondo

Hay dos formas estándar de crear contenido en un componente de forma flexible: la etiqueta template, que se considera como uno de los pilares de los Web Components y las template string de Javascript, que son una buena alternativa para generar el Shadow DOM con interpolación de datos.

Light DOM a fondo

El Light DOM es un espacio compartido entre nuestro componente web y el DOM general, que podemos utilizar para insertar contenido o configurar nuestro componente. Es una muy interesante característica que debemos conocer.

Shadow DOM a fondo

Para que los componentes web no colisionen unos con otros es muy útil utilizar el Shadow DOM para aislar el DOM y el CSS de cada componente. Esta característica se puede aplicar también a elementos HTML sin necesidad de utilizar Custom Elements, pero es con estos donde cobra todo su potencial. Demos un repaso profundo a las capacidades del Shadow DOM.

HTMLElement a fondo

HTMLElement es una pieza clave, ya que de él heredan todos los componentes web, pero en muchas ocasiones no conocemos bien sus características. Os invitamos a dar un repaso a fondo a sus capacidades y descubrir cómo sacarle todo el partido en nuestros componentes.