[Dúvida] Dúvida sobre if e else

Oi, Rodrigo!

Entendo sua dúvida sobre a utilização do if e else no código dos professores em comparação com a sua abordagem. Vamos analisar as duas versões para entender melhor.

Código dos Professores:

let amigos = [];

function adicionar() {
    let amigo = document.getElementById('nome-amigo');
    let lista = document.getElementById('lista-amigos');

    amigos.push(amigo.value);

    if (lista.textContent == '') {
        lista.textContent = amigo.value;
    } else {
        lista.textContent = lista.textContent + ', ' + amigo.value;
    }

    amigo.value = '';
}

Seu Código:

let amigos = [];

function adicionar() {
    let nomes = document.querySelector('#nome-amigo').value;
    let lista = document.querySelector('#lista-amigos');
    
    amigos.push(nomes);
    
    lista.textContent = amigos;

    nomes.value = '';
}

Diferenças e Considerações:

1. Uso do if e else:

   • Professores: O código verifica se o textContent da lista está vazio. Se estiver, ele apenas adiciona o primeiro nome. Se não estiver, ele adiciona o novo nome separado por uma vírgula. Isso garante que os nomes sejam exibidos de forma concatenada e legível.
   • Seu Código: Você está diretamente atribuindo o array amigos ao textContent da lista. Isso funciona, mas o textContent vai exibir os elementos do array como uma string padrão de array, o que pode não ser tão legível (ex.: "nome1,nome2,nome3").

2. Reset do Campo de Entrada:

   • Professores: O campo de entrada é resetado com amigo.value = ''; após adicionar o nome.
   • Seu Código: Você tenta resetar o valor do campo de entrada com nomes.value = '';, mas nomes é uma string, não o elemento do DOM. Para corrigir isso, você deve usar document.querySelector('#nome-amigo').value = '';.

Sugestão de Ajuste no Seu Código:

Para manter a legibilidade dos nomes na lista e corrigir o reset do campo de entrada, você pode ajustar seu código da seguinte forma:

let amigos = [];

function adicionar() {
    let nomeAmigo = document.querySelector('#nome-amigo');
    let lista = document.querySelector('#lista-amigos');
    
    amigos.push(nomeAmigo.value);
    
    lista.textContent = amigos.join(', '); // Junta os nomes com vírgula e espaço

    nomeAmigo.value = ''; // Reseta o campo de entrada
}

Explicação:

• amigos.join(', '): Converte o array amigos em uma string, onde cada elemento é separado por uma vírgula e um espaço, garantindo uma exibição mais legível.
• nomeAmigo.value = '';: Reseta o campo de entrada corretamente.

Espero ter ajudado e bons estudos!