{"id":5550,"date":"2024-08-28T22:03:57","date_gmt":"2024-08-28T22:03:57","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\/"},"modified":"2024-12-17T20:06:09","modified_gmt":"2024-12-17T20:06:09","slug":"portee-des-variables-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\/","title":{"rendered":"4.4 Port\u00e9e des Variables en JavaScript : Explications"},"content":{"rendered":"\n\n\n<p><strong>Les Variables en JavaScript<\/strong> ont des comportements de port\u00e9e vari\u00e9s en fonction de leur d\u00e9claration et du contexte d&rsquo;ex\u00e9cution. Comprendre la port\u00e9e permet d&rsquo;\u00e9crire un code JavaScript plus robuste et maintenable. Explorons la port\u00e9e des variables en JavaScript \u00e0 travers des explications d\u00e9taill\u00e9es et des exemples de code pr\u00e9cis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Port\u00e9e des Variables 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\/658879141?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                    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 ? originalPrice.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    window.closePopup = function() {\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>En JavaScript, la port\u00e9e d&rsquo;une variable d\u00e9termine o\u00f9 elle peut \u00eatre acc\u00e9d\u00e9e et modifi\u00e9e. Elle peut \u00eatre globale, locale \u00e0 une fonction ou locale \u00e0 un bloc de code. Comprendre ces distinctions est essentiel pour \u00e9viter les erreurs et am\u00e9liorer la lisibilit\u00e9 du code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e Globale<\/h3>\n\n\n\n<p>Une variable d\u00e9clar\u00e9e en dehors de toute fonction ou bloc de code est dite avoir une port\u00e9e globale. Elle est accessible et modifiable n&rsquo;importe o\u00f9 dans le code. Pour en savoir plus sur la d\u00e9claration des variables, vous pouvez consulter notre article : <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">D\u00e9clarer des Variables en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Port\u00e9e globale\nvar globalVar = \"Je suis une variable globale\";\n\nfunction afficherGlobalVar() {\n    console.log(globalVar); \/\/ Acc\u00e8de \u00e0 la variable globale\n}\n\nafficherGlobalVar(); \/\/ Affichera : \"Je suis une variable globale\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e Locale (Fonction)<\/h3>\n\n\n\n<p>Une variable d\u00e9clar\u00e9e \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une fonction est locale \u00e0 cette fonction. Elle n&rsquo;est accessible qu&rsquo;\u00e0 l&rsquo;int\u00e9rieur de cette fonction et ne peut pas \u00eatre atteinte depuis l&rsquo;ext\u00e9rieur. Cela est essentiel pour comprendre <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">la port\u00e9e des variables en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function creerVariableLocale() {\n    var localVar = \"Je suis une variable locale\";\n    console.log(localVar); \/\/ Affichera : \"Je suis une variable locale\"\n}\n\ncreerVariableLocale();\nconsole.log(localVar); \/\/ Erreur : localVar n'est pas d\u00e9fini\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e de Bloc (let et const)<\/h3>\n\n\n\n<p>Les mots-cl\u00e9s <code>let<\/code> et <code>const<\/code> introduits dans ES6 permettent de d\u00e9clarer des variables ayant une port\u00e9e de bloc. Ces variables ne sont accessibles qu&rsquo;\u00e0 l&rsquo;int\u00e9rieur du bloc de code o\u00f9 elles sont d\u00e9finies. Pour plus d&rsquo;informations, consultez notre guide pratique sur les <a href=\"https:\/\/wikiform.fr\/codespace\/variables-globales-et-locales-en-javascript\" target=\"_blank\" rel=\"noopener\">variables globales et locales en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>if (true) {\n    let blockVar = \"Je suis une variable de bloc\";\n    console.log(blockVar); \/\/ Affichera : \"Je suis une variable de bloc\"\n}\n\nconsole.log(blockVar); \/\/ Erreur : blockVar n'est pas d\u00e9fini\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Hoisting (Red\u00e9claration Automatique)<\/h3>\n\n\n\n<p>En JavaScript, les d\u00e9clarations de variables sont \u00ab\u00a0hiss\u00e9es\u00a0\u00bb (hoisted) en haut de leur port\u00e9e. Toutefois, la valeur d&rsquo;initialisation reste \u00e0 sa place originale. Ceci est vrai pour les d\u00e9clarations avec <code>var<\/code>, mais pas pour <code>let<\/code> et <code>const<\/code>. Pour approfondir la compr\u00e9hension du hoisting, consultez notre explication sur <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/understanding-variable-scope-hoisting-and-closures-in-javascript\" target=\"_blank\" rel=\"noopener\">variable scope and hoisting on DigitalOcean<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log(hoistedVar); \/\/ Affichera : undefined\nvar hoistedVar = \"Je suis hiss\u00e9e\";\n\nconsole.log(nonHoistedLet); \/\/ Erreur : nonHoistedLet n'est pas d\u00e9fini\nlet nonHoistedLet = \"Je ne suis pas hiss\u00e9e\";\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Shadowing (Masquage de Variables)<\/h3>\n\n\n\n<p>Lorsque deux variables de port\u00e9e diff\u00e9rente portent le m\u00eame nom, la variable de la port\u00e9e interne masque celle de la port\u00e9e externe. Cela s&rsquo;appelle le shadowing ou masquage de variables.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>var myVar = \"Je suis globale\";\n\nfunction masquerVariable() {\n    var myVar = \"Je suis locale\";\n    console.log(myVar); \/\/ Affichera : \"Je suis locale\"\n}\n\nmasquerVariable();\nconsole.log(myVar); \/\/ Affichera : \"Je suis globale\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Variables dans les Boucles<\/h3>\n\n\n\n<p>La port\u00e9e des variables d\u00e9clar\u00e9es dans une boucle peut entra\u00eener des comportements inattendus, surtout lorsqu&rsquo;on utilise <code>var<\/code>. Pr\u00e9f\u00e9rez <code>let<\/code> pour \u00e9viter ces pi\u00e8ges. Pour mieux comprendre l&rsquo;utilisation et l&rsquo;impact des boucles, consultez notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\" target=\"_blank\" rel=\"noopener\">boucles for en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>for (var i = 0; i < 3; i++) {\n    setTimeout(function() {\n        console.log(i); \/\/ Affichera 3, 3, 3\n    }, 1000);\n}\nfor (let j = 0; j < 3; j++) {\n    setTimeout(function() {\n        console.log(j); \/\/ Affichera 0, 1, 2\n    }, 1000);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Variables et Closures<\/h3>\n\n\n\n<p>Les closures en JavaScript permettent de cr\u00e9er des port\u00e9es lexicales, o\u00f9 une fonction interne peut acc\u00e9der \u00e0 la port\u00e9e de la fonction englobante m\u00eame apr\u00e8s la fin de l\u2019ex\u00e9cution de celle-ci. Pour plus de pratiques avanc\u00e9es, explorez nos explications sur les <a href=\"https:\/\/wikiform.fr\/codespace\/fermetures-closures-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">closures en JavaScript<\/a> et leur fonctionnalit\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createClosure() {\n    let closureVar = \"Je fais partie de la closure\";\n    return function() {\n        console.log(closureVar);\n    };\n}\n\nconst closureFunction = createClosure();\nclosureFunction(); \/\/ Affichera : \"Je fais partie de la closure\"\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur la Port\u00e9e des Variables JavaScript<\/h2>\n\n\n\n<p>Comprendre la port\u00e9e des variables en JavaScript est crucial pour \u00e9crire du code clair et sans erreurs. En distinguant les port\u00e9es globale, locale, de bloc et en apprenant \u00e0 utiliser correctement <code>let<\/code> et <code>const<\/code>, vous pouvez \u00e9viter des pi\u00e8ges fr\u00e9quents et am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement JavaScript. Continuez \u00e0 explorer ces concepts et \u00e0 pratiquer pour ma\u00eetriser pleinement les nuances des port\u00e9es en JavaScript. Pour plus de ressources, consultez notre page sur l'<a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">utilisation du d\u00e9bogueur en JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour approfondir vos connaissances, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">guide pratique pour placer du code 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\n\n<p>Poursuivez votre apprentissage avec notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">la concatenation en JavaScript<\/a> et explorez les manipulations de tableaux avec notre article d\u00e9taill\u00e9 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-simple-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er un tableau simple en JavaScript<\/a>.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Les Variables en JavaScript ont des comportements de port\u00e9e vari\u00e9s en fonction de leur d\u00e9claration et du contexte d&rsquo;ex\u00e9cution. Comprendre la port\u00e9e permet d&rsquo;\u00e9crire un&#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-5550","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\/5550","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=5550"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5550\/revisions"}],"predecessor-version":[{"id":6094,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5550\/revisions\/6094"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}