{"id":5562,"date":"2024-08-28T22:28:14","date_gmt":"2024-08-28T22:28:14","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/fonctions-anonymes-en-javascript-explications\/"},"modified":"2024-08-28T22:28:18","modified_gmt":"2024-08-28T22:28:18","slug":"fonctions-anonymes-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/fonctions-anonymes-en-javascript-explications\/","title":{"rendered":"4.10 Fonctions Anonymes en JavaScript : Explications"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Fonctions Anonymes en JavaScript<\/strong> jouent un r\u00f4le crucial dans l&rsquo;\u00e9criture de code concis et efficace. Comprendre comment mettre en place et utiliser les <strong>fonctions anonymes<\/strong> peut consid\u00e9rablement am\u00e9liorer votre capacit\u00e9 \u00e0 \u00e9crire du code JavaScript propre et compr\u00e9hensible. Apprenons comment elles fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Fonctions Anonymes 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\/658879499?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                    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();\n    }\n});\n<\/script>\n\n\n\n<p>Une fonction anonyme en JavaScript est une fonction qui n&rsquo;a pas de nom. Elle est souvent utilis\u00e9e lorsqu&rsquo;une fonction n&rsquo;a pas besoin d&rsquo;\u00eatre r\u00e9utilis\u00e9e ailleurs dans le code. Les fonctions anonymes sont couramment utilis\u00e9es dans les expressions de fonction, les arguments de fonction, et les IIFE (Immediately Invoked Function Expressions). Voici quelques exemples illustrant leur utilisation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir une Fonction Anonyme<\/h3>\n\n\n\n<p>Une des fa\u00e7ons les plus courantes de d\u00e9finir une fonction anonyme est de l&rsquo;assigner \u00e0 une variable ou une constante :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const greet = function() {\n    console.log(\"Hello, world!\");\n};\n\ngreet(); \/\/ Affiche \"Hello, world!\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Fonctions Anonymes en tant qu&rsquo;Arguments de Fonctions<\/h3>\n\n\n\n<p>Les fonctions anonymes sont souvent pass\u00e9es comme arguments \u00e0 d&rsquo;autres fonctions. Par exemple, elles sont largement utilis\u00e9es avec les m\u00e9thodes de tableau comme <code>map<\/code>, <code>filter<\/code>, et <code>forEach<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4, 5];\n\n\/\/ Utiliser une fonction anonyme avec map\nlet doubled = numbers.map(function(number) {\n    return number * 2;\n});\n\nconsole.log(doubled); \/\/ [2, 4, 6, 8, 10]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les IIFE (Immediately Invoked Function Expressions)<\/h3>\n\n\n\n<p>Une autre utilisation courante des fonctions anonymes est dans les IIFE (Immediately Invoked Function Expressions), qui sont des fonctions invoqu\u00e9es imm\u00e9diatement apr\u00e8s leur d\u00e9claration :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>(function() {\n    console.log(\"This function runs immediately!\");\n})();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages des Fonctions Anonymes<\/h3>\n\n\n\n<p>Les fonctions anonymes offrent plusieurs avantages, tels que l&rsquo;am\u00e9lioration de la lisibilit\u00e9 du code lorsqu&rsquo;elles sont utilis\u00e9es comme callbacks, et la r\u00e9duction de la pollution de l&rsquo;espace de noms en \u00e9vitant de nommer des fonctions qui ne sont utilis\u00e9es qu&rsquo;une seule fois. Voici un autre exemple montrant une utilisation avanc\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('click', function() {\n    console.log(\"The document was clicked!\");\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fonctions Fl\u00e9ch\u00e9es comme Fonctions Anonymes<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es (Arrow Functions) introduites dans ES6 offrent une syntaxe plus concise pour les fonctions anonymes. Elles sont id\u00e9ales pour les callbacks et les fonctions de courte dur\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, 2, 3, 4, 5];\n\n\/\/ Utiliser une fonction fl\u00e9ch\u00e9e avec map\nlet squares = numbers.map(number => number * number);\n\nconsole.log(squares); \/\/ [1, 4, 9, 16, 25]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Anonymes Auto-Ex\u00e9cut\u00e9es<\/h3>\n\n\n\n<p>Les fonctions anonymes auto-ex\u00e9cut\u00e9es sont utiles pour isoler des variables locales et \u00e9viter leur contamination dans le contexte global :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>(function() {\n    let localVar = \"I'm only accessible within this function\";\n    console.log(localVar);\n})();\n\n\/\/ console.log(localVar); \/\/ Erreur : localVar n'est pas d\u00e9fini\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Fonctions Anonymes<\/h3>\n\n\n\n<p>Pour illustrer davantage l&rsquo;utilisation des fonctions anonymes, voici quelques exemples plus avanc\u00e9s qui montrent leur int\u00e9gration dans des op\u00e9rations complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;un Closures<\/h4>\n\n\n\n<p>Les fonctions anonymes peuvent \u00eatre utilis\u00e9es pour cr\u00e9er des closures, une technique puissante en JavaScript pour encapsuler des \u00e9tats priv\u00e9s et cr\u00e9er des fonctions avec des port\u00e9es lexicales :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createCounter() {\n    let count = 0;\n    return function() {\n        count += 1;\n        return count;\n    };\n}\n\nlet counter = createCounter();\nconsole.log(counter()); \/\/ 1\nconsole.log(counter()); \/\/ 2\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation dans des Promesses<\/h4>\n\n\n\n<p>Les fonctions anonymes sont \u00e9galement tr\u00e8s utiles dans la gestion des Promesses, particuli\u00e8rement lorsqu&rsquo;on travaille avec des op\u00e9rations asynchrones :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let promise = new Promise((resolve, reject) => {\n    setTimeout(() => resolve(\"Promise resolved!\"), 2000);\n});\n\npromise.then(result => console.log(result)); \/\/ Affiche \"Promise resolved!\" apr\u00e8s 2 secondes\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Les <strong>fonctions anonymes en JavaScript<\/strong> sont un outil puissant pour \u00e9crire du code flexible et r\u00e9utilisable. Elles permettent de cr\u00e9er des callbacks courts, des IIFE, et d&rsquo;utiliser des closures efficacement. En comprenant et en ma\u00eetrisant les fonctions anonymes, vous pouvez grandement am\u00e9liorer la qualit\u00e9 et la maintenabilit\u00e9 de votre code JavaScript. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-avanc\u00e9s\/150\">les fonctionnalit\u00e9s avanc\u00e9es de JavaScript<\/a> et lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-une-fonction-en-javascript-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a> pour apprendre \u00e0 cr\u00e9er des fonctions en JavaScript.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-pour-d\u00e9butants\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT.png\" loading=\"lazy\" alt=\"Learnify Formation JavaScript\" title=\"\"><\/a>\n\n\n<!-- Internal Links -->\n<a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que JavaScript<\/a>\n<a href=\"https:\/\/wikiform.fr\/codespace\/software-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">Meilleurs Logiciels pour JavaScript<\/a>\n<a href=\"https:\/\/wikiform.fr\/codespace\/que-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">Quel est le r\u00f4le des variables en JavaScript<\/a>\n<a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">Guide Complet des Extensions JavaScript<\/a>\n<a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">Utilisation du d\u00e9bogueur en JavaScript<\/a>\n\n<!-- External Links -->\n<p>Pour approfondir vos connaissances en JavaScript, vous pouvez consulter <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Fonctions\" target=\"_blank\" rel=\"noopener\">ce guide complet sur MDN<\/a>. De plus, <a href=\"https:\/\/www.freecodecamp.org\/news\/understanding-javascript-promises\/\" target=\"_blank\" rel=\"noopener\">cet article sur FreeCodeCamp<\/a> offre une excellente introduction aux Promesses en JavaScript. Si vous souhaitez explorer davantage les fonctions fl\u00e9ch\u00e9es, <a href=\"https:\/\/www.w3schools.com\/js\/js_arrow_function.asp\" target=\"_blank\" rel=\"noopener\">ce tutoriel sur W3Schools<\/a> est un bon point de d\u00e9part.<\/p>\n\n<!-- Formation Promotion -->\n<p>Pour continuer votre apprentissage de JavaScript, d\u00e9couvrez notre formation sp\u00e9ciale sur la plateforme Learnify. Cliquez ci-dessous pour obtenir une offre sp\u00e9ciale\u00a0!<\/p>\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\" title=\"\"><\/a>\n\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                    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","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Fonctions Anonymes en JavaScript jouent un r\u00f4le crucial dans l&rsquo;\u00e9criture de code concis et efficace. Comprendre comment mettre en place et utiliser les fonctions&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2881,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5562","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\/5562","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=5562"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5562\/revisions"}],"predecessor-version":[{"id":5563,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5562\/revisions\/5563"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2881"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}