{"id":5552,"date":"2024-08-28T22:08:18","date_gmt":"2024-08-28T22:08:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/variables-globales-et-locales-en-javascript\/"},"modified":"2024-08-28T22:08:21","modified_gmt":"2024-08-28T22:08:21","slug":"variables-globales-et-locales-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/variables-globales-et-locales-en-javascript\/","title":{"rendered":"4.5 Variables Globales et Locales en JavaScript"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les variables globales et locales en JavaScript<\/strong> jouent un r\u00f4le crucial dans la gestion des donn\u00e9es au sein de vos applications web. Comprendre comment et quand utiliser des variables globales ou locales est essentiel pour \u00e9crire du code propre, performant et facile \u00e0 maintenir. Apprenons \u00e0 utiliser efficacement ces concepts gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Variables Globales et Locales 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\/658879211?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>En JavaScript, la port\u00e9e (ou contexte d&rsquo;ex\u00e9cution) d&rsquo;une variable d\u00e9termine o\u00f9 celle-ci peut \u00eatre acc\u00e9d\u00e9e dans le code. Les variables globales sont accessibles partout dans le code, tandis que les variables locales sont limit\u00e9es \u00e0 la fonction ou au bloc dans lequel elles sont d\u00e9finies. Cette distinction est cruciale pour g\u00e9rer efficacement les donn\u00e9es et \u00e9viter des bugs difficiles \u00e0 d\u00e9boguer. La port\u00e9e des variables joue un r\u00f4le essentiel dans l&rsquo;\u00e9criture de code modulable et maintenable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Variables Globales en JavaScript<\/h3>\n\n\n\n<p>Les variables globales sont d\u00e9clar\u00e9es en dehors de toute fonction ou bloc de code. Cela les rend accessibles partout dans le script, et m\u00eame depuis des scripts diff\u00e9rents si ces derniers font partie de la m\u00eame page Web. Cependant, il est important de les utiliser judicieusement pour \u00e9viter des probl\u00e8mes de collision de noms et des comportements impr\u00e9visibles. Pour en savoir plus, lisez cet article sur la mani\u00e8re de <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\">d\u00e9clarer des variables en JavaScript avec let, const et var<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9claration d'une variable globale\nvar globalVar = \"Je suis une variable globale.\";\n\nfunction showGlobalVar() {\n  console.log(globalVar); \/\/ Affiche: Je suis une variable globale.\n}\n\nshowGlobalVar();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Variables Locales en JavaScript<\/h3>\n\n\n\n<p>Les variables locales sont d\u00e9clar\u00e9es au sein d&rsquo;une fonction ou d&rsquo;un bloc avec les mots-cl\u00e9s <code>let<\/code> ou <code>const<\/code>. Elles ne sont accessibles que dans la fonction ou le bloc o\u00f9 elles ont \u00e9t\u00e9 d\u00e9finies, ce qui aide \u00e0 pr\u00e9venir les conflits de variable et rend le code plus modulaire et facile \u00e0 comprendre. D\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\">placer votre code JavaScript de mani\u00e8re efficace<\/a> pour une meilleure organisation.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function showLocalVar() {\n  let localVar = \"Je suis une variable locale.\";\n  console.log(localVar); \/\/ Affiche: Je suis une variable locale.\n}\n\nshowLocalVar();\nconsole.log(localVar); \/\/ Erreur: localVar n'est pas d\u00e9fini.\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Port\u00e9es de Bloc et de Fonction<\/h3>\n\n\n\n<p>En ES6, JavaScript a introduit les mots-cl\u00e9s <code>let<\/code> et <code>const<\/code> permettant de d\u00e9clarer des variables ayant une port\u00e9e de bloc (d\u00e9limit\u00e9es par des accolades <code>{}<\/code>). Auparavant, seule la port\u00e9e de fonction existait avec le mot-cl\u00e9 <code>var<\/code>. Pour approfondir vos connaissances, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\">explication sur la port\u00e9e des variables en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function testScope() {\n  if (true) {\n    var functionScoped = \"Accessible partout dans la fonction.\";\n    let blockScoped = \"Accessible seulement dans ce bloc.\";\n    console.log(blockScoped); \/\/ Affiche: Accessible seulement dans ce bloc.\n  }\n  console.log(functionScoped); \/\/ Affiche: Accessible partout dans la fonction.\n  console.log(blockScoped); \/\/ Erreur: blockScoped n'est pas d\u00e9fini.\n}\n\ntestScope();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Bonnes Pratiques pour Utiliser les Variables Globales et Locales<\/h3>\n\n\n\n<p>Pour \u00e9crire du code JavaScript propre et efficace, il est recommand\u00e9 de minimiser l&rsquo;utilisation des variables globales et de privil\u00e9gier les variables locales autant que possible. Voici quelques bonnes pratiques :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Utiliser <code>let<\/code> ou <code>const<\/code><\/strong> pour d\u00e9clarer des variables locales et \u00e9viter les fuites de variables globales par inadvertance.<\/li>\n<li><strong>Nommer intelligemment les variables globales<\/strong> pour \u00e9viter les conflits de noms, en utilisant par exemple des pr\u00e9fixes ou des suffixes sp\u00e9cifiques \u00e0 votre projet.<\/li>\n<li><strong>Minimiser l&rsquo;utilisation des variables globales<\/strong>, et les regrouper dans un seul objet global si n\u00e9cessaire, afin de limiter l&rsquo;impact sur l&rsquo;espace global. Pour une gestion efficace, vous pouvez consulter notre guide complet sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">utilisation des extensions en JavaScript<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation d&rsquo;un Objet Global pour Regrouper les Variables Globales<\/h3>\n\n\n\n<p>Une pratique courante pour \u00e9viter les conflits de noms et g\u00e9rer plus facilement les variables globales est de les regrouper dans un unique objet global. Cette m\u00e9thode permet \u00e9galement de clarifier le code, en montrant que ces variables appartiennent \u00e0 un espace de noms sp\u00e9cifique.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Regroupement des variables globales dans un seul objet\nconst MyApp = {\n  globalString: \"Bonjour!\",\n  globalNumber: 42,\n  globalArray: [1, 2, 3, 4]\n};\n\nfunction displayGlobals() {\n  console.log(MyApp.globalString); \/\/ Affiche: Bonjour!\n  console.log(MyApp.globalNumber); \/\/ Affiche: 42\n  console.log(MyApp.globalArray); \/\/ Affiche: [1, 2, 3, 4]\n}\n\ndisplayGlobals();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences Entre <code>var<\/code>, <code>let<\/code>, et <code>const<\/code><\/h3>\n\n\n\n<p>Il est essentiel de bien comprendre les diff\u00e9rences entre <code>var<\/code>, <code>let<\/code>, et <code>const<\/code> pour une utilisation correcte des variables en JavaScript :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>var<\/code> : Port\u00e9e de fonction et peut \u00eatre red\u00e9clar\u00e9 dans le m\u00eame contexte.<\/li>\n<li><code>let<\/code> : Port\u00e9e de bloc et ne peut pas \u00eatre red\u00e9clar\u00e9 dans le m\u00eame bloc. Pour plus de d\u00e9tails, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\">explication sur ce qu&rsquo;est une variable en JavaScript<\/a>.<\/li>\n<li><code>const<\/code> : Port\u00e9e de bloc et ne peut pas \u00eatre r\u00e9assign\u00e9 apr\u00e8s sa d\u00e9claration (bien que les objets et tableaux puissent toujours \u00eatre modifi\u00e9s).<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function testVarLetConst() {\n  var x = 1;\n  let y = 2;\n  const z = 3;\n\n  if (true) {\n    var x = 100; \/\/ Red\u00e9clare et r\u00e9assigne x\n    let y = 200; \/\/ Nouvelle variable y dans le bloc\n    const z = 300; \/\/ Nouvelle variable z dans le bloc\n\n    console.log(x); \/\/ 100\n    console.log(y); \/\/ 200\n    console.log(z); \/\/ 300\n  }\n\n  console.log(x); \/\/ 100\n  console.log(y); \/\/ 2\n  console.log(z); \/\/ 3\n}\n\ntestVarLetConst();\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>variables globales et locales en JavaScript<\/strong> sont fondamentales pour l&rsquo;organisation et la gestion de donn\u00e9es dans vos applications. En adoptant les bonnes pratiques et en choisissant judicieusement entre <code>var<\/code>, <code>let<\/code>, et <code>const<\/code>, vous pouvez \u00e9crire du code plus propre, s\u00e9curis\u00e9 et performant. Continuez \u00e0 explorer ces concepts pour ma\u00eetriser pleinement la port\u00e9e des variables et am\u00e9liorer la qualit\u00e9 de votre code JavaScript. Pour plus de tutoriels et ressources sur JavaScript, pensez \u00e0 consulter notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" rel=\"noopener\" target=\"_blank\">les fondamentaux de JavaScript<\/a>. D\u00e9couvrez \u00e9galement comment g\u00e9rer les exceptions en lisant notre <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\">guide sur la gestion des exceptions en JavaScript<\/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-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 Les variables globales et locales en JavaScript jouent un r\u00f4le crucial dans la gestion des donn\u00e9es au sein de vos applications web. Comprendre comment&#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-5552","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\/5552","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=5552"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5552\/revisions"}],"predecessor-version":[{"id":5553,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5552\/revisions\/5553"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}