[Dúvida] Modificando a descrição do objeto tarefas

Então, olha só — quando a gente faz esse trecho aqui:

botao.onclick = () => {
    const novaDescricao = prompt("Qual será a nova descrição?")
    paragrafo.textContent = novaDescricao
    console.log(tarefa.descricao)
    tarefa.descricao = novaDescricao
    atualizarTarefas()
}

…o segredo é esse tarefa aí.

Esse tarefa não é um índice nem nada disso, mas sim a referência direta ao objeto que foi passado quando tu chamou criarElementoTarefa(tarefa). E isso aconteceu lá no forEach e no submit do form:

tarefas.forEach(tarefa => {
    const elementoTarefa = criarElementoTarefa(tarefa)

Ou seja: quando a gente chama criarElementoTarefa(tarefa), ele recebe aquele objeto mesmo que tá dentro do array tarefas. Então, dentro da função, o botão já tá com acesso a exatamente aquele objeto. É tipo quando tu pega um item da lista e passa ele pra outra função — continua sendo ele, não uma cópia.

Por isso, mesmo sem passar o índice ou mexer no array diretamente, ele sabe exatamente qual tarefa alterar: porque tá usando a referência original.

Se tu abrir o console, vai ver que os logs batem certinho com o conteúdo do array, mesmo sem índice.

Se quiser ver o índice também, você pode usar o forEach assim:

tarefas.forEach((tarefa, index) => {
    const elementoTarefa = criarElementoTarefa(tarefa, index)

E aí altera tua função pra:

function criarElementoTarefa(tarefa, index) {
    // ...
    botao.onclick = () => {
        console.log('Índice:', index)
        // etc
    }
}

Mas do jeito que tá, já funciona lindamente por causa da referência do objeto.

Isso tudo tem a ver com passagem de parâmetro por valor ou por referência que o JS faz, deixa eu te explicar:

Quando a gente passa uma variável pra uma função ou pra algum manipulador de evento, como o onclick, o JavaScript pode fazer isso de duas formas: por valor ou por referência. E entender essa diferença é chave pra saber o que tá acontecendo por trás dos panos.

Por valor

Isso acontece com tipos primitivos, tipo:

• number (número)
• string (texto)
• boolean (verdadeiro/falso)
• null
• undefined
• symbol e bigint (mais raros, mas também primitivos)

Quando tu passa um desses pra uma função, o valor é copiado. A função recebe uma cópia do dado, e se ela mudar esse valor dentro da função, não afeta o original.

Tipo assim:

function mudaNumero(x) {
  x = x + 1
  console.log('Dentro da função:', x)
}

let numero = 5
mudaNumero(numero)
console.log('Fora da função:', numero)

Saída:

Dentro da função: 6
Fora da função: 5

Ou seja, o valor foi passado, mas como era primitivo, virou uma cópia e a variável original não foi afetada.

Por referência

Agora, quando a gente tá lidando com objetos, arrays, funções, etc., o que é passado não é uma cópia do conteúdo, e sim uma referência pro mesmo local na memória. Ou seja, se tu mudar algo dentro da função, isso afeta o original.

Exemplo:

function mudaDescricao(obj) {
  obj.descricao = 'Nova descrição'
}

let tarefa = { descricao: 'Estudar JavaScript' }
mudaDescricao(tarefa)
console.log(tarefa.descricao) // 'Nova descrição'

A função recebeu o mesmo objeto que tava fora dela, então qualquer mudança que tu faz dentro dela, se reflete no original. É isso que tá rolando no Fokus :)

Valeu prof. Vini. Agora ficou claro essa passagem de parâmetros...XD