Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Syntax que nunca vi...

Ola,

em certo momento do codigo, no github, é usado a seguinte syntax:

{!expandida && <BotaoIcone aria-hidden={expandida}>
                    <img src="/icones/expandir.png" alt="Icone de expandir" />
                </BotaoIcone>}

a duvida aqui é uqal a funcao de usar ! e em seguida &&, nunca vi essa syntax e estou confuso.

3 respostas
solução!

Bom dia Gabriel

O caracter !

  • É um operador lógico do Javascript o qual tem a finalidade de aplicar uma negação, ou seja, no próprio exemplo do seu código, se caso o valor de "expandida" começar com false (false), ao passar na linha do seu código será avaliado o oposto de seu valor, ou seja, será avaliado se "expandida" é true(verdadeiro) e somente se for true, é que será renderizado o <BotaoIcone>, ou seja, será renderizado tudo o que estiver após o operador &&.

O caracter &&

  • É um operador lógico do javascript o qual tem a finalidade de comparar expressões / variáveis e que no seu exemplo de código tem o objetivo de renderizar o <BotaoIcone> somente se a condição anterior for atendida, ou seja, se o valor de expandida for true.

Faça o teste, para conferir

1) se caso você definir o valor de expandida diretamente como true, ou qualquer outro valor que o javascript considera como true, logo o seu botão não irá renderizar, uma vez que o oposto de true, é false e assim a primeira condição sendo false, não será renderizado o que vem a seguir, ou seja, o botão

let expandida = true;

return (!expandida && <button>Expandir</button>);
// Não será renderizado o botão

2) se caso você definir o valor de expandida diretamente como false, ou qualquer outro valor que o javascript considera como false, logo o seu botão será renderizado, uma vez que o oposto de false, é true e assim a primeira condição sendo true, será renderizado o que vem a seguir, ou seja, o botão

let expandida = false;

return (!expandida && <button>Expandir</button>);
// O botão será renderizado

DICAS! Existe também o operador !! (duas exclamações consecutivas, ou seja, é utilizada para converter um valor numeral ou string, em booleano (lógico) para que se possa fazer validações com o seu valor original....por exemplo, se a variável começar com true e na condição for aplicado !!expandida, o valor será convertido duas vezes e a validação dessa operação retorna true. Segue apenas para fins de referência, uma matéria explicando os diversos tipos de operadores Operadores Javascript, mais ao final você irá encontrar os operadores que comentei acima.

Espero ter lhe ajudado.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

Atenciosamente

Felipe D.R

Muito obrigado pela explicacao, agora esta mais claro!

Imagina!, fico feliz em conseguir ajudar Até mais!