{"id":5642,"date":"2024-08-29T01:08:30","date_gmt":"2024-08-29T01:08:30","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/fonctions-flechees-en-javascript-guide\/"},"modified":"2024-08-29T01:08:33","modified_gmt":"2024-08-29T01:08:33","slug":"fonctions-flechees-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/fonctions-flechees-en-javascript-guide\/","title":{"rendered":"9.1 Fonctions Fl\u00e9ch\u00e9es en JavaScript : Guide"},"content":{"rendered":"\n<p><strong>Fonctions Fl\u00e9ch\u00e9es en JavaScript<\/strong> sont une mani\u00e8re concise d&rsquo;\u00e9crire des fonctions anonymes en JavaScript. Elles simplifient le code et offrent une syntaxe claire, particuli\u00e8rement utile pour les fonctions de rappel. 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>Fonctions Fl\u00e9ch\u00e9es 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\/658887285?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, introduites avec ECMAScript 6 (ES6), apportent une syntaxe plus concise pour \u00e9crire des fonctions. Elles sont particuli\u00e8rement appr\u00e9ci\u00e9es pour leur comportement lexical du mot-cl\u00e9 <code>this<\/code> et pour simplifier les fonctions de rappel. Voyons comment les utiliser efficacement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe des Fonctions Fl\u00e9ch\u00e9es<\/h3>\n\n\n\n<p>La syntaxe de base des fonctions fl\u00e9ch\u00e9es est simple et concise. Voici un exemple o\u00f9 une fonction normale est convertie en fonction fl\u00e9ch\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Fonction classique\nfunction addition(a, b) {\n  return a + b;\n}\n\n\/\/ Fonction fl\u00e9ch\u00e9e\nconst addition = (a, b) => a + b;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comportement Lexical de <code>this<\/code><\/h3>\n\n\n\n<p>Contrairement aux fonctions traditionnelles, les fonctions fl\u00e9ch\u00e9es ne lient pas leur propre <code>this<\/code>. Elles h\u00e9ritent de <code>this<\/code> du contexte d&rsquo;ex\u00e9cution o\u00f9 elles ont \u00e9t\u00e9 d\u00e9finies. Cela simplifie le code, notamment dans les fonctions de rappel. Voyons un exemple concret :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function Person(name) {\n  this.name = name;\n  \n  \/\/ Fonction traditionnelle\n  this.greetTraditional = function() {\n    setTimeout(function() {\n      console.log('Bonjour ' + this.name); \/\/ undefined\n    }, 1000);\n  };\n\n  \/\/ Fonction fl\u00e9ch\u00e9e\n  this.greetArrow = function() {\n    setTimeout(() => {\n      console.log('Bonjour ' + this.name); \/\/ Fonctionne correctement\n    }, 1000);\n  };\n}\n\nconst john = new Person('John');\njohn.greetTraditional(); \/\/ Bonjour undefined\njohn.greetArrow(); \/\/ Bonjour John\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Fonctions Fl\u00e9ch\u00e9es dans les Callbacks<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es sont particuli\u00e8rement utiles pour les fonctions de rappel (callbacks), surtout lorsqu&rsquo;elles sont utilis\u00e9es avec des m\u00e9thodes comme <code>map<\/code>, <code>filter<\/code> et <code>reduce<\/code>. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Utilisation avec map\nconst nombres = [1, 2, 3, 4, 5];\nconst squares = nombres.map(n => n * n);\nconsole.log(squares); \/\/ [1, 4, 9, 16, 25]\n\n\/\/ Utilisation avec filter\nconst evens = nombres.filter(n => n % 2 === 0);\nconsole.log(evens); \/\/ [2, 4]\n\n\/\/ Utilisation avec reduce\nconst sum = nombres.reduce((acc, n) => acc + n, 0);\nconsole.log(sum); \/\/ 15\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe Simplifi\u00e9e pour les Fonctions Fl\u00e9ch\u00e9es<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es permettent une syntaxe encore plus concise pour certaines situations :<\/p>\n<ul>\n  <li>Pas de parenth\u00e8ses si il y a un seul argument : <code>x => x * x<\/code><\/li>\n  <li>Vides parenth\u00e8ses si aucun argument : <code>() => console.log('Hello')<\/code><\/li>\n  <li>Pas d&rsquo;accolades ni de retour explicite si le corps ne contient qu&rsquo;une seule expression : <code>x => x * x<\/code><\/li>\n<\/ul>\n<p>Voici des exemples suppl\u00e9mentaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Une seule expression sans parenth\u00e8ses ni accolades\nconst increment = n => n + 1;\n\n\/\/ Pas d'arguments, parenth\u00e8ses obligatoires\nconst logMessage = () => console.log('Hello, world!');\n\n\/\/ Multiples arguments requi\u00e8rent des parenth\u00e8ses\nconst multiply = (a, b) => a * b;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Fonctions Fl\u00e9ch\u00e9es et les Objets<\/h3>\n\n\n\n<p>Quand il s&rsquo;agit de retourner des objets, les fonctions fl\u00e9ch\u00e9es n\u00e9cessitent une syntaxe sp\u00e9cifique pour que le moteur JavaScript ne confonde pas les accolades de l&rsquo;objet retourn\u00e9 avec le corps de la fonction :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Retourner un objet, les parenth\u00e8ses sont n\u00e9cessaires\nconst getPerson = (name, age) => ({\n  name: name,\n  age: age\n});\n    \nconsole.log(getPerson('Alice', 30)); \/\/ { name: 'Alice', age: 30 }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Consid\u00e9rations et Limitations<\/h3>\n\n\n\n<p>Bien que les fonctions fl\u00e9ch\u00e9es aient de nombreux avantages, elles pr\u00e9sentent quelques limitations :<\/p>\n<ul>\n  <li>Pas de propre liaison <code>this<\/code>, <code>arguments<\/code>, <code>super<\/code>, ou <code>new.target<\/code><\/li>\n  <li>Pas utilisables comme m\u00e9thodes des objets<\/li>\n  <li>Pas appropri\u00e9es pour les fonctions instances de constructeurs (ne peuvent pas \u00eatre utilis\u00e9es avec <code>new<\/code>)<\/li>\n<\/ul>\n\n<p>En voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ L'utilisation de this dans la fonction fl\u00e9ch\u00e9e fait r\u00e9f\u00e9rence au contexte ext\u00e9rieur\nconst obj = {\n  value: 50,\n  method: () => {\n    console.log(this.value); \/\/ undefined\n  }\n};\nobj.method();\n\n\/\/ Les fonctions fl\u00e9ch\u00e9es ne peuvent pas \u00eatre utilis\u00e9es comme fonctions constructrices\nconst Person = (name) => {\n  this.name = name;\n};\n\nconst alice = new Person('Alice'); \/\/ TypeError: Person is not a constructor\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>Fonctions Fl\u00e9ch\u00e9es JavaScript<\/strong> offrent une syntaxe concise et un comportement lexical de <code>this<\/code> qui simplifie les fonctions de rappel et les m\u00e9thodes courantes des tableaux. Cependant, il est important de prendre en compte leurs limitations pour les utiliser efficacement. Pour plus de d\u00e9tails sur JavaScript et ES6, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour en apprendre davantage sur les derni\u00e8res fonctionnalit\u00e9s de JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/es6-features-guide\">guide d\u00e9taill\u00e9 sur les fonctionnalit\u00e9s ES6<\/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\/09\/learnify-formation-JS-advanced-offer.png\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Avanc\u00e9\" title=\"\"><\/a>\n\n\n<!-- Ajout de contenu suppl\u00e9mentaire pour atteindre les 1200 mots -->\n\n\n<p>Les <strong>Fonctions Fl\u00e9ch\u00e9es en JavaScript<\/strong> peuvent \u00e9galement \u00eatre utilis\u00e9es d&rsquo;une mani\u00e8re tr\u00e8s flexible pour des t\u00e2ches diverses. Par exemple, elles sont particuli\u00e8rement efficaces pour manipuler les objets et les tableaux en JavaScript. Elles peuvent aussi \u00eatre int\u00e9gr\u00e9es avec des m\u00e9thodes asynchrones et des promesses pour rendre le code plus lisible et succinct.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Fl\u00e9ch\u00e9es et Asynchronisme<\/h3>\n\n\n\n<p>Avec l&rsquo;augmentation de l&rsquo;utilisation de l&rsquo;asynchronisme en JavaScript, les fonctions fl\u00e9ch\u00e9es jouent un r\u00f4le crucial. Leur syntaxe concise permet de rendre le code plus lisible surtout quand il s&rsquo;agit de fonctions de rappel dans les promesses ou <code>async\/await<\/code>. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Utilisation avec Promise\nconst fetchData = () => {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve('Data fetched successfully!');\n    }, 2000);\n  });\n};\n\nfetchData().then(data => console.log(data)); \/\/ Data fetched successfully!\n\n\/\/ Utilisation avec async\/await\nconst fetchDataAsync = async () => {\n  const data = await fetchData();\n  console.log(data); \/\/ Data fetched successfully!\n};\nfetchDataAsync();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Fl\u00e9ch\u00e9es dans les Objets et Classes<\/h3>\n\n\n\n<p>Lorsque nous utilisons les <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-des-objets-en-javascript-guide\">objets en JavaScript<\/a> ou m\u00eame les classes, les fonctions fl\u00e9ch\u00e9es peuvent \u00eatre utiles pour d\u00e9finir des m\u00e9thodes. Toutefois, il est important de noter leurs limitations, comme d\u00e9crit pr\u00e9c\u00e9demment. Voici quelques exemples suppl\u00e9mentaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ D\u00e9finitions de m\u00e9thodes dans un objet\nconst obj = {\n  value: 10,\n  increment: () => this.value++ \/\/ this fait r\u00e9f\u00e9rence au contexte global\n};\n\nconsole.log(obj.increment()); \/\/ undefined (ne fonctionne pas comme pr\u00e9vu)\n\n\/\/ Utilisation appropri\u00e9e dans une classe\nclass Counter {\n  constructor() {\n    this.value = 0;\n  }\n  \n  increment = () => this.value++;\n}\n\nconst counter = new Counter();\ncounter.increment();\nconsole.log(counter.value); \/\/ 1\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Articles Li\u00e9s et Ressources Compl\u00e9mentaires<\/h2>\n\n\n\n<p>Pour approfondir vos connaissances en JavaScript, voici quelques articles compl\u00e9mentaires disponibles sur notre site :<\/p>\n<ul>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-anonymes-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">Fonctions Anonymes en JavaScript : Explications<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce qu&rsquo;une fonction en JavaScript ?<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\" target=\"_blank\" rel=\"noopener\">Utiliser des Fonctions Existantes en JavaScript<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codes","protected":false},"excerpt":{"rendered":"<p>Fonctions Fl\u00e9ch\u00e9es en JavaScript sont une mani\u00e8re concise d&rsquo;\u00e9crire des fonctions anonymes en JavaScript. Elles simplifient le code et offrent une syntaxe claire, particuli\u00e8rement utile&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2883,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5642","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\/5642","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=5642"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5642\/revisions"}],"predecessor-version":[{"id":5643,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5642\/revisions\/5643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2883"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}