6 de fevereiro de 2015

Javascript - o operador void

Você já deve ter visto em alguns links por aí algo como <a href="javascript:void(0)"></a>, não? Mas você sabe para quê usamos o void em Javascript? E sabe quando podemos usá-lo? Vem descobrir :D

Segundo a documentação da MDN:

O operador void avalia uma expressão dada, e retorna undefined.

Ou seja: qualquer valor passado após void será avalidado, mas o valor retornado sempre será undefined.

Vamos ver na prática como isso funciona. Execute no console:

function shouldReturnOne() {
  return 1;
}

shouldReturnOne(); // 1

Agora, se você usar o void:

function shouldReturnUndefined() {
  return void 1;
}

shouldReturnUndefined(); // undefined

O número 1 é avaliado, mas o valor retornado é undefined.

Só lembrando que o void não é uma função, e sim um operador. Os parênteses são opcionais.

Não daria para retornar direto undefined?

Nesse caso, sim:

function shouldReturnUndefined() {
  return undefined;
}

shouldReturnUndefined(); // undefined

Então pra quê eu vou usar o void?

Javascript é uma linguagem de tipagem fraca e dinâmica. Isso significa que você não precisa dizer ao Javascript que uma variável vai receber um número ou uma string, ou que uma função irá retornar um valor booleano.
Você simplesmente atribui valores à variáveis e retorna valores em funções, e o Javascript se vira com o resto.

Para entender melhor o void, é necessário entender um pouco sobre tipagem.

Por exemplo: se fossemos escrever um Hello World em Java, ele seria algo assim:

class HelloWorld {
  public static void main( String args[] ) {
    System.out.println( "Hello World!" );
  }
}

O Java é uma linguagem imperativa, orientada a objetos. Por isso é necessário sempre criar uma class para qualquer coisa que você queira fazer.

Mas o que eu quero mostrar está na primeira linha dentro da classe:

public static void main( String args[] )

Essa linha cria um método estático (static), público (public), chamado main, e que não retorna nada (void). Ou seja: posso colocar qualquer código dentro desse método que será executado normalmente. Agora, seu eu colocar no final desse método um return 1, por exemplo, na hora de tentar compilar, vai dar esse erro:

HelloWorld.java:4: error: incompatible types: unexpected return value
    return 1;
           ^
1 error

Porque o Java não espera nenhum valor retornado para esse método.

Enfim, não quero ensinar Java, mas sim mostrar que, para não retornar nenhum valor em linguagens de tipagem forte, é necessário deixar explícito no método o void.

Em Javascript não precisamos disso, mas tem alguns casos em que ele pode vir a ser útil.

Exemplo:

function fillBodyRed() {
  document.querySelector( 'body' ).style.background = 'red';
}
  
function isHypsterStyle() {
  return true;
}
  
function handleDOM() {
  if( isHypsterStyle() ) {
    fillBodyRed();
  }
}

handleDOM();

No exemplo acima, executamos a função handleDOM(), que verifica se isHypsterStyle está setado e chama a função fillBodyRed, que preenche o background do body de vermelho.

A única função que retorna algum valor, é a isHypsterStyle(), para verificar se o estilo foi setado na função handleDOM().

Podemos melhorar a função handleDOM(), removendo o if:

function handleDOM() {
  isHypsterStyle() && fillBodyRed();
}

Ao passar o código acima pelo JSHint, ele vai acusar um warning:

Expected an assignment or function call and instead saw an expression.

Ou seja: nós estamos utilizando um operador lógico (&&), em short circuit, que normalmente é usado para testar expressões. Uma expressão normalmente retorna um valor. Se a expressão retorna um valor, para me aproveitar desse valor, eu preciso usar um return dentro da function, para que eu possa invocar essa função para obter esse valor, ou então atribuir à uma variável, por exemplo, para que eu possa usar o valor no futuro.

Como nossa função fillBodyRed() não retorna nada, mas é ela que será executada se isHypsterStyle() for true, precisamos de uma forma de avaliar essa expressão para remover o warning.

Poderíamos usar o return, mas não faria sentido pois não temos valor a retornar. É aqui que entra o void:

function handleDOM() {
  void ( isHypsterStyle() && fillBodyRed() );
}

Agora nós avaliamos a expressão e não retornamos nada. Esse é um uso válido do void.

IIFE

Como você já deve ter visto no post sobre invocação de funções, para que uma função anônima seja invocada, ela também precisa ser transformada em uma expressão. Logo, também podemos usar o void nesse caso:

void function() {
  ...
}();

Normalmente quem trabalha com frontend tem seu primeiro contato com uma linguagem de programação através do Javascript, e acabam não entendendo algumas coisas, como é o caso do void. Espero que o seu uso tenha ficado claro :D

Até a próxima!

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1

javascript

1postperday, void