Ordem das validações no IF ELSE

Se utilizarmos o if comparando se o elemento é nulo primeiro, ele retorna erro normal que deveria:

function tocaSom(idElementoAudio) { const elemento = document.querySelector(idElementoAudio);

if ((elemento != null) && (elemento.localName === 'audio')) {
    elemento.play();
} else {
    console.log('Elemento não encontrado');
}

}

Retorno

tocaSom('.piano'); main.js:7 Elemento não encontrado

Porém, se dentro do if validarmos primeiro se o LocalName do elemento é === 'audio', ele retorna que não conseguiu ler localName:

function tocaSom(idElementoAudio) { const elemento = document.querySelector(idElementoAudio);

if ((elemento.localName === 'audio') && (elemento != null)) {
    elemento.play();
} else {
    console.log('Elemento não encontrado');
}

}

Retorno:

main.js:4 Uncaught TypeError: Cannot read properties of null (reading 'localName') at tocaSom (main.js:4:19) at :1:1

Fiz uns testes e a validação de o elemento ser nulo é o responsável, mas as duas condições estão no if e deveriam retornar o mesmo else. Alguém sabe me informar por quê?

Olá Tiago, tudo bem?

A questão aqui não é nem a ordem de análise da condição do if mas sim o que acontece quando o JavaScript tenta analisar as condições. A mensagem de erro no console até já nos dá uma ideia do problema veja:

Cannot read properties of null (reading 'localName') at tocaSom

Ela diz que não é possível ler propriedades de um valor nulo, ou seja, quando escrevemos nosso if dessa forma:

if ((elemento != null) && (elemento.localName === 'audio'))

Primeiro estamos checando se elemento é diferente de NULO e só depois verificamos se a propriedade localName desse elemento é igual a "audio". Mas o que isso muda? O operador lógico && retorna TRUE se ambas as condições forem verdadeiras, correto? Sendo assim se, por algum motivo, elemento for NULO, o JavaScript nem chega a analisar a segunda condição já que a primeira já se mostrou falsa. É por isso que não gera erro nesse caso pois a segunda condição nem é analisada quando o elemento é NULO.

Agora, quando invertemos, a situação muda:

if ((elemento.localName === 'audio') && (elemento != null))

Aqui, independentemente se elemento for NULO ou não, o JavaScript tentará fazer a análise da primeira condição do if. O problema é que se elemento for NULO não há uma propriedade chamada localName num valor NULO e é por isso que gera erro. Lembra do significado da mensagem de erro que foi gerada?

Cannot read properties of null (reading 'localName') at tocaSom ou seja não é possível ler propriedades de um valor nulo.

Estamos tentando ler uma propriedade chamada localName de um valor que no momento é NULO. Por isso o erro. Quando invertemos a ordem de checagem, primeiro estamos tendo certeza de que o valor NÃO É NULO antes de tentar usar qualquer dado proveniente dele.

Espero que tenha ficado claro.

Qualquer dúvida adicional, estamos por aqui.

Att.