{"id":5660,"date":"2024-08-29T01:44:09","date_gmt":"2024-08-29T01:44:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-weakmap-en-javascript-guide-complet\/"},"modified":"2024-08-29T01:44:11","modified_gmt":"2024-08-29T01:44:11","slug":"objet-weakmap-en-javascript-guide-complet","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-weakmap-en-javascript-guide-complet\/","title":{"rendered":"10.8 L&rsquo;Objet WeakMap en JavaScript : Guide Complet"},"content":{"rendered":"\n<p><strong>Objet WeakMap en JavaScript<\/strong> joue un r\u00f4le crucial dans la gestion de la m\u00e9moire par les applications web. Comprendre comment utiliser les <strong>WeakMap<\/strong> peut consid\u00e9rablement am\u00e9liorer la performance et la s\u00e9curit\u00e9 de vos applications. Apprenons comment ils fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;<strong>Objet WeakMap<\/strong> en JavaScript<\/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\/658888416?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\/javascript-les-fondamentaux\/142')\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>En JavaScript, une <code>WeakMap<\/code> est une collection d&rsquo;objets cl\u00e9-valeur similaire \u00e0 une <code>Map<\/code>, mais avec des diff\u00e9rences essentielles qui impactent le comportement et les performances de votre code. Les <a href=\"https:\/\/wikiform.fr\/codespace\/objet-weakmap-en-javascript-guide-complet\">WeakMap<\/a> sont utiles pour l&rsquo;optimisation de la m\u00e9moire car ils ne pr\u00e9voient pas les cl\u00e9s pour la collecte de d\u00e9chets si elles ne sont plus r\u00e9f\u00e9renc\u00e9es ailleurs dans le programme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une <strong>WeakMap<\/strong> en JavaScript<\/h3>\n\n\n\n<p>Pour cr\u00e9er une <code>WeakMap<\/code>, vous utilisez simplement le constructeur <code>WeakMap<\/code>. Voici un exemple de cr\u00e9ation de <code>WeakMap<\/code> et d&rsquo;ajout de paires cl\u00e9-valeur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const weakmap = new WeakMap();\n\n\/\/ Cr\u00e9er des objets cl\u00e9s\nconst obj1 = {name: \"object1\"};\nconst obj2 = {name: \"object2\"};\n\n\/\/ Ajouter des paires cl\u00e9-valeur \u00e0 la WeakMap\nweakmap.set(obj1, \"value associated with object1\");\nweakmap.set(obj2, \"value associated with object2\");\n\nconsole.log(weakmap.get(obj1)); \/\/ \"value associated with object1\"\nconsole.log(weakmap.get(obj2)); \/\/ \"value associated with object2\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages des <strong>WeakMap<\/strong> Par Rapport aux <strong>Map<\/strong><\/h3>\n\n\n\n<p>Contrairement aux objets <a href=\"https:\/\/wikiform.fr\/codespace\/objet-map-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">Map<\/a>, les <code>WeakMap<\/code> ne retiennent pas les r\u00e9f\u00e9rences fortes sur les cl\u00e9s. Cela signifie que si une cl\u00e9 n&rsquo;a plus de r\u00e9f\u00e9rence autre que celle dans la <code>WeakMap<\/code>, elle est \u00e9ligible pour le ramasse-miettes (garbage collection), contribuant ainsi \u00e0 l&rsquo;optimisation de la m\u00e9moire. Voici un exemple illustrant cette diff\u00e9rence importante :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let map = new Map();\nlet weakmap = new WeakMap();\n\n(function() {\n  let a = {key: \"value\"};\n  let b = {key: \"value\"};\n\n  map.set(a, \"object stored as key in map\");\n  weakmap.set(b, \"object stored as key in weakmap\");\n\n  \/\/ 'a' et 'b' vont sortir de port\u00e9e apr\u00e8s ce bloc\n})();\n\n\/\/ 'a' est toujours dans la map car elle garde une r\u00e9f\u00e9rence forte\nconsole.log([...map.keys()]); \/\/ [{key: \"value\"}]\n\n\/\/ 'b' n'est plus r\u00e9f\u00e9renc\u00e9 ailleurs, donc il est \u00e9ligible pour la collecte de d\u00e9chets\nconsole.log([...weakmap.keys()]); \/\/ Error: weakmap is not iterable\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Pratiques des <strong>WeakMap<\/strong><\/h3>\n\n\n\n<p>Les <strong>WeakMap<\/strong> s&rsquo;av\u00e8rent particuli\u00e8rement utiles dans plusieurs cas d&rsquo;utilisation pratiques. Prenons quelques exemples pour voir comment ils peuvent \u00eatre exploit\u00e9s dans le cadre d&rsquo;un projet tangible.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des Donn\u00e9es Priv\u00e9es dans les Objets<\/h4>\n\n\n\n<p>Les <code>WeakMap<\/code> permettent de stocker des donn\u00e9es priv\u00e9es associ\u00e9es \u00e0 des objets sans exposer ces donn\u00e9es publiquement, ce qui peut s&rsquo;av\u00e9rer utile pour des informations sensibles ou priv\u00e9es \u00e0 l&rsquo;objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const privateData = new WeakMap();\n\nclass MyClass {\n  constructor(data) {\n    privateData.set(this, data);\n  }\n\n  getPrivateData() {\n    return privateData.get(this);\n  }\n}\n\nconst instance = new MyClass({sensitive: \"information\"});\nconsole.log(instance.getPrivateData()); \/\/ {sensitive: \"information\"}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des \u00c9l\u00e9ments du DOM<\/h4>\n\n\n\n<p>En associant des donn\u00e9es aux \u00e9l\u00e9ments du DOM avec <code>WeakMap<\/code>, vous pouvez vous assurer que les r\u00e9f\u00e9rences sont correctement nettoy\u00e9es lorsque les \u00e9l\u00e9ments ne sont plus dans le document, ce qui est particuli\u00e8rement important pour \u00e9viter les fuites de m\u00e9moire:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const domData = new WeakMap();\n\nfunction associateDataToElement(element, data) {\n  domData.set(element, data);\n}\n\nfunction getDataFromElement(element) {\n  return domData.get(element);\n}\n\nlet element = document.createElement('div');\nassociateDataToElement(element, {info: \"DOM element data\"});\n\nconsole.log(getDataFromElement(element)); \/\/ {info: \"DOM element data\"}\n\n\/\/ \u00c9lement supprim\u00e9 du DOM et \u00e9ligible \u00e0 JSR\nelement = null;\n\n\/\/ Les donn\u00e9es associ\u00e9es via WeakMap sont \u00e9galement \u00e9ligibles \u00e0 la collecte de d\u00e9chet\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9bogage et Surveillance des Objets<\/h4>\n\n\n\n<p>Les <code>WeakMap<\/code> peuvent \u00e9galement \u00eatre utilis\u00e9es pour surveiller l&rsquo;\u00e9tat des objets pour des t\u00e2ches de d\u00e9bogage sans entraver la performance de la m\u00e9moire. Pour aller plus loin, explorez notre <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\">guide complet sur l&rsquo;utilisation du d\u00e9bogueur en JavaScript<\/a>.<\/p>\n\n\n\n<p>Un exemple d&rsquo;utilisation dans le d\u00e9bogage pourrait \u00eatre de suivre l&rsquo;\u00e9tat des objets cr\u00e9\u00e9s dynamiquement pendant l&rsquo;ex\u00e9cution des scripts. Par exemple, vous pourriez stocker des journaux d&rsquo;\u00e9v\u00e9nements ou d&rsquo;autres informations de suivi dans une <code>WeakMap<\/code> et ne pas vous soucier des impacts \u00e0 long terme sur la m\u00e9moire.<\/p>\n\n\n\n<p>Les <strong>WeakMap en JavaScript<\/strong> se distinguent \u00e9galement par leur capacit\u00e9 \u00e0 simplifier la gestion de la m\u00e9moire. Lorsqu&rsquo;une cl\u00e9 r\u00e9f\u00e9renc\u00e9e dans une <code>WeakMap<\/code> n&rsquo;est plus utilis\u00e9e ailleurs dans le code, elle devient \u00e9ligible \u00e0 la <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/WeakMap\" target=\"_blank\" rel=\"noopener noreferrer\">garbage collection<\/a>. Cela garantit un nettoyage automatique et efficace des m\u00e9moires non utilis\u00e9es, pr\u00e9venant ainsi les fuites de m\u00e9moire.<\/p>\n\n\n\n<p>En r\u00e9sum\u00e9, comprendre la <code>WeakMap<\/code> et savoir l&rsquo;utiliser correctement peut vous aider \u00e0 cr\u00e9er des applications JavaScript plus performantes et efficientes en termes de m\u00e9moire. Que vous cherchiez \u00e0 g\u00e9rer des informations sensibles, synchroniser des donn\u00e9es entre DOM ou am\u00e9liorer la performance globale, les <code>WeakMap<\/code> offrent une solution puissante et sophistiqu\u00e9e. Pour mieux ma\u00eetriser ces concepts, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\" target=\"_blank\" rel=\"noopener\">g\u00e9rer les exceptions en JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les <strong>Objet WeakMap JavaScript<\/strong><\/h2>\n\n\n\n<p>Les <strong>WeakMap en JavaScript<\/strong> offrent une mani\u00e8re avanc\u00e9e et efficace de g\u00e9rer les relations cl\u00e9-valeur en tenant compte de l&rsquo;optimisation m\u00e9moire. En garantissant que les cl\u00e9s non r\u00e9f\u00e9renc\u00e9es sont \u00e9ligibles \u00e0 la garbage collection, les <code>WeakMap<\/code> aident \u00e0 pr\u00e9venir les fuites de m\u00e9moire dans les applications complexes. Continuez \u00e0 explorer cette fonctionnalit\u00e9 et d&rsquo;autres pour ma\u00eetriser JavaScript et optimiser vos projets. Pour en savoir plus, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-avanc\u00e9\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2023\/10\/learnify-Javascript-advanced.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Avanc\u00e9\" title=\"\"><\/a>\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-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript\" title=\"\"><\/a>\n\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});","protected":false},"excerpt":{"rendered":"<p>Objet WeakMap en JavaScript joue un r\u00f4le crucial dans la gestion de la m\u00e9moire par les applications web. Comprendre comment utiliser les WeakMap peut consid\u00e9rablement&#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-5660","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\/5660","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=5660"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5660\/revisions"}],"predecessor-version":[{"id":5661,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5660\/revisions\/5661"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}