Précisions sur les closures

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:

---

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:

---

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; };

---

Je vais me risquer a expliquer les closures même si je crois que vu ton exemple tu as saisi, chaque fonction enfant appelée hérite du contexte de fonction parent au moment de son execution.
exemple trivial :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

var name = 'jean eude'; // context objet global     function test( ){ // contexte function a accès au contexte parent   console.log(name) }   test(); // console log 'jean eude'

---

exemple de capture de variable du contexte parent pour utilisation a posteriori :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function coucou(prenom){   var text = 'coucou'+prenom; // variable locale capturée   var sayCoucou = function(){   console.log(text); }   return sayCoucou;   }   var mafonc = coucou('bob'); mafonc(); // console log coucou bob car la var text locale est dans la closure

---

Ici Sexe et Message sont des closures mais pas name.

Code:

---

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

function Human( name ){   var sexe = "male"; // variable locale capturée this.getSexe = function(){ return sexe; } this.getName = function(){ return name; } this.message = `${name} est de sexe ${sexe}`; // variable locale capturée   this.getMessage = function(){   return this.message; }     }   var bob = new Human('Bob'); // appel au constructeur     bob.getSexe() // acces par une closure car var sexe est dans la portée de la fonction Human au moment de l'execution bob.getName(); // ce n'est pas une closure car name est passé en param, il n'est pas dans la portée au moment de l'execution console.log(bob.getMessage()) // acces par une closure car var message est defini dans la portée lors de l'execution.

---

Dans des cas pratique, on peut imaginer un traitement en JS sur le DOM, on voudrait faire une fonction qui crée une animation sur des divs mais de manière indépendante :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function animateThisDiv(elementID){   var elem = document.getElementById(elementID); var loop = 0;   var timer = setInterval(function( ){   if(loop < 50){ // traitement sur la div loop++ }else{ clearInterval(timer);   //on accède à loop via une closure, loop est defini dans la portée parente et est donc indépendant. // on accède à timer également via une closure }   }, 10)   }   animateThisDiv("idDIv1"); // l'animation sur la DIV 1 est indépendante car les variables loop et timer sont définis au moment ou la fonction est appelée, autrement dit a chaque appel de la fonction ,une nouvelle closure est crée animateThisDiv("idDIv2"); // l'animation sur la DIV 2 est indépendante

---