Soy nuevo en JS y en el código JS a continuación, el const newTodo se usa en handlTodoSubmit() y lo estoy usando como argumento de paintTodo() .
lo que sé es que cuando estoy usando una var en una función específica, esa var solo puede usarse en la función que contenía. pero paintTodo() está usando el valor newToDo en span.innerText
¿Cómo puede suceder esto?
const toDoForm = document.getElementById("toDoForm"); const toDoInput = document.getElementById("toDoInput"); const toDoList = document.getElementById("toDoList"); function paintTodo(list){ const li = document.createElement("li"); const span = document.createElement("span"); span.innerText = list; li.appendChild(span); toDoList.appendChild(li); } function handleTodoSubmit(event){ event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ""; paintTodo(newToDo); } toDoForm.addEventListener("submit", handleTodoSubmit); <form id="toDoForm"> <input type="text" id="toDoInput" /> <input type="submit" /> <ul id="toDoList"></ul> </form>Su const newToDo se declara en handleTodoSubmit y solo se usa en ese contexto. Como puede ver, no hay una llamada a newToDo en paintTodo .
Sin embargo, la entidad representada por newToDo y la representada por list contienen el mismo valor (¡aunque no sean lo mismo!). En los lenguajes de programación (un buen número de ellos de todos modos), si le pasas una variable o una constante a una función, esa función la copiará y usará esa copia (como en "Te envío un correo electrónico con el PDF adjunto" , solo tendrás una copia de mi PDF).
La variable newToDo permanece en handleTodoSubmit , pero existe una copia llamada list en paintTodo .