Artigo original: https://www.freecodecamp.org/news/javascript-void-keyword-explained/
A palavra void significa "espaço totalmente vazio", de acordo com o dicionário. Este termo, quando usado em programação, se refere a um retorno de "nada" - um "valor vazio", por assim dizer.
O que é a palavra-chave void?
Quando uma função é void, ela não retorna nada. Isso é semelhante às funções em JavaScript que retornam undefined de modo explícito, assim:
function und() {
return undefined
}
und()
ou implicitamente, assim:
function und() {
}
und()
Não importando as expressões e instruções que estejam nas funções acima (fossem elas para somarem 2 números, encontrar a média entre 5 números etc.), não há um resultado para retornar.
Agora que sabemos o que significa a palavra-chave void, o que é javascript:void(0)?
O que é javascript:void(0)?
Se dividirmos isso em duas partes, temos javascript: e void(0). Vamos ver cada parte em detalhes.
javascript:
Isso normalmente é chamado de pseudoURL. Quando um navegador recebe esse valor como o valor de href de uma tag de âncora (a tag 'a'), ele interpreta o código em JS que segue os dois pontos (:) em vez de tratar o valor como um caminho referido.
Por exemplo:
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>
Quando clicamos em "Link", o resultado é:
Como vimos acima, o navegador não trata href como um caminho referido. Em vez disso, ele trata como código JavaScript o que vem após "javascript:" e separado por pontos-e-vírgulas.
void(0)
O operador void avalia as expressões dadas e retorna undefined.
Por exemplo:
const result = void(1 + 1);
console.log(result);
// undefined
1 + 1 é avaliado, mas o retorno é undefined. Para confirmar isso, veja aqui outro exemplo:
<body>
<h1>Heading</h1>
<script>
void(document.body.style.backgroundColor = 'red',
document.body.style.color = 'white'
)
</script>
</body>
O resultado do código acima é:
Aqui temos outro exemplo:
console.log(void(0) === undefined)
// true
Combinando javascript: e void(0)
Às vezes, não queremos que um link navegue para outra página ou recarregue-a. Usando javascript:, você pode executar código que não altere a página atual.
Essa palavra, usada com void(0) significa não faça nada - não recarregue, não navegue, não execute código.
Por exemplo:
<a href="javascript:void(0)">Link</a>
A palavra "Link" é tratada como um link pelo navegador. Por exemplo, é possível focar na palavra, mas você não navegará para uma nova página ao clicar nela.
0 é um argumento passado para void que não faz nem retorna nada.
O código em JavaScript (como vemos acima) também pode ser passado como argumento para o método void. Isso faz com que o elemento link execute código, mas se mantenha na mesma página.
Por exemplo:
<a id='link' href="javascript:void(
document.querySelector('#link').style.color = 'green'
)">Link</a>
Ao clicar no botão, este é o resultado:
Com void, é informado ao navegador que não deve retornar nada (ou que deve retornar undefined).
Outro caso de uso de links com a referência javascript:void(0) é quando, às vezes, o link deva executar algum código JavaScript em segundo plano e a navegação seja desnecessária. Neste caso, as expressões devem ser usadas como argumentos passados para void.
Conclusão
Neste artigo simplificado, aprendemos sobre o que é o operador void, como ele funciona e como ele é usado com o pseudoURL javascript: para atributos href de links.
Isso garante que um link não navegue para outra página ou recarregue a página atual ao clicarmos nele.