A palavra void 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 void?
Quando uma função é void, significa que a função não retorna nada. Isto é semelhante às funções em JavaScript que retornam undefined
explicitamente, como so:
function und() { return undefined}und()
ou implicitamente, como so:
function und() {}und()
Independentemente das expressões e afirmações nas funções acima (junta 2 números, encontra a média de 5 números, o que quer que seja), não há nenhum resultado devolvido.
Agora sabemos do que se trata a palavra-chave void
. E sobre javascript:void(0)
?
O que é javascript:void(0)?
se dividirmos isto, temos javascript:
e void(0)
. Vamos olhar para cada parte com mais detalhe.
javascript:
Isto é referido como um Pseudo URL. Quando um navegador recebe este valor como o valor de href
numa etiqueta de â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 se clica em “Link”, aqui está o resultado:
Como visto acima, o navegador não trata href
como um caminho referenciado. Em vez disso, trata-o como algum código JavaScript que começa após “javascript:” e separado por ponto e vírgula.
void(0)
O operador vazio avalia determinadas expressões e retorna undefined
.
Por exemplo:
const result = void(1 + 1);console.log(result);// undefined
1 + 1
é avaliado mas undefined
é devolvido. Para confirmar que, 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
Combinar javascript: e void(0)
Por vezes, não se quer um link para navegar para outra página ou recarregar uma página. Usando javascript:
, pode correr código que não altera a página actual.
Isto, usado com void(0)
significa, não fazer nada – não recarregar, não navegar, não correr qualquer 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
que não faz nada, e retorna nada.
código JavaScript (como visto acima) também pode ser passado como argumentos para o método void
. Isto faz com que o elemento de ligação execute algum código, mas mantém a mesma página.
Por exemplo:
<a 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 devolver nada (ou devolver undefined
).
Outro caso de uso de links com o javascript:void(0)
referência é que por vezes, um link pode correr algum código JavaScript em segundo plano, e a navegação pode ser desnecessária. Neste caso, as expressões seriam usadas como argumentos passados para void
.
Conclusion
Neste artigo simplificado, aprendemos o que é o operador void
, como funciona, e como é usado com o javascript:
pseudo URL para href
atributos de links.
Esta assegura que uma página não navega para outra página ou recarrega a página actual quando clicada.