Bonjour, j'ai repris JS depuis peu et je bloque sur les closures c'est encore vague.
Voilà ce que j'ai compris: chaque variable déclarée ou paramètre d'une fonction mère pourront être utilisées dans les fonctions filles mais j'aimerais comprendre avec les contextes d'exécutions, le cheminement des variables... Voilà 2 fonctions pour faire la traditionnelle todoList içi todo et index sont récupéré via les closures par createTodoElement
Merci d'avance pour les éclaircissements

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
const displayTodo = () => {
  const todosNode = todos.map((todo, index) => {
    if (todo.editMode) {
      return createTodoEditElement(todo, index);
    } else {
      return createTodoElement(todo, index);
    }
  });
  ul.innerHTML = "";
  ul.append(...todosNode);
};
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const createTodoElement = (todo, index) => {
  const li = document.createElement("li");
  const buttonDelete = document.createElement("button");
  buttonDelete.innerHTML = "Supprimer";
  const buttonEdit = document.createElement("button");
  buttonEdit.innerHTML = "Editer";
  buttonDelete.addEventListener("click", (event) => {
    event.stopPropagation();
    deleteTodo(index);
  });
  buttonEdit.addEventListener("click", (event) => {
    event.stopPropagation();
    toggleEditMode(index);
  });
  li.innerHTML = `
        <span class="todo ${todo.done ? " done" : ""}"></span>
        <p>${todo.text}</p>
        <button>Supprimer<button>
    `;
  li.addEventListener("click", (event) => {
    toggleTodo(index);
  });
  li.append(buttonEdit, buttonDelete);
  return li;
};