JavaScript es un lenguaje de secuencias de comandos que se puede utilizar tanto en el desarrollo front-end como en el back-end. Con este lenguaje de programación, puedes crear contenido que se actualiza dinámicamente, animar imágenes y controlar multimedia.
JavaScript tiene cientos de frameworks y bibliotecas y también es el lenguaje de programación más utilizado. según estadista.
JavaScript tiene varios operadores creados para lograr diferentes roles. En este artículo, explicaré qué es JavaScript Void (0), su importancia, sus casos de uso y beneficios, posibles riesgos de seguridad y sus alternativas.
Tabla de contenido
¿Qué es el operador Anulado (0)?
En nuestros diccionarios, void significa «no válido» o «completamente vacío». Void (0) es un operador que verifica un valor dado y devuelve indefinido. Una función se considera nula si no devuelve nada. El operador void (0) se puede utilizar en muchas áreas.
Por ejemplo, puede hacer que JavaScript devuelva un valor indefinido al hacer clic en una etiqueta de anclaje. Cuando eso sucede, significa que la página en la que está haciendo clic no se actualizará y no le sucederá nada.
Importancia de utilizar el operador Void y 0 como operando
Puede utilizar el operador nulo con cualquier expresión. Sin embargo, en JavaScript, se usa principalmente con 0 como operando. A continuación se muestran algunos casos de uso del operador Void (0):
Impedir la navegación
En ocasiones normales, si hace clic en un enlace, probablemente lo llevará a una página nueva. Podemos crear un proyecto para demostrar cómo funciona. Tendré dos archivos en mi proyecto: index.html y nextPage.html.
Puede agregar este código a diferentes archivos de la siguiente manera:
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page</h1> <a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/nextPage.html">Go to Next Page (No void operator)</a> <script src="script.js"></script> </body> </html> nextPage.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Next Page</title> </head> <body> <h1>You are on the Next Page</h1> <a href="index.html">Go back to Home Page (No void operator)</a> <script src="script.js"></script> </body> </html>
Mira este vídeo:
Como puede ver, puede navegar desde ‘Inicio’ a ‘Página siguiente’ haciendo clic en el botón.
Ahora podemos introducir el operador void (0) que bloquea la navegación. Agregue este código a index.html:
<!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
function doSomething() {
alert("Button clicked, but no navigation!");
}
</script><!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
function doSomething() {
alert("Button clicked, but no navigation!");
}
</script>
Mira este video cuando presionamos el botón «Haz clic en mí»:
Puede ver que después de hacer clic en el botón, aparece esta alerta: «¡Se hizo clic en el botón, pero no hay navegación!». aparece, 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 después de la creación. Estas funciones están diseñadas para crear un ámbito privado para variables que evitan que estas funciones contaminen el ámbito global.
Eche un vistazo a este código:
void function() {
// Function to calculate the sum of numbers from 1 to n
const calculateSum = () => {
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
return sum;
};
// Call the function and log the result to the console
const result = calculateSum();
console.log("The sum of numbers from 1 to 10 is:", result);
}();
Esta es una función autoejecutable que suma todos los números del 1 al 10 y muestra los resultados una vez que se ejecuta el código.
Cuando ejecute el código, el resultado será: «La suma de los números del 1 al 10 es: 55».
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 idioma a otro. Por ejemplo, void es un tipo de datos 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 el 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="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
También puede utilizar el operador void () para obtener un valor primitivo indefinido. Eche un vistazo a este bloque de código:
const result = void(0);const result = void(0);
Cuando lo ejecutes, quedarás indefinido.
¿Qué son los beneficios Anulados (0)?
En JavaScript, utilizamos el operador void () para crear valores «nulo» o «indefinidos». Estos son algunos de los beneficios de utilizar este operador en tu código:
- Evitar la navegación: podemos usar 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="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Devolver valores indefinidos de funciones: como desarrollador, puede utilizar el operador void () para devolver explícitamente un valor indefinido cuando desee coherencia del código en su aplicación. Mira este bloque de código:
function myFunction() {
// do something
return void(0);
}
- Evite la asignación ‘indefinida’: puede usar void () de tal manera que ‘indefinido’ sea equivalente al ‘resultado’. También puedes usarlo como una opción estilística. Este bloque de código muestra cómo puedes lograr esto:
let result = void(0);
- Hacer que el código sea más legible: la legibilidad del código no es algo que debamos ignorar, especialmente cuando se trata de aplicaciones grandes. Puede utilizar void() cuando desee descartar explícitamente el valor de retorno y hacerles saber a otros desarrolladores que la función no devolverá nada. Este bloque de código muestra cómo puedes lograr esto:
function myFunction() {
// Do something...
return void(0);
}
Riesgos potenciales de seguridad por nulidad (0)
Aunque void (0) es útil en varios casos en JavaScript, también puede resultar peligroso si no se usa correctamente. Estos son algunos de los casos en los que void (0) podría usarse 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 se desinfecta y valida. Un buen ejemplo es cuando este valor se genera dinámicamente en función de la entrada del usuario.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Un bloque de código de este tipo permite a los usuarios inyectar código malicioso.
- Clickjacking: los atacantes pueden utilizar operadores de vacío para crear capas transparentes/invisibles sobre una página web. Luego, dichos atacantes utilizarán estas capas para engañar a los usuarios para que hagan clic en enlaces y botones maliciosos.
- Se puede utilizar para eludir la Política de seguridad de contenido (CSP): la mayoría de los propietarios de sitios web utilizan CSP para evitar ataques de secuencias de comandos entre sitios (XSS). Puede utilizar 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 contenido.
Alternativas a anular (0)
La tecnología sigue cambiando y la programación también. Algunas personas ven void (0) como un operador obsoleto. Estas son algunas de las alternativas que utilizan los desarrolladores modernos:
- Utilice event.preventDefault(): puede utilizar event.preventDefault() para evitar que ocurra 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()">My Link</a>
#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. Usar # como href garantiza que los usuarios permanezcan en la misma página. Puede utilizar este enfoque junto con event.prevetDefault() para evitar que su página web se desplace hacia la parte superior. Así es como puedes lograrlo:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Utilice nulo: puede devolver un valor nulo en lugar de un valor indefinido. Así es como puedes lograrlo:
let result = 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 utiliza en el desarrollo back-end con marcos como Node.js. JavaScript se utiliza principalmente con otras tecnologías de interfaz de usuario como CSS y HTML para agregar interactividad a las páginas web.
¿Qué es JavaScript nulo 0?
JavaScript Void 0 es un operador que se utiliza para evitar que se produzca la acción predeterminada. Por ejemplo, puede utilizar void (0) para impedir la navegación cuando un usuario hace clic en un enlace o botón. Cuando se hace clic en un enlace de un código con vacío (0), el navegador intenta navegar pero los resultados se evalúan como indefinidos.
¿Existen alternativas para anular (0)?
Sí. La mayoría de los desarrolladores modernos utilizan detectores de eventos en lugar de void (0) en su código. Este enfoque facilita el manejo de varias funciones y evita el comportamiento predeterminado en los códigos fuente.
¿Es seguro usar void (0)?
Puede utilizar void (0) para evitar el comportamiento predeterminado y con funciones autoejecutables. Sin embargo, void (0) puede ser peligroso si no lo usa 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 las entradas del usuario.
Conclusión
JavaScript es un lenguaje de programación muy amplio y es posible que necesite tiempo antes de dominar la mayoría de sus conceptos.
Hemos enseñado cuál es el operador void (0), su importancia y casos de uso, y sus alternativas. Ahora también comprende cómo combinar JavaScript y void(0) los riesgos potenciales que probablemente encontrará al utilizar este operador.
También puede explorar algunos de los mejores entornos de ejecución de JavaScript para una mejor ejecución del código.