JavaScript es un lenguaje de programación que puede utilizarse tanto en el desarrollo front-end como back-end. Con este lenguaje de programación, puede crear contenidos que se actualicen dinámicamente, animar imágenes y controlar multimedia.

JavaScript cuenta con cientos de marcos de trabajo y bibliotecas y es también el lenguaje de programación más utilizado, según Statista.

JavaScript cuenta con varios operadores creados para lograr diferentes funciones. En este artículo, explicaré qué es el Void ( 0) de JavaScript, su importancia, sus casos de uso y ventajas, los posibles riesgos de seguridad y sus alternativas.

¿Qué es el operador Void (0)?

En nuestros diccionarios, void significa ‘no válido’ o ‘completamente vacío’. Void (0) es un operador que comprueba un valor dado y devuelve indefinido. Una función se considera void si no devuelve nada. El operador void (0) puede utilizarse en muchos ámbitos.

Por ejemplo, puede hacer que JavaScript devuelva undefined cuando haga clic en una etiqueta de anclaje. Cuando esto ocurre, significa que la página en la que está haciendo clic no se actualizará, y no le ocurrirá nada a esa página.

Importancia de utilizar el operador void y 0 como operando

Puede utilizar el operador void con cualquier expresión. Sin embargo, en JavaScript, se utiliza sobre todo con 0 como operando. He aquí algunos casos de uso del operador Void (0):

Impedir la navegación

En ocasiones normales, si pulsa sobre un enlace, es probable que le lleve a una nueva página. Podemos crear un proyecto para demostrar cómo funciona. Tendré dos archivos en mi proyecto: index.html y nextPage.html.

Puede añadir este código a los diferentes archivos de la siguiente manera:

Index.html

<!DOCTYPE html&gt
<html lang="es"&gt
<head&gt
    <meta charset="UTF-8"&gt
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
    <title>Página de inicio</title&gt
</head&gt
<body&gt
    <h1>Bienvenido a la página de inicio</h1&gt
    <a href="nextPage.html">Ir a la página siguiente (Sin operador void)</a&gt
    <script src="script.js"></script&gt
</body&gt
</html&gt
siguientePágina.html
<!DOCTYPE html&gt
<html lang="es"&gt
<head&gt
    <meta charset="UTF-8"&gt
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
    <title>Página siguiente</title&gt
</head&gt
<body&gt
    <h1>Está en la página siguiente</h1&gt
    <a href="index.html">Volver a la página principal (Sin operador void)</a&gt
    <script src="script.js"></script&gt
</body&gt
</html&gt

Eche un vistazo a este vídeo:

Como puede ver, puede navegar de ‘Inicio’ a ‘Página siguiente’ haciendo clic en el botón.

Ahora podemos introducir el operador void (0) que bloquea la navegación. Añada este código a index.html:

<!-- Con el operador void -->

<a href="javascript:void(0);" onclick="doSomething()">Haga clic en mí</a&gt
<script&gt
  function hacerAlgo() {
    alert("¡Botón pulsado, pero sin navegación!");
  }
</script><!-- Con operador void -->

<a href="javascript:void(0);" onclick="doSomething()">Hágame clic</a&gt
<script&gt
  function hacerAlgo() {
    alert("¡Botón pulsado, pero sin navegación!");
  }
</script&gt

Compruebe este vídeo cuando pulsamos el botón «Haga clic en mí»:

Puede ver que después de pulsar el botón, aparece esta alerta, «Botón pulsado, ¡pero sin navegación!», pero no navegamos a la página siguiente.

Funciones anónimas autoejecutables

Una función anónima autoejecutable o expresión de función inmediatamente invocada (IIFE) es una función que se define y ejecuta tras su creación. Este tipo de funciones están diseñadas para crear un ámbito privado para las variables que evite que estas funciones contaminen el ámbito global.

Eche un vistazo a este código

void function() {
    // Función para calcular la suma de números de 1 a n
    const calcularSuma = () => {
        let suma = 0
        for (let i = 1; i <= 10; i ) {
            suma = i;
        }
        return suma;
    };
    // Llamar a la función y registrar el resultado en la consola
    const resultado = calcularSuma();
    console.log("La suma de los números del 1 al 10 es:", resultado);
}();

Esta es una función autoejecutable que suma todos los números del 1 al 10 y muestra los resultados una vez ejecutado el código.

Cuando ejecute el código, la salida será: «La suma de los números del 1 al 10 es 55».

Self-executing function

Cómo combinar JavaScript y void 0

El operador void no es exclusivo de JavaScript, ya que está disponible en otros lenguajes de programación como C y C . Sin embargo, el uso de este operador varía de un lenguaje a otro. Por ejemplo, void es un tipo de dato en los lenguajes de programación C y C y no un operador.

JavaScript utiliza la palabra clave ‘void’ con el cero numérico. Puede utilizar el operador void () para evitar un comportamiento predeterminado, como que el navegador navegue a la siguiente URL. Este es un ejemplo perfecto de un bloque de código que combina JavaScript con el operador void (). 

<a href="javascript:void(0);" onclick="miFunción()">Hágame clic</a&gt

También puede utilizar el operador void ( ) para obtener un valor primitivo indefinido. Eche un vistazo a este bloque de código

const resultado = void(0);const resultado = void(0);

Cuando lo ejecute, obtendrá undefined.

¿Qué ventajas tiene void (0)?

En JavaScript, utilizamos el operador void () para crear valores «nulos» o «indefinidos». Estas son algunas de las ventajas de utilizar este operador en su código:

  • Evitar la navegación: Podemos utilizar el operador void (0 ) en el atributo href si queremos evitar que los navegadores naveguen a una nueva página cuando hacemos clic en un enlace o botón. Este bloque de código ilustra cómo funciona:
