O operador de condicional ou de ponto de interrogação, representado por um ?, é um dos recursos mais poderosos do JavaScript. O operador ? é usado em instruções condicionais e, quando acompanhado de um :, pode funcionar como uma alternativa compacta para instruções do tipo if...else.

Há, no entanto, mais a se falar sobre ele. Existem três usos principais para o operador ?, dois dos quais você pode não ter usado ainda e nem ouvido falar a respeito. Vamos aprender sobre eles agora em detalhes.

Três usos principais para o ponto de interrogação (?) em JavaScript:

1. Operador ternário
2. Encadeamento opcional
3. Coalescência nula

Vamos examinar cada um deles em detalhes, começando com a maneira mais comum de se usar o operador ? – como um operador ternário.

1. Operador ternário

O termo ternário significa composto de três itens ou partes. O operador ? também é chamado de operador ternário pois, diferente dos outros operadores como o de igualdade estrita (===) ou o operador de resto (%), ele é o único que recebe três operandos.

Começando com ?, adicionamos uma condição do lado esquerdo e um valor do lado direito a ser retornado quando a condição for verdadeira. Em seguida, adicionamos dois pontos (:) seguidos de um valor a ser retornado quando a condição é falsa.

O operador ternário é, basicamente, um atalho para uma instrução if...else tradicional.

Vamos comparar o operador ternário com a instrução if...else, mais extensa:

Aqui, o operador ternário ocupa apenas uma linha de código, enquanto a instrução if...else tem sete linhas.

Usar um operador ternário é mais eficaz, certo?

2. Encadeamento opcional

Em 2020, um novo recurso incrível, conhecido como Encadeamento opcional, foi introduzido no JavaScript.

Para entender como ele funciona, imagine este cenário.

Vamos dizer que você tenha um código que chama uma propriedade de objeto que não existe, o que gera um erro em tempo de execução. Isso pode ocorrer devido a um valor ausente ou indefinido em seu banco de dados ou proveniente de uma API:

Graças ao Encadeamento opcional, você pode simplesmente inserir um ? entre o nome da propriedade e o ponto antes da próxima propriedade.

Com isso, o retorno será undefined em vez de lançar um erro.

O encadeamento opcional é um recurso que muda o jogo de verdade para os desenvolvedores de JavaScript.

3. Coalescência nula

Em alguns casos, é preciso definir um valor padrão para um nome de propriedade ou valor ausente.

Por exemplo, vamos dizer que estamos criando um app de previsão do tempo, no qual estamos buscando a temperatura, umidade do ar, velocidade do vento, pressão atmosférica, hora do nascer e do por do sol, além de uma imagem da cidade. Inserimos um lugar, por exemplo, Bangalore, mas, por algum motivo, a imagem da cidade não está no banco de dados.

Quando o app busca e exibe os dados, a imagem estará em branco, o que pode ficar feio na interface. O que podemos fazer, nesse caso, é definir uma imagem padrão para aquelas cidades que não têm uma imagem – em nosso exemplo, Bangalore.

Desse modo, quando o app exibir os dados, a imagem padrão estará lá para as cidades que não tiverem imagens.

Podemos fazer isso usando o operador ||, conhecido como o operador lógico OR:

Porém, se você usar || para fornecer um valor padrão, poderá encontrar comportamentos inesperados se você considerar alguns valores como utilizáveis (por exemplo, '' ou 0).

Considere um cenário onde uma variável tem o valor de 0 ou de uma string vazia. Se usarmos (||), ela será considerada como undefined ou NULL e retornará o valor padrão que estabelecemos.

Em vez do operador lógico OR (||), você pode usar dois pontos de interrogação (??), também conhecidos como Coalescência nula.

Vamos aprender com um exemplo.

const value1 = 0 || 'default string';
console.log(value1);


const value2 = '' || 1000;
console.log(value2);

Aqui, temos '0' e 'default string' na variável value1. Se retornarmos seu valor no console, teremos o valor 'default string', o que é estranho. Em vez de 'default string', deveríamos receber 0, já que zero não é undefined nem null. Assim, '||' não faz o que queremos que faça aqui.

É o mesmo que ocorre, nesse caso, com value2.

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

Porém, se substituirmos '||' por '??', obteremos 0 e uma string vazia, o que torna o recurso bem interessante.

A coalescência nula funciona exatamente como o operador lógico OR, exceto pelo fato de que você obtém o valor do lado direito quando o valor do lado esquerdo é undefined ou null.

Em outras palavras, ?? somente permite valores undefined e null, não permitindo strings vazias ('') ou 0s.

Conclusão

Espero que agora você compreenda como funciona o operador ? em JavaScript. Parece simples, mas é um dos caracteres mais poderosos da linguagem. Ele fornece aquele "a mais" sintático de três maneiras diferentes, porém incríveis.

