JavaScript é uma linguagem de script que pode ser usada tanto no desenvolvimento front-end quanto no back-end. Com esta linguagem de programação, você pode criar conteúdo que se atualiza dinamicamente, animar imagens e controlar multimídia.
JavaScript possui centenas de frameworks e bibliotecas e também é a linguagem de programação mais usada, de acordo com Statista.
JavaScript possui vários operadores criados para desempenhar diferentes funções. Neste artigo, explicarei o que é JavaScript Void (0), sua importância, seus casos de uso e benefícios, riscos potenciais de segurança e suas alternativas.
últimas postagens
O que é o operador Void (0)?
Nos nossos dicionários, void significa “não válido” ou “completamente vazio”. Void (0) é um operador que verifica um determinado valor e retorna indefinido. Uma função é considerada nula se não retornar nada. O operador void (0) pode ser usado em muitas áreas.
Por exemplo, você pode fazer com que o JavaScript retorne indefinido ao clicar em uma tag âncora. Quando isso acontecer, significa que a página em que você está clicando não será atualizada e nada acontecerá com essa página.
Importância de usar o operador Void e 0 como operando
Você pode usar o operador void com qualquer expressão. No entanto, em JavaScript, é usado principalmente com 0 como operando. Aqui estão alguns casos de uso do operador Void (0):
Impedir a navegação
Em ocasiões normais, se você clicar em um link, provavelmente o levará para uma nova página. Podemos criar um projeto para demonstrar como funciona. Terei dois arquivos em meu projeto: index.html e nextPage.html.
Você pode adicionar este código a diferentes arquivos da seguinte maneira:
Í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>
Confira este vídeo:
Como você pode ver, você pode navegar de ‘Home’ para ‘Próxima página’ clicando no botão.
Podemos agora introduzir o operador void (0) que bloqueia a navegação. Adicione este código ao 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>
Confira este vídeo quando clicamos no botão “Clique em mim”:
Você pode ver que após clicar no botão, este alerta, “Botão clicado, mas sem navegação!” aparece, mas não navegamos para a próxima página.
Funções anônimas autoexecutáveis
Uma função anônima autoexecutável ou expressão de função invocada imediatamente (IIFE) é uma função definida e executada após a criação. Tais funções são projetadas para criar um escopo privado para variáveis que evitam que essas funções poluam o escopo global.
Dê uma olhada neste 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 é uma função autoexecutável que soma todos os números de 1 a 10 e exibe os resultados assim que o código é executado.
Ao executar o código, a saída será: “A soma dos números de 1 a 10 é: 55”.
Como combinar JavaScript e Void 0
O operador void não é exclusivo do JavaScript, pois está disponível em outras linguagens de programação como C e C++. No entanto, o uso deste operador varia de um idioma para outro. Por exemplo, void é um tipo de dados nas linguagens de programação C e C++ e não um operador.
JavaScript usa a palavra-chave ‘void’ com o zero numérico. Você pode usar o operador void() para evitar comportamento padrão, como o navegador navegando para o próximo URL. Este é um exemplo perfeito de bloco de código que combina JavaScript com o operador void().
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
Você também pode usar o operador void() para obter um valor primitivo indefinido. Dê uma olhada neste bloco de código:
const result = void(0);const result = void(0);
Ao executá-lo, você ficará indefinido.
O que são benefícios Anulados (0)?
Em JavaScript, usamos o operador void() para criar valores “void” ou “indefinidos”. Estes são alguns dos benefícios de usar este operador em seu código:
- Impedir navegação: Podemos usar o operador void(0) no atributo href se quisermos evitar que os navegadores naveguem para uma nova página quando clicamos em um link ou botão. Este bloco de código ilustra como funciona:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Retornar valores indefinidos de funções: como desenvolvedor, você pode usar o operador void () para retornar explicitamente indefinido quando desejar consistência de código em seu aplicativo. Confira este bloco de código:
function myFunction() {
// do something
return void(0);
}
- Evite atribuição ‘indefinida’: Você pode usar void() de forma que ‘indefinido’ seja equivalente ao ‘resultado’. Você também pode usá-lo como uma escolha estilística. Este bloco de código mostra como você pode conseguir isso:
let result = void(0);
- Torne o código mais legível: A legibilidade do código não é algo que devemos ignorar, especialmente quando lidamos com grandes aplicações. Você pode usar void() quando quiser descartar explicitamente o valor de retorno e informar a outros desenvolvedores que a função não retornará nada. Este bloco de código mostra como você pode conseguir isso:
function myFunction() {
// Do something...
return void(0);
}
Potenciais riscos de segurança do vazio (0)
Embora void (0) seja útil em vários casos em JavaScript, também pode ser perigoso se não for usado corretamente. Estes são alguns dos casos em que void (0) pode ser usado maliciosamente:
- Vulnerabilidades de injeção de script: Existem riscos potenciais de ataques de injeção de script se o valor passado para o operador void() não for limpo e validado. Um bom exemplo é quando esse valor é gerado dinamicamente com base na entrada do usuário.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Esse bloco de código permite que os usuários injetem código malicioso.
- Clickjacking: os invasores podem usar operadores void para criar camadas transparentes/invisíveis em uma página da web. Esses invasores usarão essas camadas para induzir os usuários a clicar em links e botões maliciosos.
- Pode ser usado para ignorar a Política de Segurança de Conteúdo (CSP): a maioria dos proprietários de sites usa CSP para evitar ataques de script entre sites (XSS). Você pode usar o CSP para restringir a natureza dos scripts e recursos que suas páginas da web devem carregar. Porém, o uso do operador void() pode entrar em conflito com tais medidas, pois carrega até mesmo os scripts não permitidos pela política de segurança de conteúdo.
Alternativas para anular (0)
A tecnologia continua mudando, e a programação também. Algumas pessoas veem void (0) como um operador desatualizado. Estas são algumas das alternativas que os desenvolvedores modernos usam:
- Use event.preventDefault(): Você pode usar event.preventDefault() para evitar que a ação de um evento aconteça. Tal declaração pode impedir que os usuários enviem um formulário ou naveguem para a próxima página.
Estes trechos de código mostram como usar event.preventDefault:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Use # como valor href: diferentes páginas de um aplicativo são interligadas para facilitar a navegação. Usar # como href garante que os usuários permaneçam na mesma página. Você pode usar essa abordagem junto com event.prevetDefault() para evitar que sua página role para o topo. É assim que você pode conseguir isso:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Usar nulo: você pode retornar um valor nulo em vez de indefinido. É assim que você pode conseguir isso:
let result = null;
Perguntas frequentes
O que é JavaScript?
JavaScript é uma linguagem de programação usada principalmente no desenvolvimento front-end. No entanto, esta linguagem está sendo usada no desenvolvimento back-end com frameworks como Node.js. JavaScript é usado principalmente com outras tecnologias front-end, como CSS e HTML, para adicionar interatividade às páginas da web.
O que é JavaScript Void 0?
JavaScript Void 0 é um operador usado para evitar que ações padrão aconteçam. Por exemplo, você pode usar void (0) para impedir a navegação quando um usuário clica em um link ou botão. Quando um link de um código com void (0) é clicado, o navegador tenta navegar, mas os resultados são avaliados como indefinidos.
Existem alternativas para void (0)?
Sim. A maioria dos desenvolvedores modernos usa ouvintes de eventos em vez de void (0) em seu código. Essa abordagem facilita o manuseio de várias funções e evita o comportamento padrão nos códigos-fonte.
O uso de void (0) é seguro?
Você pode usar void (0) para evitar o comportamento padrão e com funções autoexecutáveis. Entretanto, void (0) pode ser perigoso se você não usá-lo conscientemente em seu código. Por exemplo, tal operador pode facilitar a injeção de código malicioso se aplicado às entradas do usuário.
Conclusão
JavaScript é uma linguagem de programação muito ampla e você pode levar algum tempo antes de dominar a maioria de seus conceitos.
Ensinamos qual é o operador void (0), sua importância, casos de uso e suas alternativas. Agora você também entende como combinar JavaScript e void(0) os riscos potenciais que provavelmente encontrará ao usar este operador.
Você também pode explorar alguns dos melhores ambientes de tempo de execução de JavaScript para melhor execução de código.