La palabra void significa «espacio completamente vacío» según el diccionario. Este término, cuando se utiliza en programación, se refiere a un retorno de «nada» – un «valor vacío» por así decirlo.
¿Qué es la palabra clave void?
Cuando una función es void, significa que la función no devuelve nada. Esto es similar a las funciones en JavaScript que devuelven undefined explícitamente, así:
function und() { return undefined}und()o implícitamente, así:
function und() {}und()Independientemente de las expresiones y afirmaciones de las funciones anteriores (suma 2 números, encuentra la media de 5 números, lo que sea), no se devuelve ningún resultado.
Ahora sabemos de qué va la palabra clave void. Qué pasa con javascript:void(0)?
¿Qué es javascript:void(0)?
Si dividimos esto, tenemos javascript: y void(0). Veamos cada parte con más detalle.
javascript:
Esto se conoce como una Pseudo URL. Cuando un navegador recibe este valor como el valor de href en una etiqueta de anclaje, interpreta el código JS que sigue a los dos puntos (:) en lugar de tratar el valor como una ruta referenciada.
Por ejemplo:
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>Cuando se hace clic en «Link», este es el resultado:
Como se ve arriba, el navegador no trata href como una ruta referenciada. En su lugar, lo trata como un código JavaScript que comienza después de «javascript:» y está separado por puntos y comas.
void(0)
El operador void evalúa las expresiones dadas y devuelve undefined.
Por ejemplo:
const result = void(1 + 1);console.log(result);// undefined1 + 1 se evalúa pero se devuelve undefined. Para confirmarlo, aquí tienes otro ejemplo:
<body> <h1>Heading</h1> <script> void(document.body.style.backgroundColor = 'red', document.body.style.color = 'white' ) </script></body>El resultado del código anterior es:
Aquí tienes otro ejemplo:
console.log(void(0) === undefined)// trueCombinando javascript: y void(0)
A veces, no quieres que un enlace navegue a otra página o recargue una página. Usando javascript:, puedes ejecutar código que no cambie la página actual.
Esto, usado con void(0) significa, no hacer nada – no recargar, no navegar, no ejecutar ningún código.
Por ejemplo:
<a href="javascript:void(0)">Link</a>La palabra «Link» es tratada como un enlace por el navegador. Por ejemplo, es enfocable, pero no navega a una nueva página.
0 es un argumento que se pasa a void que no hace nada, y no devuelve nada.
El código JavaScript (como se ha visto anteriormente) también se puede pasar como argumentos al método void. Esto hace que el elemento enlace ejecute algo de código pero mantiene la misma página.
Por ejemplo:
<a href="javascript:void( document.querySelector('#link').style.color = 'green')">Link</a>Cuando se hace clic en el botón, este es el resultado:
Con void, le dice al navegador que no devuelva nada (o que devuelva undefined).
Otro caso de uso de los enlaces con la referencia javascript:void(0) es que a veces, un enlace puede ejecutar algún código JavaScript en segundo plano, y navegar puede ser innecesario. En este caso, las expresiones se utilizarían como los argumentos pasados a void.
Conclusión
En este artículo simplificado, hemos aprendido qué es el operador void, cómo funciona y cómo se utiliza con la javascript: pseudo URL para los atributos href de los enlaces.
Esto asegura que una página no navega a otra página o recarga la página actual cuando se hace clic.