A palavra vazio significa “espaço completamente vazio” de acordo com o dicionário. Este termo, quando usado em programação, refere-se a um retorno de “nada” – um “valor vazio” por assim dizer.
Qual é a palavra-chave vazia?
Quando uma função está vazia, significa que ela não retorna nada. Isso é semelhante a funções em JavaScript que retornam undefined explicitamente, assim:
function und() {
return undefined
}
und()
ou implicitamente, assim:
function und() {
}
und()
Independentemente das expressões e instruções nas funções acima (soma 2 números, encontra a média de 5 números, qualquer que seja), nenhum resultado é retornado.
Agora sabemos o que void palavra-chave tem tudo a ver. A respeito javascript:void(0)?
O que é javascript:void(0)?
Se dividirmos isso, temos javascript: e void(0). Vamos examinar cada parte com mais detalhes.
javascript:
Isso é conhecido como Pseudo URL. Quando um navegador recebe esse valor como o valor de href em uma tag âncora, ele interpreta o código JS que segue os dois pontos (:) em vez de tratar o valor como um caminho referenciado.
Por exemplo:
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>
Quando “Link” é clicado, aqui está o resultado:
Como visto acima, o navegador não trata href como um caminho referenciado. Em vez disso, ele o trata como algum código JavaScript começando depois de “javascript:” e separado por ponto-e-vírgula.
void(0)
O operador void avalia as expressões fornecidas e retorna undefined.
Por exemplo:
const result = void(1 + 1);
console.log(result);
// undefined
1 + 1 é avaliado, mas undefined é devolvido. Para confirmar isso, aqui está 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 está outro exemplo:
console.log(void(0) === undefined)
// true
Combinando javascript: e void(0)
Às vezes, você não quer um link para navegar para outra página ou recarregar uma página. Usando javascript:, você pode executar o código que não altera a página atual.
Isso, usado com void(0) significa, fazer nada – não recarregue, não navegue, não execute nenhum código.
Por exemplo:
<a href="javascript:void(0)">Link</a>
A palavra “Link” é tratada como um link pelo navegador. Por exemplo, é focalizável, mas não navega para uma nova página.
0 é um argumento passado para void isso não faz nada e não retorna nada.
O código JavaScript (como visto acima) também pode ser passado como argumentos para o void método. Isso faz com que o elemento de link execute algum código, mas mantém a mesma página.
Por exemplo:
<a id='link' href="javascript:void(
document.querySelector('#link').style.color="green"
)">Link</a>
Quando o botão é clicado, este é o resultado:
Com void, diz ao navegador para não retornar nada (ou retornar undefined)
Outro caso de uso de links com o javascript:void(0) referência é que, às vezes, um link pode executar algum código JavaScript em segundo plano e a navegação pode ser desnecessária. Neste caso, as expressões seriam usadas como os argumentos passados para void.
Conclusão
Neste artigo simplificado, aprendemos o que void operador é, como funciona e como é usado com o javascript: pseudo URL para href atributos de links.
Isso garante que uma página não navegue para outra página ou recarregue a página atual quando clicada.