{"id":5608,"date":"2024-08-29T00:00:47","date_gmt":"2024-08-29T00:00:47","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/recursivite-en-javascript-guide-complet\/"},"modified":"2025-01-07T16:33:35","modified_gmt":"2025-01-07T16:33:35","slug":"recursivite-en-javascript-guide-complet","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/recursivite-en-javascript-guide-complet\/","title":{"rendered":"7.2 R\u00e9cursivit\u00e9 en JavaScript : Guide Complet"},"content":{"rendered":"\n\n\n<p><strong>La R\u00e9cursivit\u00e9 en JavaScript :<\/strong> un concept fondamental qui permet aux fonctions de s&rsquo;appeler elles-m\u00eames, facilitant la r\u00e9solution de probl\u00e8mes complexes gr\u00e2ce \u00e0 des solutions simples et \u00e9l\u00e9gantes. Ma\u00eetriser la r\u00e9cursivit\u00e9 est essentiel pour tout d\u00e9veloppeur JavaScript souhaitant am\u00e9liorer ses comp\u00e9tences en programmation. Plongeons dans ce guide complet pour comprendre et ma\u00eetriser la r\u00e9cursivit\u00e9 en JavaScript \u00e0 travers des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>R\u00e9cursivit\u00e9 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\/658884564?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>La r\u00e9cursivit\u00e9 est le processus par lequel une fonction s&rsquo;appelle elle-m\u00eame. Pour comprendre la r\u00e9cursivit\u00e9 en JavaScript, il est essentiel de ma\u00eetriser deux concepts fondamentaux : le cas de base et le cas r\u00e9cursif. Le cas de base met fin \u00e0 la r\u00e9cursion, tandis que le cas r\u00e9cursif d\u00e9compose le probl\u00e8me en sous-probl\u00e8mes plus petits. Explorons ces concepts avec des exemples pratiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Fonction R\u00e9cursive en JavaScript<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er une fonction r\u00e9cursive simple. Prenons l&rsquo;exemple classique de la fonction factorielle, qui calcule le produit de tous les entiers positifs jusqu&rsquo;\u00e0 un certain nombre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function factorielle(n) {\n    if (n === 0) {\n        return 1;\n    } else {\n        return n * factorielle(n - 1);\n    }\n}\n\n\/\/ Exemple d'utilisation\nconsole.log(factorielle(5)); \/\/ Affiche 120\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre Le Cas de Base et Le Cas R\u00e9cursif<\/h3>\n\n\n\n<p>Pour mieux comprendre, analysons la fonction factorielle. Le cas de base est d\u00e9fini par <code>if (n === 0) { return 1; }<\/code>. Il met fin \u00e0 la r\u00e9cursion lorsque <code>n<\/code> devient 0. Le cas r\u00e9cursif est celui o\u00f9 la fonction s&rsquo;appelle elle-m\u00eame avec <code>n - 1<\/code> jusqu&rsquo;\u00e0 atteindre le cas de base.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la R\u00e9cursivit\u00e9 pour Parcourir Un Tableau<\/h3>\n\n\n\n<p>La r\u00e9cursivit\u00e9 peut \u00e9galement s&rsquo;av\u00e9rer utile pour parcourir des structures de donn\u00e9es telles que les tableaux. Par exemple, voici comment utiliser la r\u00e9cursivit\u00e9 pour calculer la somme des \u00e9l\u00e9ments d&rsquo;un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function sommeTableau(arr) {\n    if (arr.length === 0) {\n        return 0;\n    } else {\n        return arr&#91;0] + sommeTableau(arr.slice(1));\n    }\n}\n\n\/\/ Exemple d'utilisation\nconsole.log(sommeTableau(&#91;1, 2, 3, 4, 5])); \/\/ Affiche 15\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la R\u00e9cursivit\u00e9 pour R\u00e9soudre des Probl\u00e8mes Complexes<\/h3>\n\n\n\n<p>La r\u00e9cursivit\u00e9 est particuli\u00e8rement puissante pour r\u00e9soudre des probl\u00e8mes complexes. Par exemple, consid\u00e9rons le probl\u00e8me des tours de Hano\u00ef, une \u00e9nigme math\u00e9matique c\u00e9l\u00e8bre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function toursDeHanoi(n, source, destination, auxiliaire) {\n    if (n === 1) {\n        console.log(`D\u00e9placer le disque 1 de ${source} \u00e0 ${destination}`);\n        return;\n    }\n    toursDeHanoi(n - 1, source, auxiliaire, destination);\n    console.log(`D\u00e9placer le disque ${n} de ${source} \u00e0 ${destination}`);\n    toursDeHanoi(n - 1, auxiliaire, destination, source);\n}\n\n\/\/ Exemple d'utilisation\ntoursDeHanoi(3, 'A', 'C', 'B');\n\/\/ Affiche les \u00e9tapes pour d\u00e9placer 3 disques de A \u00e0 C en utilisant B comme auxiliaire\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser la R\u00e9cursivit\u00e9 avec la M\u00e9morisation<\/h3>\n\n\n\n<p>La r\u00e9cursivit\u00e9 peut parfois entra\u00eener des probl\u00e8mes de performance, notamment en cas de calculs redondants. Pour \u00e9viter cela, vous pouvez utiliser la m\u00e9morisation pour stocker les r\u00e9sultats interm\u00e9diaires. Prenons l&rsquo;exemple du calcul de la suite de Fibonacci :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function fibonacci(n, memo = {}) {\n    if (n in memo) {\n        return memo[n];\n    }\n    if (n <= 1) {\n        return n;\n    }\n    memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);\n    return memo[n];\n}\n\/\/ Exemple d'utilisation\nconsole.log(fibonacci(10)); \/\/ Affiche 55\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de R\u00e9cursivit\u00e9 en JavaScript<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension de la r\u00e9cursivit\u00e9 en JavaScript, voici quelques exemples avanc\u00e9s qui illustrent les diff\u00e9rentes applications de cette technique.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Explorer des Arborescences<\/h4>\n\n\n\n<p>La r\u00e9cursivit\u00e9 est particuli\u00e8rement efficace pour parcourir des structures arborescentes, comme les documents HTML ou les arbres binaires. Par exemple, voici comment utiliser la r\u00e9cursivit\u00e9 pour parcourir un arbre DOM :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function parcourirArbreDOM(node) {\n    console.log(node.nodeName);\n    node.childNodes.forEach(child =&gt; parcourirArbreDOM(child));\n}\n\n\/\/ Exemple d'utilisation\nparcourirArbreDOM(document.body); \/\/ Affiche la structure de l'arbre DOM \u00e0 partir de la balise body\n<\/code><\/pre>\n\n\n<p><!-- Internal linking starts here --><\/p>\n\n\n<p>En approfondissant le fonctionnement de la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">fonctionnalit\u00e9 de JavaScript<\/a>, vous pouvez am\u00e9liorer vos connaissances sur divers sujets.<\/p>\n\n\n\n<p>Pour une meilleure gestion des outils, consultez notre guide complet sur les <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">meilleurs logiciels pour JavaScript<\/a>.<\/p>\n\n\n\n<p>Notre guide pratique vous montrera comment <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">placer du code JavaScript<\/a>.<\/p>\n\n\n\n<p>D\u00e9couvrez comment fonctionne <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-vs-code-pour-javascript\" target=\"_blank\" rel=\"noopener\">VS Code pour JavaScript<\/a>.<\/p>\n\n\n\n<p>Enfin, ne manquez pas notre article complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-break-et-continue-en-javascript\" target=\"_blank\" rel=\"noopener\">l'utilisation des instructions break et continue en JavaScript<\/a>.<\/p>\n\n\n<p><!-- Internal linking ends here --><\/p>\n\n\n<h4 class=\"wp-block-heading\">R\u00e9solution de Probl\u00e8mes de Combinatoire<\/h4>\n\n\n\n<p>La r\u00e9cursivit\u00e9 est \u00e9galement utile pour r\u00e9soudre des probl\u00e8mes de combinatoire, comme la g\u00e9n\u00e9ration de permutations ou de combinaisons. Par exemple, voici comment g\u00e9n\u00e9rer toutes les permutations d'une cha\u00eene de caract\u00e8res :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function permutations(str, prefix = '') {\n    if (str.length === 0) {\n        console.log(prefix);\n    } else {\n        for (let i = 0; i < str.length; i++) {\n            const rem = str.slice(0, i) + str.slice(i + 1);\n            permutations(rem, prefix + str[i]);\n        }\n    }\n}\n\/\/ Exemple d'utilisation\npermutations('abc'); \/\/ Affiche toutes les permutations de 'abc'\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Optimisation et D\u00e9coupage de Probl\u00e8mes<\/h4>\n\n\n\n<p>La r\u00e9cursivit\u00e9 est souvent utilis\u00e9e dans des algorithmes de recherche et d'optimisation. Par exemple, l'algorithme de Recherche Binaire utilise une approche r\u00e9cursive pour trouver un \u00e9l\u00e9ment dans une liste tri\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function rechercheBinaire(arr, cible, debut = 0, fin = arr.length - 1) {\n    if (debut &gt; fin) {\n        return -1;\n    }\n    const milieu = Math.floor((debut + fin) \/ 2);\n    if (arr&#91;milieu] === cible) {\n        return milieu;\n    } else if (arr&#91;milieu] &gt; cible) {\n        return rechercheBinaire(arr, cible, debut, milieu - 1);\n    } else {\n        return rechercheBinaire(arr, cible, milieu + 1, fin);\n    }\n}\n\n\/\/ Exemple d'utilisation\nconsole.log(rechercheBinaire(&#91;1, 2, 3, 4, 5, 6, 7, 8, 9], 5)); \/\/ Affiche 4\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources Suppl\u00e9mentaires et Conclusion<\/h3>\n\n\n\n<p>La r\u00e9cursivit\u00e9 est un concept puissant, et la pratique r\u00e9guli\u00e8re est essentielle pour la ma\u00eetriser. Pour approfondir vos comp\u00e9tences, vous pouvez explorer des ressources suppl\u00e9mentaires comme des cours en ligne, des livres, et des exercices de codage. Consultez par exemple le cours complet sur les fondamentaux de JavaScript propos\u00e9 par Learnify.<\/p>\n\n\n<p><!-- External resources starts here --><\/p>\n\n\n<a href=\"https:\/\/www.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\" rel=\"noopener\">Guide de d\u00e9veloppement MDN<\/a>\n\n\n\n<a href=\"https:\/\/www.w3schools.com\/js\/default.asp\" target=\"_blank\" rel=\"noopener\">W3Schools JavaScript Documentation<\/a>\n\n\n\n<a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\" target=\"_blank\" rel=\"noopener\">Mozilla Docs Arrays<\/a>\n\n\n<p><!-- External resources ends here --><\/p>\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\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La R\u00e9cursivit\u00e9 en JavaScript : un concept fondamental qui permet aux fonctions de s&rsquo;appeler elles-m\u00eames, facilitant la r\u00e9solution de probl\u00e8mes complexes gr\u00e2ce \u00e0 des solutions&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5608","post","type-post","status-publish","format-standard","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\/5608","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=5608"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5608\/revisions"}],"predecessor-version":[{"id":6106,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5608\/revisions\/6106"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}