{"id":5650,"date":"2024-08-29T01:24:25","date_gmt":"2024-08-29T01:24:25","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/decomposition-objet-en-javascript-destructuring\/"},"modified":"2024-08-29T01:24:28","modified_gmt":"2024-08-29T01:24:28","slug":"decomposition-objet-en-javascript-destructuring","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/decomposition-objet-en-javascript-destructuring\/","title":{"rendered":"10.3 D\u00e9composition d&rsquo;Objet en JavaScript (Destructuring)"},"content":{"rendered":"\n<p><strong>La D\u00e9composition Objet JavaScript (Destructuring)<\/strong> est une fonctionnalit\u00e9 puissante et pratique pour extraire des donn\u00e9es d&rsquo;objets et de tableaux de mani\u00e8re concise et lisible. Apprendre \u00e0 utiliser correctement la <strong>D\u00e9composition Objet JavaScript<\/strong> peut consid\u00e9rablement am\u00e9liorer la clart\u00e9 et l&rsquo;efficacit\u00e9 de votre code. \u00c0 travers ce tutoriel, d\u00e9couvrons comment elle fonctionne avec des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>D\u00e9composition Objet 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\/658887885?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>La d\u00e9composition permet de d\u00e9structurer des objets et des tableaux pour extraire leurs valeurs dans des variables distinctes. Elle simplifie la manipulation de donn\u00e9es complexes en supprimant la n\u00e9cessit\u00e9 d&rsquo;acc\u00e9der directement \u00e0 chaque \u00e9l\u00e9ment individuellement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9structurer des Objets en JavaScript<\/h3>\n\n\n\n<p>Pour d\u00e9structurer des objets, on utilise des accolades <code>{ }<\/code>. Voici un exemple basique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const personne = {\n    nom: \"Dupont\",\n    age: 30,\n    profession: \"D\u00e9veloppeur\"\n};\n\nconst { nom, age, profession } = personne;\n\nconsole.log(nom); \/\/ \"Dupont\"\nconsole.log(age); \/\/ 30\nconsole.log(profession); \/\/ \"D\u00e9veloppeur\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9structurer des Tableaux en JavaScript<\/h3>\n\n\n\n<p>Pour d\u00e9structurer des tableaux, on utilise des crochets <code>[ ]<\/code>. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const couleurs = [\"rouge\", \"bleu\", \"vert\"];\n\nconst [premi\u00e8reCouleur, deuxi\u00e8meCouleur, troisi\u00e8meCouleur] = couleurs;\n\nconsole.log(premi\u00e8reCouleur); \/\/ \"rouge\"\nconsole.log(deuxi\u00e8meCouleur); \/\/ \"bleu\"\nconsole.log(troisi\u00e8meCouleur); \/\/ \"vert\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9structuration avec Renommage de Variables<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement renommer les variables lors de la d\u00e9structuration. Cela peut \u00eatre utile pour \u00e9viter les conflits de noms ou pour am\u00e9liorer la clart\u00e9 du code :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const personne = {\n    nom: \"Dupont\",\n    age: 30,\n    profession: \"D\u00e9veloppeur\"\n};\n\nconst { nom: nomDeFamille, age: \u00e2ge, profession: m\u00e9tier } = personne;\n\nconsole.log(nomDeFamille); \/\/ \"Dupont\"\nconsole.log(\u00e2ge); \/\/ 30\nconsole.log(m\u00e9tier); \/\/ \"D\u00e9veloppeur\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9structuration Imbriqu\u00e9e d&rsquo;Objets<\/h3>\n\n\n\n<p>La d\u00e9structuration peut \u00eatre appliqu\u00e9e aux objets imbriqu\u00e9s. Cela permet d&rsquo;extraire des valeurs de mani\u00e8re plus concise et lisible :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const entreprise = {\n    nom: \"TechCorp\",\n    adresse: {\n        ville: \"Paris\",\n        codePostal: 75001\n    },\n    employ\u00e9s: [\"Alice\", \"Bob\", \"Charlie\"]\n};\n\nconst {\n    nom,\n    adresse: { ville, codePostal },\n    employ\u00e9s: [ employ\u00e91, employ\u00e92, employ\u00e93 ]\n} = entreprise;\n\nconsole.log(nom); \/\/ \"TechCorp\"\nconsole.log(ville); \/\/ \"Paris\"\nconsole.log(codePostal); \/\/ 75001\nconsole.log(employ\u00e91); \/\/ \"Alice\"\nconsole.log(employ\u00e92); \/\/ \"Bob\"\nconsole.log(employ\u00e93); \/\/ \"Charlie\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9structuration avec Valeurs par D\u00e9faut<\/h3>\n\n\n\n<p>Il est possible de fournir des valeurs par d\u00e9faut lors de la d\u00e9structuration, qui seront utilis\u00e9es si la propri\u00e9t\u00e9 ou l&rsquo;\u00e9l\u00e9ment n&rsquo;existe pas dans l&rsquo;objet ou le tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const personne = {\n    nom: \"Dupont\",\n    age: 30\n};\n\nconst { nom, age, profession = \"Inconnu\" } = personne;\n\nconsole.log(nom); \/\/ \"Dupont\"\nconsole.log(age); \/\/ 30\nconsole.log(profession); \/\/ \"Inconnu\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9structuration dans des Fonctions<\/h3>\n\n\n\n<p>La d\u00e9structuration peut \u00e9galement \u00eatre utilis\u00e9e pour simplifier le passage de param\u00e8tres dans les fonctions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function afficherInfos({ nom, age, profession = \"Inconnu\" }) {\n    console.log(`Nom: ${nom}, \u00c2ge: ${age}, Profession: ${profession}`);\n}\n\nconst personne = {\n    nom: \"Dupont\",\n    age: 30,\n    profession: \"D\u00e9veloppeur\"\n};\n\nafficherInfos(personne);\n\/\/ Output: Nom: Dupont, \u00c2ge: 30, Profession: D\u00e9veloppeur\n<\/code><\/pre>\n\n\n\n<p>La d\u00e9structuration de tableaux peut \u00e9galement \u00eatre tr\u00e8s utile dans diff\u00e9rentes situations. Par exemple, pour \u00e9changer les valeurs de deux variables :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let a = 1;\nlet b = 2;\n\n[a, b] = [b, a];\n\nconsole.log(a); \/\/ 2\nconsole.log(b); \/\/ 1\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de D\u00e9structuration en JavaScript<\/h3>\n\n\n\n<p>Explorons maintenant quelques exemples avanc\u00e9s pour approfondir notre compr\u00e9hension de la d\u00e9structuration en JavaScript.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Extraire des Propri\u00e9t\u00e9s S\u00e9lectionn\u00e9es d&rsquo;un Objet<\/h4>\n\n\n\n<p>Il peut \u00eatre utile d&rsquo;extraire seulement certaines propri\u00e9t\u00e9s d&rsquo;un objet pendant la d\u00e9structuration :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const utilisateur = {\n    id: 42,\n    nom: \"Alice\",\n    email: \"alice@example.com\",\n    adresse: \"123 Rue Principale\"\n};\n\nconst { id, email } = utilisateur;\n\nconsole.log(id); \/\/ 42\nconsole.log(email); \/\/ \"alice@example.com\"\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9structuration Imbriqu\u00e9e avec Alias<\/h4>\n\n\n\n<p>Combinez la d\u00e9structuration imbriqu\u00e9e avec des alias pour une extraction s\u00e9lective et renomm\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const config = {\n    server: {\n        hostname: \"localhost\",\n        port: 8080\n    },\n    database: {\n        user: \"dbuser\",\n        password: \"s3cr3t\"\n    }\n};\n\nconst {\n    server: { hostname: serveur, port: portServeur },\n    database: { user: utilisateurDB, password: motDePasseDB }\n} = config;\n\nconsole.log(serveur); \/\/ \"localhost\"\nconsole.log(portServeur); \/\/ 8080\nconsole.log(utilisateurDB); \/\/ \"dbuser\"\nconsole.log(motDePasseDB); \/\/ \"s3cr3t\"\n<\/code><\/pre>\n\n\n\n<p>Pour en apprendre davantage sur les bases de JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/apprendre-les-fondamentaux-de-javascript\">tutoriel d\u00e9taill\u00e9<\/a>, ou explorez comment <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\">d\u00e9clarer des variables en JavaScript<\/a>.<\/p>\n\n\n\n<p>De plus, si vous souhaitez approfondir votre compr\u00e9hension de JavaScript, vous pouvez lire cet article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">Qu&rsquo;est-ce que JavaScript<\/a> ou consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">guide complet sur les extensions pour JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La <strong>D\u00e9composition Objet JavaScript<\/strong> am\u00e9liore grandement la lisibilit\u00e9 et la maintenance du code. Que ce soit pour extraire des valeurs d&rsquo;objets simples ou pour manipuler des donn\u00e9es complexes dans des structures imbriqu\u00e9es, cette technique est essentielle pour tout d\u00e9veloppeur cherchant \u00e0 \u00e9crire un code plus propre et plus efficace. Continuez \u00e0 explorer et \u00e0 pratiquer pour ma\u00eetriser compl\u00e8tement cette fonctionnalit\u00e9 avanc\u00e9e de JavaScript. Pour des tutoriels suppl\u00e9mentaires, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-pro\/151\">les techniques avanc\u00e9es en JavaScript<\/a>. Pour apprendre \u00e0 utiliser d&rsquo;autres concepts de JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/apprendre-les-fondamentaux-de-javascript\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/145\" 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>La D\u00e9composition Objet JavaScript (Destructuring) est une fonctionnalit\u00e9 puissante et pratique pour extraire des donn\u00e9es d&rsquo;objets et de tableaux de mani\u00e8re concise et lisible. Apprendre&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2871,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5650","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\/5650","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=5650"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5650\/revisions"}],"predecessor-version":[{"id":5651,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5650\/revisions\/5651"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2871"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}