Condição ternária

Oii João, tudo bem?

A condição ternária, ou operador condicional, é uma maneira mais concisa de escrever uma instrução if...else. Ela recebe esse nome por ser o único operador com três operandos: uma condição, um valor se a condição for verdadeira e um valor se a condição for falsa.

Imagine que temos um elemento HTML que queremos mostrar ou esconder baseado em alguma condição. Podemos usar a condição ternária para alterar o valor da propriedade display do CSS desse elemento:

elemento.style.display = condição ? 'block' : 'none';

Nesse caso, se a condição for verdadeira, o display do elemento será definido como 'block', fazendo com que ele seja exibido. Se a condição for falsa, o display será definido como 'none', escondendo o elemento.

Pra deixar mais claro vamos voltar à sua pergunta sobre como a condição ternária funciona:

Suponha que você tenha uma lista de itens e queira exibir apenas os itens que estão marcados como "ativos". Você pode usar uma condição ternária para verificar se cada item está ativo e definir seu estilo de exibição de acordo:

  // Definindo a lista de itens
  const itens = document.querySelectorAll('.item');

  // Iterando sobre os itens e ajustando o estilo de exibição com base na propriedade "ativo"
  itens.forEach(item => {
    item.style.display = item.getAttribute('ativo') === 'true' ? "block" : "none";
  });

Neste caso, item.ativo é a condição que tá sendo avaliada. Se item.ativo for verdadeiro, o item será exibido (display: block), caso contrário, será oculto (display: none).

Você pode conferir aqui no CodePen o exemplo que criei com o código completo.

Um abraço e bons estudos.