Artículo original escrito por: Dillion Megida
Artículo original: JavaScript Void 0 – What Does javascript:void(0); Mean?
Traducido y adaptado por: Rafael D. Hernandez
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 nula, 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 declaraciones en las funciones anteriores (suma 2 números, encuentra el promedio de 5 números, lo que sea), no se devuelve ningún resultado.
Ahora sabemos de qué se trata 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 los dos puntos (:) en lugar de tratar el valor como una ruta de referencia.
Por ejemplo:
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>
Cuando se hace clic en" Link", aquí está el resultado:
Como se ha visto anteriormente, el navegador no trata href como una ruta de acceso referenciada. En su lugar, lo trata como un código JavaScript que comienza después de "javascript:" y está separado por punto y coma.
void(0)
El operador void evalúa expresiones dadas y devuelve undefined.
Por ejemplo:
const resultado = void(1 + 1);
console.log(resultado);
// undefined
Se evalúa 1 + 1 pero se devuelve undefined. Para confirmar eso, aquí hay 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í hay otro ejemplo:
console.log(void(0) === undefined)
// true
Combinando javascript: y void(0)
A veces, no deseas que un enlace navegue a otra página o vuelva a cargar una página. Usando javascript:, puede ejecutar código que no cambia 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 página nueva.
0 es un argumento pasado a void que no hace nada y no devuelve nada.
El código JavaScript (como se ve arriba) también se puede pasar como argumentos al método void. Esto hace que el elemento de enlace ejecute algún código, pero mantiene la misma página.
Por ejemplo:
<a id='link' 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 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 la navegación puede ser innecesaria. En este caso, las expresiones se usarían como los argumentos pasados a void.
Conclusion
En este artículo simplificado, hemos aprendido qué es el operador void, cómo funciona y cómo se usa con javascript: pseudo URL para atributos href de enlaces.
Esto garantiza que una página no navegue a otra página ni vuelva a cargar la página actual al hacer clic en ella.