Entrar Ainda não tem acesso?
5
respostas

[Dúvida] dúvida com a lógica e refatoração

Referente ao curso JavaScript na Web: armazenando dados no navegador

por victor marinho franciulli lopes
| 49.7k xp | 4 posts

Gente, se puderem ajudar, ficarei muito feliz. Estava entendendo tudo até o módulo 3 item 3, quando rola a refatoração do código para o navegador criar os elementos armazenados no localStorage e mostrar na tela quando a gente recarrega.

minha dúvida é no código:

itens.forEach((elemento) => {
    criaElemento(elemento);
})

eu entendo que no trecho:

form.addEventListener('submit', (evento) => {
    evento.preventDefault();

    const nome = evento.target.elements['nome'];
    const quantidade = evento.target.elements['quantidade'];

    const itemAtual = {
        'nome': nome.value,
        'quantidade': quantidade.value
    };

    criaElemento(itemAtual);

    itens.push(itemAtual)
    localStorage.setItem('itens', JSON.stringify(itens));

    nome.value = "";
    quantidade.value = "";
});

ele pega os valores de nome do item e quantidade do item, cria um 'itemAtual' e depois joga ele dentro do array e zera os campos do formulário após o evento.

Mas da onde raios ele sabe o que tem dentro de 'elemento'? EU não consigo enxergar como isso resulta em um novo item sendo criado no HTML, já que não criamos uma var que atribuí valores para o 'elemento' usado dentro de criaElemento.

Edit: relendo o código, seria algo como: ele cria um elemento para cada item dentro da 'const itens' que é a responsável por lidar com o array do localStorage, mas mesmo assim, como ele sabe que 'elemento' é composto por um nome.value e um quantidade.value ? Eu entendi que criamos uma const que popula com um nome.value e uma quantidade.value nosso array (const itemAtual, mas como o bendito elemento faz o caminho inverso?

Entendo que talvez me falta background em JS para entender isso (por isso estou tbm fazendo a trilha de JS para back-end), mas se alguém puder me explicar de uma forma mais didática, agradeço.

Abraços a todos!

5 respostas
por KAUAN MOREIRA MINGOLA
| 128.9k xp | 3 posts
Software Developer

Olá Victor, a atribuição dos valores no html é feita dentro do método criaElemento(), deixei abaixo o passo a passo da função para exemplificar melhor:

function criaElemento(item) { 
    const novoItem = document.createElement('li') // Nesta Linha é criado o elemento <li> para adicionar a lista
    novoItem.classList.add("item") // Adicionando a classe "item" ao elemento -> <li class="item">

    const numeroItem = document.createElement('strong') // Nesta Linha é criado o elemento <strong>
    numeroItem.innerHTML = item.quantidade // Nesta Linha é adicionado o html da variavel quantidade dentro da tag ficando parecido como o exemplo ao lado -> <strong>4</strong>
    novoItem.appendChild(numeroItem) // Nesta Linha o elemento <strong> é adicionado dentro do elemento <li> (variavel novoItem criada anteriormente) ficando assim <li class="item"><strong>4</strong></li>

    novoItem.innerHTML += item.nome // Nesta Linha o html vindo de item.nome dentro do elemento <li> (variavel novoItem) ficando assim <li class="item">Exemplo de Nome<strong>4</strong></li>

    lista.appendChild(novoItem) // Elementos da variavel definida anterirmente são adicionados na lista
}
por victor marinho franciulli lopes
| 49.7k xp | 4 posts

é não foi bem isso que eu perguntei. hahahhaa mas agradeço a resposta.

A parte de como ele cria o HTML ta tranquila. O problema é na refatoração quando ele atribui (elemento) para a forEach itens. Da onde saiu elemento e como ele sabe quais infos pegar...

por KAUAN MOREIRA MINGOLA
| 128.9k xp | 3 posts
Software Developer

Ah entendi sua dúvida... quando você usa funções para percorrer arrays, existem algumas props criadas automaticamente através do foreach, para que você tenha acesso aos elementos que estão sendo percorridos, daquela lista, que servem como uma variavel temporária criada para essa função que você pode atribuir qualquer nome a elas.

let arrayItem = [ { nome: "Primeiro Elemento", quantidade: 1 }, { nome: "Segundo Elemento", quantidade: 1 } ]

arrayItem.forEach( (elementoAtual) => { console.log (elementoAtual)})

Resultado: {nome: 'Primeiro Elemento', quantidade: 1} {nome: 'Segundo Elemento', quantidade: 1}

Obervação: Assim como foreach, outras funções usadas para percorrer array, também possuem as mesmas props, como map, find, some, every... além destas funcões terem a propriedade do valor atual da listagem, é possível usar outras props vinculadas a lista, como indice e array de origem. Exemplo: arrayItem.forEach( (elementoAtual, indice, arrayDeOrigem) => { console.log (elementoAtual); console.log(indice); console.log(arrayDeOrigem)})

por KAUAN MOREIRA MINGOLA
| 128.9k xp | 3 posts
Software Developer

Para aprofundar um pouco mais, sugiro a documentação do mozilla https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

por victor marinho franciulli lopes
| 49.7k xp | 4 posts

aaahhhh entendi! legal! agora sim consegui entender! muito obrigado Kauan!