Experimente-as e conte-nos o resultado.

Feliz aprendizagem!

Se você já estiver familiarizado com programação, sabe o que fazem as funções e como usá-las. Mas o que é uma função de callback? Funções de callback são uma parte importante do JavaScript e, ao entender como callbacks funcionam, você vai se tornar muito melhor em JavaScript.

Então, neste artigo, eu gostaria de ajudar você a entender o que são as funções de callback e como usá-las em JavaScript, passando por alguns exemplos.

O que é uma função de callback?

Em JavaScript, funções são objetos. Podemos passar objetos para funções como parâmetros? Sim.

Então, nós podemos também passar funções como parâmetros para outras funções e chamá-las dentro das funções externas. Parece complicado? Vamos ver isso no exemplo abaixo:

function print(callback) {  
    callback();
}

A função print( ) recebe outra função como parâmetro e a chama dentro de si. Isso é válido no JavaScript e nós chamamos de "callback". Então, a função que é passada para outra função como um parâmetro é uma função de callback. Mas isso não é tudo.

Você também pode ver a versão em vídeo sobre as funções de callback abaixo:

Por que precisamos de funções de callback?

O JavaScript executa o código sequencialmente em uma ordem de cima para baixo. No entanto, existem alguns casos em que o código é executado (ou deve ser executado) depois que algo acontece e de modo não sequencial. Isso é chamado de programação assíncrona.

Callbacks garantem que uma função não seja executada antes que uma tarefa seja concluída, mas logo depois dessa tarefa ser concluída. Elas nos ajudam a desenvolver código JavaScript assíncrono e evitam que tenhamos problemas e erros.

Em JavaScript, o jeito de criar uma função de callback é passá-la como um parâmetro para outra função, chamando-a novamente em seguida, logo depois que algo aconteça ou que alguma tarefa seja concluída. Vamos ver como...

Como criar uma função de callback

Para entender o que eu expliquei acima, deixe-me começar com um simples exemplo. Nós queremos registrar uma mensagem no console mas ela deve aparecer lá após 3 segundos.

const mensagem = function() {  
    console.log("Essa mensagem é exibida depois de 3 segundos");
}
 
setTimeout(mensagem, 3000);

Existe um método integrado no JavaScript, chamado "setTimeout", o qual chama uma função ou avalia uma expressão depois de um certo tempo (em milissegundos). Então, aqui, a função "mensagem" está sendo chamada após 3 segundos. ( 1 segundo = 1000 milissegundos)

Em outras palavras, a função mensagem está sendo chamada depois de algo acontecer (após 3 segundos se passarem para esse exemplo), mas não antes. Então a função mensagem é um exemplo de função de callback.

O que é uma função anônima?

Como alternativa, podemos definir uma função diretamente dentro de outra função, ao invés de chamá-la. Vai ser parecido com isso:

setTimeout(function() {  
    console.log("Essa mensagem é exibida após 3 segundos");
}, 3000);

Como podemos ver, a função de callback aqui não tem nome e uma função sem nome em JavaScript é chamada de "função anônima". Isso faz exatamente a mesma tarefa que o exemplo acima.

Callbacks como arrow functions

Se você preferir, você pode também escrever a mesma função de callback como uma arrow function do ES6, que é um tipo mais novo de função em JavaScript:

setTimeout(() => { 
    console.log("Essa mensagem é exibida após 3 segundos");
}, 3000);

E os eventos?

JavaScript é uma linguagem de programação orientada a eventos. Nós também usamos funções de callback para declarações de eventos. Por exemplo, digamos que queremos que os usuários cliquem em um botão:

<button id="callback-btn">Clique aqui</button>

Desta vez, veremos uma mensagem no console somente quando o usuário clicar no botão:

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("O usuário clicou no botão!");
});

Então, aqui, nós primeiro selecionamos o botão pelo seu id. Em seguida, adicionamos um event listener (algo como um 'detector de eventos', em português) com o método addEventListener. Ele recebe dois parâmetros. O primeiro é o seu tipo, "click", e o segundo parâmetro é uma função de callback. Essa função insere a mensagem no console quando o botão é clicado.

Como você pode ver, funções de callback são também usadas para declaração de eventos em JavaScript.

Conclusão

Callbacks são usadas com frequência em JavaScript, e eu espero que este artigo ajude você a entender o que elas realmente fazem e como trabalhar com elas mais facilmente. Você também pode aprender sobre promises em JavaScript (em inglês), um tópico semelhante ao explicado aqui, em um outro artigo do autor.

Se você quiser aprender mais sobre desenvolvimento para a web, convido você a seguir o autor no YouTube!

Obrigado por ler!