{"id":5636,"date":"2024-08-29T00:56:18","date_gmt":"2024-08-29T00:56:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/notes-sur-fonctions-flechees-en-javascript\/"},"modified":"2024-08-29T00:56:22","modified_gmt":"2024-08-29T00:56:22","slug":"notes-sur-fonctions-flechees-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/notes-sur-fonctions-flechees-en-javascript\/","title":{"rendered":"8.14 Notes sur Fonctions Fl\u00e9ch\u00e9es en JavaScript"},"content":{"rendered":"\n<p><strong>Les fonctions fl\u00e9ch\u00e9es en JavaScript<\/strong> sont de pr\u00e9cieux outils modernes introduits avec ECMAScript 6 (ES6). Leur syntaxe concise les rend parfaites pour les fonctions anonymes, particuli\u00e8rement en tant que callbacks. Ce tuto vous guidera \u00e0 travers les principes de base et les utilisations avanc\u00e9es des fonctions fl\u00e9ch\u00e9es en JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Fonctions Fl\u00e9ch\u00e9es 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\/658887016?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>Les fonctions fl\u00e9ch\u00e9es sont une mani\u00e8re concise d&rsquo;\u00e9crire des fonctions anonymes avec une syntaxe plus propre. Elles ne lient pas leurs propres <code>this<\/code>, <code>arguments<\/code>, <code>super<\/code> ou <code>new.target<\/code>. Elles sont parfaites pour les callbacks et les it\u00e9ratives dans des contextes comme <code>map<\/code>, <code>forEach<\/code>, et <code>filter<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de Base des Fonctions Fl\u00e9ch\u00e9es<\/h3>\n\n\n\n<p>Commen\u00e7ons avec la syntaxe de base des fonctions fl\u00e9ch\u00e9es. Elles utilisent une fl\u00e8che (<code>=><\/code>) pour s\u00e9parer les param\u00e8tres du corps de la fonction. Voici les structures g\u00e9n\u00e9rales :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Fonction fl\u00e9ch\u00e9e avec un seul param\u00e8tre\nconst singleParam = param => param * 2;\n\n\/\/ Fonction fl\u00e9ch\u00e9e avec plusieurs param\u00e8tres\nconst multipleParams = (param1, param2) => param1 + param2;\n\n\/\/ Fonction fl\u00e9ch\u00e9e sans param\u00e8tre\nconst noParam = () => console.log(\"Hello, World!\");\n\n\/\/ Fonction fl\u00e9ch\u00e9e avec corps de bloc\nconst blockBody = (param1, param2) => {\n  const result = param1 * param2;\n  return result;\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences Entre les Fonctions Fl\u00e9ch\u00e9es et Fonctions Classiques<\/h3>\n\n\n\n<p>Il est crucial de comprendre en quoi les fonctions fl\u00e9ch\u00e9es diff\u00e8rent des fonctions classiques, surtout en ce qui concerne le comportement de <code>this<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Fonction classique\nfunction classique() {\n  console.log(this);\n}\n\n\/\/ Fonction fl\u00e9ch\u00e9e\nconst flechee = () => {\n  console.log(this);\n};\n\n\/\/ Exemple d'utilisation\nconst obj = {\n  methodClassique: classique,\n  methodFlechee: flechee\n};\n\nobj.methodClassique(); \/\/ Affichera l'objet `obj`\nobj.methodFlechee();   \/\/ Affichera `undefined` ou l'objet global (en mode non strict)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Pratiques des Fonctions Fl\u00e9ch\u00e9es<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es brillent particuli\u00e8rement dans les callbacks et les collections. Voici quelques exemples pratiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation avec `map`\nconst numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map(n => n * 2);\n\n\/\/ Utilisation avec `forEach`\nconst items = [\"Item1\", \"Item2\", \"Item3\"];\nitems.forEach(item => console.log(item));\n\n\/\/ Utilisation avec `filter`\nconst evenNumbers = numbers.filter(n => n % 2 === 0);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulation du Contexte avec les Fonctions Fl\u00e9ch\u00e9es<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es conservent le contexte de <code>this<\/code> lorsque utilis\u00e9 avec des m\u00e9thodes comme <code>setTimeout<\/code>. Cela peut simplifier le code et \u00e9viter les erreurs de contexte :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function Timer() {\n  this.seconds = 0;\n  setInterval(() => {\n    this.seconds++;\n    console.log(this.seconds);\n  }, 1000);\n}\n\nnew Timer(); \/\/ \u00c0 chaque seconde, this.seconds s'incr\u00e9mente correctement\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Fl\u00e9ch\u00e9es et Promesses<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es sont tr\u00e8s utiles dans la gestion des promesses gr\u00e2ce \u00e0 leur syntaxe concise :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const asyncFunction = () => {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve(\"Succ\u00e8s !\");\n    }, 1000);\n  });\n};\n\nasyncFunction().then(result => console.log(result)).catch(error => console.error(error));\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Limitations des Fonctions Fl\u00e9ch\u00e9es<\/h3>\n\n\n\n<p>Bien que puissantes, les fonctions fl\u00e9ch\u00e9es ne sont pas sans limitations. Elles ne peuvent pas \u00eatre utilis\u00e9es comme constructeurs et n\u2019ont pas acc\u00e8s \u00e0 <code>new.target<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Essayer d'utiliser une fonction fl\u00e9ch\u00e9e comme constructeur\nconst Person = (name) => {\n  this.name = name;\n};\nconst john = new Person(\"John\"); \/\/ TypeError: Person is not a constructor\n\n\/\/ Utilisation correcte avec une fonction classique\nfunction Person(name) {\n  this.name = name;\n}\nconst john = new Person(\"John\"); \/\/ Fonctionne correctement\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Fonctions Fl\u00e9ch\u00e9es dans les Classes<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es peuvent \u00eatre utilis\u00e9es comme m\u00e9thodes dans les classes pour pr\u00e9server le contexte lexical de <code>this<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class Person {\n  constructor(name) {\n    this.name = name;\n  }\n\n  greet = () => {\n    console.log(`Bonjour, je suis ${this.name}`);\n  }\n}\n\nconst alice = new Person(\"Alice\");\nalice.greet(); \/\/ Affichera \"Bonjour, je suis Alice\"\n<\/code><\/pre>\n\n\n\n<p>Pour aller plus loin, d\u00e9couvrez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">guide sur les variables en JavaScript<\/a>, ou encore nos tutoriels sur <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">let, const et var<\/a> pour en savoir plus sur la gestion des variables en JavaScript. Vous pouvez \u00e9galement explorer notre <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">guide pratique de la concat\u00e9nation en JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>fonctions fl\u00e9ch\u00e9es en JavaScript<\/strong> apportent une mani\u00e8re concise et claire d&rsquo;\u00e9crire des fonctions, tout en g\u00e9rant le contexte lexical de <code>this<\/code> de fa\u00e7on implicite. Elles sont particuli\u00e8rement utiles pour les callbacks, les collections, et la manipulation de contexte. Pour une \u00e9tude approfondie, explorez davantage nos autres <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">tutoriels JavaScript<\/a> et apprenez \u00e0 ma\u00eetriser cette puissante fonctionnalit\u00e9.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Python Offre 50%\" title=\"\"><\/a>\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","protected":false},"excerpt":{"rendered":"<p>Les fonctions fl\u00e9ch\u00e9es en JavaScript sont de pr\u00e9cieux outils modernes introduits avec ECMAScript 6 (ES6). Leur syntaxe concise les rend parfaites pour les fonctions anonymes,&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2890,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5636","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\/5636","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=5636"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5636\/revisions"}],"predecessor-version":[{"id":5637,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5636\/revisions\/5637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2890"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}