{"id":5554,"date":"2024-08-28T22:12:30","date_gmt":"2024-08-28T22:12:30","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/fonctions-avec-valeur-de-retour-en-javascript\/"},"modified":"2024-08-28T22:12:33","modified_gmt":"2024-08-28T22:12:33","slug":"fonctions-avec-valeur-de-retour-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/fonctions-avec-valeur-de-retour-en-javascript\/","title":{"rendered":"4.6 Fonctions avec Valeur de Retour en JavaScript"},"content":{"rendered":"\n<p><strong>Les Fonctions avec Valeur de Retour en JavaScript<\/strong> jouent un r\u00f4le fondamental dans la manipulation et le traitement des donn\u00e9es dans ce langage de programmation. Comprendre comment cr\u00e9er et utiliser les <strong>fonctions avec valeur de retour en JavaScript<\/strong> peut significativement am\u00e9liorer l&rsquo;efficacit\u00e9 de votre code et simplifier de nombreuses t\u00e2ches de d\u00e9veloppement. Apprenons comment elles fonctionnent et comment les impl\u00e9menter \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Fonctions avec Valeur de Retour 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\/658879279?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 fonction avec valeur de retour en JavaScript est une fonction qui renvoie une valeur lorsque vous l&rsquo;appelez. Elle est utile pour effectuer des calculs ou manipulations de donn\u00e9es et renvoyer le r\u00e9sultat \u00e0 l&rsquo;appelant. Comprendre cette fonctionnalit\u00e9 vous aidera \u00e0 structurer votre code de mani\u00e8re plus modulaire et r\u00e9utilisable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir une Fonction avec Valeur de Retour<\/h3>\n\n\n\n<p>Pour d\u00e9finir une fonction en JavaScript, vous utilisez le mot cl\u00e9 <code>function<\/code>, suivi du nom de la fonction et de parenth\u00e8ses contenant les param\u00e8tres. Pour sp\u00e9cifier qu&rsquo;une fonction doit renvoyer une valeur, vous utilisez le mot cl\u00e9 <code>return<\/code>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function sum(a, b) {\n    return a + b;\n}\n\nlet result = sum(5, 3); \/\/ result est maintenant 8\nconsole.log(result);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Valeurs de Retour dans les Expressions<\/h3>\n\n\n\n<p>Les valeurs de retour d&rsquo;une fonction peuvent \u00eatre utilis\u00e9es directement dans des expressions ou affect\u00e9es \u00e0 des variables. Voici un exemple o\u00f9 la valeur de retour est utilis\u00e9e pour une op\u00e9ration arithm\u00e9tique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function multiply(x, y) {\n    return x * y;\n}\n\nlet product = multiply(4, 6); \/\/ product est maintenant 24\nlet formattedResult = \"Le r\u00e9sultat de 4 x 6 est \" + product;\nconsole.log(formattedResult);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Retourner des Objets depuis une Fonction<\/h3>\n\n\n\n<p>En plus des types de base comme les nombres et les cha\u00eenes de caract\u00e8res, une fonction JavaScript peut aussi retourner des objets. Cela permet de renvoyer plusieurs valeurs group\u00e9es ensemble et d&rsquo;am\u00e9liorer la lisibilit\u00e9 et la maintenance du code. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createUser(name, age) {\n    return {\n        name: name,\n        age: age\n    };\n}\n\nlet user = createUser(\"Alice\", 25);\nconsole.log(user.name); \/\/ Affiche \"Alice\"\nconsole.log(user.age);  \/\/ Affiche 25\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Donn\u00e9es de Retour<\/h3>\n\n\n\n<p>Il est possible de manipuler les donn\u00e9es retourn\u00e9es par une fonction avant leur utilisation dans votre code. Cela est particuli\u00e8rement utile lorsque vous travaillez avec des structures de donn\u00e9es complexes ou des op\u00e9rations en cha\u00eene. Consid\u00e9rons l&rsquo;exemple suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function getFullName(firstName, lastName) {\n    return firstName + \" \" + lastName;\n}\n\nlet fullName = getFullName(\"John\", \"Doe\").toUpperCase();\nconsole.log(fullName); \/\/ Affiche \"JOHN DOE\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fonctions de Retour dans la Programmation Asynchrone<\/h3>\n\n\n\n<p>Les fonctions avec valeur de retour peuvent aussi \u00eatre employ\u00e9es dans des contextes asynchrones, comme les appels API ou les fonctions de rappel (callbacks). Cela permet de g\u00e9rer plus efficacement les op\u00e9rations en temps r\u00e9el ou les flux de donn\u00e9es distribu\u00e9s. Voici un exemple utilisant <code>async<\/code> et <code>await<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>async function fetchData(url) {\n    let response = await fetch(url);\n    return response.json();\n}\n\nfetchData('https:\/\/api.example.com\/data')\n    .then(data => {\n        console.log(data);\n    })\n    .catch(error => {\n        console.error('Erreur:', error);\n    });\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Fonctions avec Retour en JavaScript<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des fonctions avec valeur de retour en JavaScript, voici quelques exemples avanc\u00e9s d\u00e9montrant leur utilisation dans divers contextes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Composition de Fonctions<\/h4>\n\n\n\n<p>La composition de fonctions consiste \u00e0 combiner deux fonctions ou plus pour en cr\u00e9er une nouvelle. Cela est souvent utilis\u00e9 pour le traitement de flux de donn\u00e9es (data pipelines) :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function add(x, y) {\n    return x + y;\n}\n\nfunction square(num) {\n    return num * num;\n}\n\nlet result = square(add(2, 3));\nconsole.log(result); \/\/ Affiche 25\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Retourner des Fonctions<\/h4>\n\n\n\n<p>En JavaScript, une fonction peut aussi retourner une autre fonction. C&rsquo;est une technique couramment utilis\u00e9e dans les fermetures (closures) et la programmation fonctionnelle :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createMultiplier(multiplier) {\n    return function(num) {\n        return num * multiplier;\n    };\n}\n\nconst double = createMultiplier(2);\nconsole.log(double(5)); \/\/ Affiche 10\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h4>\n\n\n\n<p>Consid\u00e9rons un projet plus complet o\u00f9 les fonctions avec retour sont utilis\u00e9es pour organiser le code de mani\u00e8re modulaire et r\u00e9utilisable, comme dans une application de gestion de liste de t\u00e2ches :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let tasks = [\n    { id: 1, name: \"Task 1\", completed: false },\n    { id: 2, name: \"Task 2\", completed: true }\n];\n\nfunction getTaskById(id) {\n    return tasks.find(task => task.id === id);\n}\n\nfunction toggleTaskCompletion(id) {\n    let task = getTaskById(id);\n    if (task) {\n        task.completed = !task.completed;\n    }\n    return task;\n}\n\nlet updatedTask = toggleTaskCompletion(1);\nconsole.log(updatedTask); \/\/ Affiche la t\u00e2che avec son nouvel \u00e9tat\n<\/code><\/pre>\n\n  \n\n<p>En explorant davantage les fonctions avec valeur de retour en JavaScript, vous pouvez \u00e9galement consulter des ressources externes pour approfondir votre compr\u00e9hension. Par exemple, le site <a href=\"https:\/\/developer.mozilla.org\/\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> propose des articles d\u00e9taill\u00e9s sur les fonctions en JavaScript. Le <a href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"noopener\">site officiel JavaScript<\/a> offre une couverture exhaustive des langages et m\u00e9thodes disponibles en JavaScript. Vous pouvez \u00e9galement suivre des cours en ligne comme ceux de <a href=\"https:\/\/www.coursera.org\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour un apprentissage structur\u00e9.<\/p>\n\n \n<p>Pour ceux qui souhaitent comprendre plus en d\u00e9tail comment d\u00e9clarer des variables en JavaScript, vous pouvez lire notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\">d\u00e9claration des variables<\/a>. Apprenez \u00e9galement \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\">afficher une information en JavaScript<\/a> ainsi qu&rsquo;\u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-les-fonctions-existantes-en-javascript\">utiliser les fonctions existantes<\/a>. D\u00e9couvrez aussi des conseils pratiques sur les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">extensions pour JavaScript<\/a>. Pour une compr\u00e9hension approfondie des \u00e9v\u00e9nements en JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\">guide sur la gestion des exceptions<\/a>.<\/p>\n\n\n<p>Les <strong>fonctions avec valeur de retour en JavaScript<\/strong> sont un m\u00e9canisme puissant pour encapsuler des logiques complexes, am\u00e9liorer la modularit\u00e9 de votre code et faciliter sa r\u00e9utilisation. En utilisant ces fonctions de mani\u00e8re efficace, vous pouvez cr\u00e9er des applications plus robustes et maintenables. Continuez \u00e0 explorer JavaScript pour ma\u00eetriser davantage les fonctions et autres fonctionnalit\u00e9s avanc\u00e9es. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour apprendre \u00e0 g\u00e9rer les \u00e9v\u00e9nements en JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-evenements-en-javascript-tutoriel\">tutoriel d\u00e9taill\u00e9<\/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-obtenir-formation-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Obtenir Formation 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Les Fonctions avec Valeur de Retour en JavaScript jouent un r\u00f4le fondamental dans la manipulation et le traitement des donn\u00e9es dans ce langage de programmation&#8230;.<\/p>\n","protected":false},"author":3,"featured_media":2882,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5554","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\/5554","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=5554"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5554\/revisions"}],"predecessor-version":[{"id":5555,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5554\/revisions\/5555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2882"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}