Dúvida código Projeto | JavaScript na Web: armazenando dados no navegador

Por que ao mudar a função para uma Arrow Function ela não funciona no projeto? ao fazer isso mostra o seguinte erro no console:

Código da Arrow Function:

const criaElemento = (item) => { const novoItem = document.createElement('li') novoItem.classList.add("item")

const numeroItem = document.createElement('strong')
numeroItem.innerHTML = item.quantidade
novoItem.appendChild(numeroItem)

novoItem.innerHTML += item.nome

lista.appendChild(novoItem)

}

erro no console: Uncaught ReferenceError: Cannot access 'criaElemento' before initialization

Mas alterando para uma Function o código funciona normalmente, código da Function que funciona:

function criaElemento(item){ const novoItem = document.createElement('li') novoItem.classList.add("item")

const numeroItem = document.createElement('strong')
numeroItem.innerHTML = item.quantidade
novoItem.appendChild(numeroItem)

novoItem.innerHTML += item.nome

lista.appendChild(novoItem)

}

Olá estudante, tudo bem?

Desculpe a demora em retornar.

Pelo que entendi, ao mudar a função para uma Arrow Function, o código apresentou um erro de referência. Isso aconteceu porque a Arrow Function tem um comportamento diferente em relação ao escopo em que é criada.

Quando usamos uma Arrow Function, ela não cria um novo escopo, como acontece com uma Function tradicional. Isso significa que as variáveis e funções declaradas fora da Arrow Function não são acessíveis dentro dela.

No seu caso, o erro ocorreu porque a Arrow Function tentou acessar a variável "lista", que foi declarada fora dela. Para resolver esse problema, você pode passar a variável "lista" como um parâmetro da Arrow Function, assim como você fez com o parâmetro "item".

Ficaria assim:

const criaElemento = (item, lista) => { const novoItem = document.createElement('li') novoItem.classList.add("item")

const numeroItem = document.createElement('strong')
numeroItem.innerHTML = item.quantidade
novoItem.appendChild(numeroItem)

novoItem.innerHTML += item.nome

lista.appendChild(novoItem)

}

Espero ter ajudado.

Um abraço e bons estudos.