{"id":5556,"date":"2024-08-28T22:16:25","date_gmt":"2024-08-28T22:16:25","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/parametres-par-defaut-en-javascript-guide\/"},"modified":"2024-08-28T22:16:28","modified_gmt":"2024-08-28T22:16:28","slug":"parametres-par-defaut-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/parametres-par-defaut-en-javascript-guide\/","title":{"rendered":"4.7 Param\u00e8tres par D\u00e9faut en JavaScript : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Param\u00e8tres D\u00e9faut JavaScript<\/strong> sont une fonctionnalit\u00e9 essentielle pour simplifier le d\u00e9veloppement et garantir que vos fonctions sont robustes m\u00eame lorsque des arguments sont omis. Comprendre comment utiliser les <strong>param\u00e8tres par d\u00e9faut en JavaScript<\/strong> peut am\u00e9liorer la lecture et la maintenance de votre code. Explorons cette fonctionnalit\u00e9 avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Param\u00e8tres par D\u00e9faut 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\/658879325?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 param\u00e8tres par d\u00e9faut permettent de d\u00e9finir des valeurs pour les arguments d&rsquo;une fonction lorsque ces arguments ne sont pas fournis. Cela est tr\u00e8s pratique pour \u00e9viter les erreurs et pour rendre votre code plus flexible et plus propre.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Param\u00e8tres par D\u00e9faut<\/h3>\n\n\n\n<p>Pour d\u00e9finir des param\u00e8tres par d\u00e9faut, vous pouvez simplement assigner une valeur \u00e0 l&rsquo;argument dans la d\u00e9finition de la fonction. Voici un exemple basique pour illustrer cela :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function greet(name = 'Invit\u00e9') {\n    console.log(`Bonjour, ${name}!`);\n}\n\ngreet(); \/\/ Bonjour, Invit\u00e9!\ngreet('Alice'); \/\/ Bonjour, Alice!\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Param\u00e8tres Par D\u00e9faut avec Plusieurs Arguments<\/h3>\n\n\n\n<p>Les param\u00e8tres par d\u00e9faut deviennent encore plus utiles lorsque vous travaillez avec des fonctions qui acceptent plusieurs arguments. Vous pouvez d\u00e9finir des valeurs par d\u00e9faut pour certains ou tous les arguments. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createUser(name = 'John Doe', age = 30, isActive = true) {\n    return {\n        name,\n        age,\n        isActive\n    };\n}\n\nconsole.log(createUser()); \/\/ { name: 'John Doe', age: 30, isActive: true }\nconsole.log(createUser('Alice', 25)); \/\/ { name: 'Alice', age: 25, isActive: true }\nconsole.log(createUser('Bob', 40, false)); \/\/ { name: 'Bob', age: 40, isActive: false }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Param\u00e8tres Par D\u00e9faut avec Expressions<\/h3>\n\n\n\n<p>Les valeurs par d\u00e9faut des param\u00e8tres peuvent \u00e9galement \u00eatre des expressions, ce qui permet de d\u00e9finir des valeurs plus complexes si n\u00e9cessaire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function calculatePrice(price, tax = price * 0.20) {\n    return price + tax;\n}\n\nconsole.log(calculatePrice(100)); \/\/ 120\nconsole.log(calculatePrice(100, 15)); \/\/ 115\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Param\u00e8tres Manquants avec <code>undefined<\/code><\/h3>\n\n\n\n<p>En JavaScript, les param\u00e8tres avec valeur par d\u00e9faut ne sont utilis\u00e9s que si les arguments correspondants sont <code>undefined<\/code>. D&rsquo;autres valeurs falsy comme <code>null<\/code>, <code>0<\/code>, ou <code>''<\/code> ne d\u00e9clenchent pas l&rsquo;utilisation des valeurs par d\u00e9faut :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function printMessage(message = 'Message par d\u00e9faut') {\n    console.log(message);\n}\n\nprintMessage(undefined); \/\/ Message par d\u00e9faut\nprintMessage(null); \/\/ null\nprintMessage(''); \/\/ \nprintMessage(0); \/\/ 0\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages de l&rsquo;Utilisation des Param\u00e8tres Par D\u00e9faut<\/h3>\n\n\n\n<p>Utiliser des param\u00e8tres par d\u00e9faut pr\u00e9sente plusieurs avantages significatifs :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Code plus propre :<\/strong> Vous n&rsquo;avez pas besoin d&rsquo;ajouter de v\u00e9rifications \u00e0 l&rsquo;int\u00e9rieur de la fonction pour g\u00e9rer les valeurs manquantes.<\/li>\n<li><strong>Robustesse :<\/strong> Les fonctions sont moins susceptibles de planter en raison de valeurs manquantes.<\/li>\n<li><strong>Facilit\u00e9 de lecture :<\/strong> Le comportement par d\u00e9faut de la fonction est clairement sp\u00e9cifi\u00e9 \u00e0 un endroit.<\/li>\n<li><strong>Flexibilit\u00e9 :<\/strong> Permet de facilement sp\u00e9cifier ou ignorer des arguments lors de l&rsquo;appel de la fonction.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Param\u00e8tres Par D\u00e9faut dans des Situations R\u00e9elles<\/h3>\n\n\n\n<p>Voyons quelques exemples concrets pour mettre ce que nous avons appris en pratique. Imaginons une fonction qui g\u00e9n\u00e8re une URL avec des param\u00e8tres optionnels :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createURL(baseURL, endpoint = '', queryParams = {}) {\n    let queryString = Object.entries(queryParams)\n        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)\n        .join('&');\n    \n    return `${baseURL}\/${endpoint}?${queryString}`;\n}\n\nconsole.log(createURL('https:\/\/api.example.com', 'users', { search: 'John Doe', page: 2 }));\n\/\/ https:\/\/api.example.com\/users?search=John%20Doe&page=2\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combinaison de Param\u00e8tres Par D\u00e9faut avec le Rest Operator<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement combiner les param\u00e8tres par d\u00e9faut avec le rest operator pour g\u00e9rer un nombre variable d&rsquo;arguments. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function addValues(a = 0, b = 0, ...additionalValues) {\n    let sum = a + b;\n    if (additionalValues.length > 0) {\n        sum += additionalValues.reduce((acc, curr) => acc + curr, 0);\n    }\n    return sum;\n}\n\nconsole.log(addValues(1, 2)); \/\/ 3\nconsole.log(addValues(1)); \/\/ 1\nconsole.log(addValues()); \/\/ 0\nconsole.log(addValues(1, 2, 3, 4, 5)); \/\/ 15\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>param\u00e8tres par d\u00e9faut en JavaScript<\/strong> simplifient le traitement des fonctions en permettant de d\u00e9finir des valeurs par d\u00e9faut pour les arguments manquants. Cette fonctionnalit\u00e9 am\u00e9liore la lisibilit\u00e9 et la robustesse de votre code. En continuant \u00e0 explorer JavaScript, vous d\u00e9couvrirez que cette technique, combin\u00e9e \u00e0 d&rsquo;autres fonctionnalit\u00e9s modernes, peut grandement am\u00e9liorer vos projets.<\/p>\n\n\n\n<p>Pour en savoir plus sur les fonctions, consultez notre guide complet <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>. Si vous souhaitez approfondir comment <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\" target=\"_blank\" rel=\"noopener\">ajouter des param\u00e8tres \u00e0 une fonction JavaScript<\/a>, nous avons \u00e9galement un article d\u00e9taill\u00e9 pour vous. Pour d\u00e9couvrir d&rsquo;autres fonctionnalit\u00e9s importantes telles que la <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-avec-valeur-de-retour-en-javascript\" target=\"_blank\" rel=\"noopener\">gestion des valeurs de retour dans les fonctions<\/a>, n&rsquo;h\u00e9sitez pas \u00e0 suivre le lien. Vous pouvez \u00e9galement consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\" target=\"_blank\" rel=\"noopener\">guide sur l&rsquo;utilisation des fonctions existantes<\/a> pour enrichir vos connaissances.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/144\" 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\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Param\u00e8tres D\u00e9faut JavaScript sont une fonctionnalit\u00e9 essentielle pour simplifier le d\u00e9veloppement et garantir que vos fonctions sont robustes m\u00eame lorsque des arguments sont omis&#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-5556","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\/5556","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=5556"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5556\/revisions"}],"predecessor-version":[{"id":5557,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5556\/revisions\/5557"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}