{"id":5606,"date":"2024-08-28T23:56:18","date_gmt":"2024-08-28T23:56:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications-2\/"},"modified":"2024-08-28T23:56:21","modified_gmt":"2024-08-28T23:56:21","slug":"portee-des-variables-en-javascript-explications-2","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications-2\/","title":{"rendered":"7.1 Port\u00e9e des Variables en JavaScript : Explications"},"content":{"rendered":"\n<p><strong>7.1 Port\u00e9e des Variables en JavaScript<\/strong> est un concept crucial pour la gestion efficace de votre code. Comprendre la port\u00e9e (scope) des variables vous permet de mieux contr\u00f4ler leur visibilit\u00e9 et dur\u00e9e de vie, ce qui am\u00e9liore la maintenance et la d\u00e9bogabilit\u00e9 de vos scripts. D\u00e9couvrons ensemble comment cela fonctionne et comment l&rsquo;impl\u00e9menter \u00e0 travers des exemples concrets de code.<\/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\/658884450?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>La \u00ab\u00a0port\u00e9e\u00a0\u00bb en JavaScript d\u00e9crit la zone dans laquelle une variable est accessible. Il existe principalement deux types de port\u00e9e : la port\u00e9e globale et la port\u00e9e locale. Chaque type de port\u00e9e a des implications importantes sur la mani\u00e8re dont vous g\u00e9rez les variables dans votre code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre la Port\u00e9e Globale<\/h3>\n\n\n\n<p>Une variable d\u00e9clar\u00e9e en dehors de toute fonction ou bloc est une variable de port\u00e9e globale. Elle est accessible partout dans le script. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>var globalVar = \"Je suis globale\";\n\nfunction afficherGlobale() {\n    console.log(globalVar); \/\/ Acc\u00e8s \u00e0 la variable globale\n}\n\nafficherGlobale(); \/\/ Output: Je suis globale\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre la Port\u00e9e Locale<\/h3>\n\n\n\n<p>Une variable d\u00e9clar\u00e9e \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une fonction ou d&rsquo;un bloc (avec let ou const) est une variable de port\u00e9e locale. Elle est uniquement accessible \u00e0 l&rsquo;int\u00e9rieur de cette fonction ou de ce bloc. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function afficherLocale() {\n    var localeVar = \"Je suis locale\";\n    console.log(localeVar); \/\/ Acc\u00e8s \u00e0 la variable locale\n}\n\nafficherLocale(); \/\/ Output: Je suis locale\nconsole.log(localeVar); \/\/ Erreur : localeVar n'est pas d\u00e9finie\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctionnement de la Port\u00e9e de Bloc<\/h3>\n\n\n\n<p>Avec l&rsquo;introduction de <code>let<\/code> et <code>const<\/code> en ES6, JavaScript a obtenu la port\u00e9e de bloc. Une variable d\u00e9clar\u00e9e avec let ou const est uniquement accessible \u00e0 l&rsquo;int\u00e9rieur du bloc dans lequel elle est d\u00e9finie. Consid\u00e9rons cet exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>if (true) {\n    let blocVar = \"Je suis dans un bloc\";\n    console.log(blocVar); \/\/ Acc\u00e8s \u00e0 la variable de bloc\n}\n\nconsole.log(blocVar); \/\/ Erreur : blocVar n'est pas d\u00e9finie\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e des Variables dans les Boucles<\/h3>\n\n\n\n<p>L&rsquo;une des utilisations courantes des variables d\u00e9pendant de la port\u00e9e est dans les boucles. Les variables d\u00e9finies \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une boucle for, par exemple, peuvent \u00eatre \u00ab let \u00bb pour garantir qu&rsquo;elles ne sont pas accessibles en dehors de la boucle :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>for (let i = 0; i < 3; i++) {\n    console.log(i); \/\/ Acc\u00e8s \u00e0 la variable de boucle\n}\n\nconsole.log(i); \/\/ Erreur : i n'est pas d\u00e9finie\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e des Variables dans les Fonctions Imbriqu\u00e9es<\/h3>\n\n\n\n<p>Les fonctions imbriqu\u00e9es en JavaScript peuvent acc\u00e9der aux variables de leurs fonctions parentes. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function parentFunc() {\n    var parentVar = \"Je suis dans la fonction parente\";\n\n    function enfantFunc() {\n        console.log(parentVar); \/\/ Acc\u00e8s \u00e0 la variable de la fonction parente\n    }\n\n    enfantFunc(); \/\/ Output: Je suis dans la fonction parente\n}\n\nparentFunc();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Port\u00e9e pour Prot\u00e9ger les Donn\u00e9es<\/h3>\n\n\n\n<p>La port\u00e9e est \u00e9galement une m\u00e9thode efficace pour prot\u00e9ger les donn\u00e9es et \u00e9viter les conflits de noms de variables. Vous pouvez encapsuler votre code dans des fonctions pour restreindre l'acc\u00e8s aux variables :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>(function() {\n    var privateVar = \"Je suis une variable priv\u00e9e\";\n    console.log(privateVar); \/\/ Accessible dans cette fonction\n})();\n\nconsole.log(privateVar); \/\/ Erreur : privateVar n'est pas d\u00e9finie\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e Lexicale<\/h3>\n\n\n\n<p>La port\u00e9e lexicale signifie que la port\u00e9e d'une variable est d\u00e9finie par sa position dans le code source. Les fonctions se souviennent de la port\u00e9e dans laquelle elles ont \u00e9t\u00e9 cr\u00e9\u00e9es, ce qui rend possible les fonctions nest\u00e9es et les fermetures :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function externe() {\n    var externeVar = \"donn\u00e9e de fonction externe\";\n  \n    function interne() {\n        console.log(externeVar); \/\/ Acc\u00e8s \u00e0 une variable de la fonction parent\n    }\n  \n    return interne;\n}\n  \nconst maFonctionInterne = externe();\nmaFonctionInterne(); \/\/ Output: donn\u00e9e de fonction externe\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La compr\u00e9hension de la port\u00e9e des variables en JavaScript est essentielle pour \u00e9crire du code clair, maintenable et sans bugs. La ma\u00eetrise des concepts de port\u00e9e globale, locale, de bloc, et lexicale vous permet de mieux organiser et prot\u00e9ger vos donn\u00e9es. Continuez \u00e0 explorer ces concepts en pratiquant et en int\u00e9grant ces techniques dans vos projets. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>, et pour apprendre \u00e0 cr\u00e9er des fonctions encore plus avanc\u00e9es, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-des-fonctions-complexes-en-javascript\">tutoriel d\u00e9taill\u00e9<\/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>La <strong>port\u00e9e des variables en JavaScript<\/strong> n'est pas seulement essentielle pour que votre code fonctionne correctement; elle garantit \u00e9galement un meilleur contr\u00f4le des variables et \u00e9vite les conflits de noms. En comprenant ces principes, des sujets tels que <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\">les variables en JavaScript<\/a> deviennent plus faciles \u00e0 ma\u00eetriser.<\/p>\n\n\n\n<p>Les d\u00e9veloppeurs b\u00e9n\u00e9ficient d\u2019une compr\u00e9hension approfondie de la port\u00e9e des variables lorsqu\u2019ils travaillent avec des projets complexes. Par exemple, des projets comme <a href=\"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-objectifs\" target=\"_blank\" rel=\"noopener\">la calculatrice JavaScript<\/a> n\u00e9cessitent une gestion efficace des variables pour fonctionner sans accroc. De plus, ma\u00eetriser la port\u00e9e vous aidera \u00e0 cr\u00e9er des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">fonctions en JavaScript<\/a> plus robustes.<\/p>\n\n\n\n<p>Pour aller plus loin dans votre apprentissage, pensez \u00e0 explorer des articles d\u00e9taill\u00e9s tels que <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">Port\u00e9e des Variables en JavaScript: Explications Compl\u00e8tes<\/a>.<\/p>\n\n\n\n<p>N'oublions pas que la compr\u00e9hension de la port\u00e9e des variables est cruciale lors de l'utilisation de boucles dans vos codes JavaScript. Pour un guide complet sur ce sujet, vous pouvez consulter <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<p>Poursuivez avec l\u2019utilisation efficace des <strong>fonctions en JavaScript<\/strong> pour optimiser vos scripts : <a href=\"https:\/\/wikiform.fr\/codespace\/ecrire-une-fonction-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">\u00e9crire des fonctions en JavaScript<\/a> et comment <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\" target=\"_blank\" rel=\"noopener\">ajouter des param\u00e8tres<\/a> pour une gestion avanc\u00e9e des variables.<\/p>\n\n\n\n<p>En conclusion, la ma\u00eetrise de la <strong>port\u00e9e des variables en JavaScript<\/strong> est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur cherchant \u00e0 am\u00e9liorer ses comp\u00e9tences en programmation. La compr\u00e9hension et la gestion des variables sont essentielles pour des codes plus optimis\u00e9s et sans erreurs. Pour des connaissances plus approfondies et des tutoriels avanc\u00e9s, n\u2019h\u00e9sitez pas \u00e0 explorer les ressources suppl\u00e9mentaires disponibles sur des plateformes comme Learnify et les articles propos\u00e9s par <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Closures\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/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","protected":false},"excerpt":{"rendered":"<p>7.1 Port\u00e9e des Variables en JavaScript est un concept crucial pour la gestion efficace de votre code. Comprendre la port\u00e9e (scope) des variables vous permet&#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-5606","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\/5606","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=5606"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5606\/revisions"}],"predecessor-version":[{"id":5607,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5606\/revisions\/5607"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}