<a href="javascript:void(0);" onclick="miFunción();">Hágame clic</a&gt
  • Devolver valores indefinidos desde funciones: Como desarrollador, puede utilizar el operador void () para devolver explícitamente undefined cuando desee coherencia de código en su aplicación. Eche un vistazo a este bloque de código
function miFuncion() {
    // hace algo
    return void(0);
}
  • Evite la asignación ‘undefined’: Puede utilizar void () de forma que ‘undefined’ sea equivalente al ‘resultado’. También puede utilizarlo como una elección estilística. Este bloque de código muestra cómo puede conseguirlo:
let resultado = void(0);
  • Haga que el código sea más legible: La legibilidad del código no es algo que debamos ignorar, especialmente cuando se trata de grandes aplicaciones. Puede utilizar void() cuando desee descartar explícitamente el valor de retorno y hacer saber a otros desarrolladores que la función no devolverá nada. Este bloque de código muestra cómo puede conseguirlo:
function miFuncion() {
  // Hacer algo...
  return void(0);
}

Riesgos potenciales de seguridad de void (0)

Aunque void (0) es útil en varios casos en JavaScript, también puede resultar peligroso si no se utiliza correctamente. Estos son algunos de los casos en los que void (0) podría utilizarse de forma maliciosa:

  • Vulnerabilidades de inyección de scripts: Existen riesgos potenciales de ataques de inyección de scripts si el valor pasado al operador void ( ) no es saneado y validado. Un buen ejemplo es cuando este valor se genera dinámicamente basándose en la entrada del usuario. 
<a href="javascript:void(alert('¡Esto podría ser malicioso!'));">Haga clic en mí</a&gt

Un bloque de código de este tipo permite a los usuarios inyectar código malicioso.

  • Clickjacking: Los atacantes pueden utilizar operadores void para crear capas transparentes/ invisibles sobre una página web. Dichos atacantes utilizarán entonces estas capas para engañar a los usuarios para que hagan clic en enlaces y botones maliciosos.
  • Puede utilizarse para eludir la Política de Seguridad de Contenidos (CSP): La mayoría de los propietarios de páginas web utilizan la CSP para evitar los ataques de secuencias de comandos en sitios cruzados (XSS). Puede utilizar la CSP para restringir la naturaleza de los scripts y recursos que deben cargar sus páginas web. Sin embargo, el uso del operador void ( ) puede entrar en conflicto con dichas medidas, ya que carga incluso los scripts no permitidos por la política de seguridad de contenidos.

Alternativas a void (0)

La tecnología sigue cambiando, y la programación también. Algunas personas consideran que void (0 ) es un operador obsoleto. Estas son algunas de las alternativas que utilizan los desarrolladores modernos:

  • Utilice event .preventDefault(): Puede utilizar event. preventDefault () para evitar que se produzca la acción de un evento. Una declaración de este tipo puede impedir que los usuarios envíen un formulario o naveguen a la página siguiente.

Estos fragmentos de código muestran cómo utilizar event .preventDefault:

#html
<a href="#" onclick="event.preventDefault()">Mi enlace</a&gt
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
  • Utilice # como valor href: Las diferentes páginas de una aplicación están interconectadas para facilitar la navegación. Utilizar # como valor href garantiza que los usuarios permanezcan en la misma página. Puede utilizar este método junto con event.prevetDefault() para evitar que su página web se desplace a la parte superior. Así es como puede conseguirlo:
#html

<a href="#">Mi enlace</a&gt
#JavaScript
document.querySelector('a').addEventListener('click', event => {
  event.preventDefault();
  window.scrollTo(0, 0);
});
  • Utilice null: Puede devolver un valor null en lugar de undefined. Así es como puede conseguirlo
let resultado = null;

Preguntas frecuentes

¿Qué es JavaScript?

JavaScript es un lenguaje de programación utilizado principalmente en el desarrollo front-end. Sin embargo, este lenguaje se está utilizando en el desarrollo back-end con frameworks como Node.js. JavaScript se utiliza sobre todo con otras tecnologías front-end como CSS y HTML para añadir interactividad a las páginas web.

¿Qué es JavaScript Void 0?

JavaScript Void 0 es un operador que se utiliza para evitar que ocurra una acción predeterminada. Por ejemplo, puede utilizar void (0) para impedir la navegación cuando un usuario hace clic en un enlace o en un botón. Cuando se pulsa un enlace de un código con void (0), el navegador intenta navegar pero los resultados se evalúan como indefinidos.

¿Existen alternativas a void (0)?

Sí. La mayoría de los desarrolladores modernos utilizan escuchadores de eventos en lugar de void (0) en su código. Este enfoque facilita el manejo de diversas funciones y evita comportamientos por defecto en los códigos fuente.

¿Es seguro utilizar void (0)?

Puede utilizar void (0) para evitar comportamientos por defecto y con funciones autoejecutables. Sin embargo, void (0) puede ser peligroso si no lo utiliza conscientemente en su código. Por ejemplo, un operador de este tipo puede facilitar la inyección de código malicioso si se aplica a entradas de usuario.

Conclusión

JavaScript es un lenguaje de programación muy amplio, y puede que tarde un tiempo en dominar la mayoría de sus conceptos.

Hemos enseñado qué es el operador void (0), su importancia y casos de uso, y sus alternativas. También comprenderá ahora cómo combinar JavaScript y void(0) los riesgos potenciales con los que es probable que se encuentre cuando utilice este operador.
También podrá explorar algunos de los mejores Entornos de Ejecución de JavaScript para una mejor ejecución del código.