O navegador não responde ao executar a função

Front-end JavaScript
#1

Eu to fznd uma lista de contatos, e eu uso o seguinte codigo para renderizar e adicionar:

    const contato_nome= document.querySelector('input[name=nome_contato]');
    const contato_email= document.querySelector('input[name=email_contato]');
    const contato_numero= document.querySelector('input[name=numero_contato]');


const contatos=[]

function adicionarContato(){

   const add= {nome: contato_nome.value,email:contato_email.value,numero:contato_numero.value}

    
   contatos.push(add);
   geraLista();
  
}
function geraLista(){

 for(contato in contatos){

   document.getElementById("lista").innerHTML+= '<li class="contato"> '
   +`<p> Nome:${contato.numero} </p>` 
   +` <p> E-mail: ${contato.email}</p>`
   + `<p>Numero: ${contato.numero} </p>`
   +'</li>'
console.log(contato.nome)
}

geraLista();
}

mas ai o navegador simplesmente não me da a resposta que quero, aliás, não responde nada, nem erro no console

edit: fiz um teste separado, sem renderizar a lista e o erro está no foreach, ele tá lendo o array infinitamente, mesmo com ele vazio, pq isso acontece?

#2

no javascript vc vai acessar esses dados usando um .map. Então vai ficar:

contatos.map((linha) => {
   `<p> Nome: ${linha.numero} </p>`
})