{"id":5644,"date":"2024-08-29T01:12:06","date_gmt":"2024-08-29T01:12:06","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/fermetures-closures-en-javascript-explications\/"},"modified":"2025-01-09T15:42:39","modified_gmt":"2025-01-09T15:42:39","slug":"fermetures-closures-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/fermetures-closures-en-javascript-explications\/","title":{"rendered":"9.2 Fermetures (Closures) en JavaScript : Explications"},"content":{"rendered":"\n\n\n<p><strong>Les fermetures (closures) en JavaScript<\/strong> sont un concept fondamental qui permet de cr\u00e9er des fonctions avec une port\u00e9e lexicalne ferm\u00e9e. Comprendre et ma\u00eetriser les <strong>fermetures en JavaScript<\/strong> peut grandement am\u00e9liorer vos comp\u00e9tences en tant que d\u00e9veloppeur JavaScript. Apprenons comment elles fonctionnent et comment les utiliser gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Fermetures en JavaScript<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658887373?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Une fermeture en JavaScript est une fonction qui se souvient de l&rsquo;environnement lexical dans lequel elle a \u00e9t\u00e9 cr\u00e9\u00e9e. Cela signifie que m\u00eame apr\u00e8s que la fonction ext\u00e9rieure ait termin\u00e9 son ex\u00e9cution, la fonction int\u00e9rieure conserve un acc\u00e8s aux variables de la fonction ext\u00e9rieure. Les fermetures sont souvent utilis\u00e9es pour cr\u00e9er des fonctions priv\u00e9es, des modules, et des callbacks asynchrones. Pour en savoir plus sur ce sujet, consultez l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/fermetures-closures-en-javascript-explications\">explication d\u00e9taill\u00e9e des fermetures en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Fermetures en JavaScript<\/h3>\n\n\n\n<p>Pour bien comprendre les <strong>fermetures JavaScript<\/strong>, il est crucial de voir comment elles sont cr\u00e9\u00e9es dans le code. Voici un exemple simple illustrant une fermeture en JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createCounter() {\n    let count = 0;\n    return function() {\n        count++;\n        return count;\n    };\n}\n\nconst counter = createCounter();\nconsole.log(counter()); \/\/ 1\nconsole.log(counter()); \/\/ 2\nconsole.log(counter()); \/\/ 3\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre le M\u00e9canisme des Fermetures<\/h3>\n\n\n\n<p>Dans l&rsquo;exemple pr\u00e9c\u00e9dent, la fonction <code>createCounter<\/code> cr\u00e9e une variable locale <code>count<\/code> et renvoie une fonction qui incr\u00e9mente et retourne cette variable. La magie de la fermeture r\u00e9side dans le fait que, m\u00eame apr\u00e8s que <code>createCounter<\/code> a termin\u00e9 son ex\u00e9cution, la fonction retourn\u00e9e continue d&rsquo;avoir acc\u00e8s \u00e0 la variable <code>count<\/code>. Pour comprendre en profondeur le fonctionnement des fermetures et comment elles influencent la port\u00e9e des variables, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\">guide sur la port\u00e9e des variables en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fermetures pour Cr\u00e9er des Fonctions Priv\u00e9es<\/h3>\n\n\n\n<p>Les fermetures sont souvent utilis\u00e9es pour \u00e9muler des fonctions priv\u00e9es. Voici un exemple qui montre comment vous pouvez cr\u00e9er des m\u00e9thodes priv\u00e9es en utilisant des fermetures :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createPerson(name) {\n    let age = 0;\n\n    return {\n        getAge: function() {\n            return age;\n        },\n        growOlder: function() {\n            age++;\n        },\n        getName: function() {\n            return name;\n        }\n    };\n}\n\nconst person = createPerson('Alice');\nconsole.log(person.getName()); \/\/ Alice\nconsole.log(person.getAge()); \/\/ 0\nperson.growOlder();\nconsole.log(person.getAge()); \/\/ 1\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Fermetures dans les Callbacks et les Asynchrones<\/h3>\n\n\n\n<p>Les fermetures sont extr\u00eamement utiles dans la gestion des callbacks et des op\u00e9rations asynchrones. Dans le contexte de JavaScript moderne, par exemple avec les Promises, les fermetures permettent de conserver l&rsquo;\u00e9tat \u00e0 travers les retours de fonction :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function fetchData(url) {\n    fetch(url)\n        .then(response =&gt; response.json())\n        .then(data =&gt; {\n            console.log('Data fetched:', data);\n        });\n}\n\nconst apiUrl = 'https:\/\/api.example.com\/data';\nfetchData(apiUrl);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Fermetures en JavaScript<\/h3>\n\n\n\n<p>Poursuivons notre exploration des fermetures avec quelques exemples avanc\u00e9s.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser des Fermetures dans les Modules<\/h4>\n\n\n\n<p>Les fermetures sont souvent utilis\u00e9es pour cr\u00e9er des modules en JavaScript, vous permettant de prot\u00e9ger les variables dans une port\u00e9e ferm\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const counterModule = (function() {\n    let count = 0;\n\n    return {\n        increment: function() {\n            count++;\n            return count;\n        },\n        decrement: function() {\n            count--;\n            return count;\n        },\n        getCount: function() {\n            return count;\n        }\n    };\n})();\n\nconsole.log(counterModule.increment()); \/\/ 1\nconsole.log(counterModule.increment()); \/\/ 2\nconsole.log(counterModule.decrement()); \/\/ 1\nconsole.log(counterModule.getCount()); \/\/ 1\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Fermetures et fonctions de rappel embo\u00eet\u00e9es<\/h4>\n\n\n\n<p>Les fermetures peuvent \u00eatre particuli\u00e8rement puissantes lorsqu&rsquo;elles sont utilis\u00e9es dans des fonctions de rappel embo\u00eet\u00e9es, un cas fr\u00e9quent dans la programmation asynchrone :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function outer() {\n    let outerVar = 'I am from outer scope';\n\n    function inner() {\n        console.log(outerVar); \/\/ 'I am from outer scope'\n    }\n\n    return inner;\n}\n\nconst innerFunction = outer();\ninnerFunction();\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Application R\u00e9elle : Cr\u00e9ation d&rsquo;un Timer<\/h4>\n\n\n\n<p>Pour illustrer une application r\u00e9elle des fermetures, nous allons cr\u00e9er un minuteur r\u00e9utilisable :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createTimer() {\n    let time = 0;\n\n    function start() {\n        time++;\n        console.log(`Time: ${time}s`);\n    }\n\n    function stop() {\n        clearInterval(interval);\n        console.log('Timer stopped');\n    }\n\n    function reset() {\n        time = 0;\n        console.log('Timer reset');\n    }\n\n    const interval = setInterval(start, 1000);\n\n    return {\n        stop,\n        reset\n    };\n}\n\nconst timer = createTimer();\n\n\/\/ After some time\nsetTimeout(timer.stop, 5000);\nsetTimeout(timer.reset, 6000);\n<\/code><\/pre>\n\n\n\n<p>Pour ceux qui souhaitent approfondir leurs connaissances des fermetures et de JavaScript en g\u00e9n\u00e9ral, des ressources externes peuvent \u00eatre extr\u00eamement utiles. Le <a href=\"https:\/\/developer.mozilla.org\/\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> offre une excellente documentation sur JavaScript, et des plateformes comme <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> proposent des cours d\u00e9taill\u00e9s. De plus, suivre des tutoriels vid\u00e9o sur <a href=\"https:\/\/www.youtube.com\/\" target=\"_blank\" rel=\"noopener\">YouTube<\/a> peut \u00e9galement \u00eatre b\u00e9n\u00e9fique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>fermetures en JavaScript<\/strong> sont une technique puissante qui permet de cr\u00e9er des fonctions r\u00e9silientes et flexibles. Que vous construisiez des modules, des fonctions priv\u00e9es ou g\u00e9rez des callbacks asynchrones, les fermetures sont un outil indispensable dans votre bo\u00eete \u00e0 outils JavaScript. Continuez \u00e0 explorer ce concept, et vous deviendrez un d\u00e9veloppeur JavaScript encore plus performant. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\">qu&rsquo;est-ce qu&rsquo;un objet en JavaScript<\/a>. Pour apprendre \u00e0 cr\u00e9er des \u00e9l\u00e9ments interactifs avec JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\">tutoriel sur l&rsquo;ajout de param\u00e8tres \u00e0 une fonction JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Les fermetures (closures) en JavaScript sont un concept fondamental qui permet de cr\u00e9er des fonctions avec une port\u00e9e lexicalne ferm\u00e9e. Comprendre et ma\u00eetriser les fermetures&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2879,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5644"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5644\/revisions"}],"predecessor-version":[{"id":6110,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5644\/revisions\/6110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2879"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}