{"id":5528,"date":"2024-08-28T13:23:57","date_gmt":"2024-08-28T13:23:57","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\/"},"modified":"2024-08-28T13:24:01","modified_gmt":"2024-08-28T13:24:01","slug":"declarer-variables-en-javascript-let-const-var","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\/","title":{"rendered":"2.2 D\u00e9clarer Variables en JavaScript (Let, Const, Var)"},"content":{"rendered":"\n<p><strong>D\u00e9clarer des Variables en JavaScript<\/strong> est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur web. Utiliser correctement <strong>let<\/strong>, <strong>const<\/strong>, et <strong>var<\/strong> permet d&rsquo;\u00e9crire du code plus propre, plus s\u00fbr et plus maintenable. Apprenons ensemble \u00e0 d\u00e9clarer des variables en JavaScript et d\u00e9couvrons les diff\u00e9rences et les meilleures pratiques pour chaque type de d\u00e9claration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>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\/658878121?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 ? 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>En JavaScript, il existe trois fa\u00e7ons principales pour d\u00e9clarer des variables : <code>var<\/code>, <code>let<\/code>, et <code>const<\/code>. Chacune a ses propres caract\u00e9ristiques et usages, influen\u00e7ant la port\u00e9e et le comportement de la variable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9clarer une Variable avec <code>var<\/code><\/h3>\n\n\n\n<p><code>var<\/code> est la m\u00e9thode traditionnelle de d\u00e9claration des variables en JavaScript. Elle poss\u00e8de une port\u00e9e de fonction et peut \u00eatre r\u00e9affect\u00e9e. Cependant, son utilisation peut mener \u00e0 des scoping issues, notamment \u00e0 cause de hoisting.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9claration avec var\nvar nom = \"Jean\";\nconsole.log(nom); \/\/ Affiche : Jean\n\n\/\/ R\u00e9affectation\nnom = \"Pierre\";\nconsole.log(nom); \/\/ Affiche : Pierre\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9clarer une Variable avec <code>let<\/code><\/h3>\n\n\n\n<p><code>let<\/code> a \u00e9t\u00e9 introduite avec ECMAScript 6 (ES6) et est recommand\u00e9e pour la plupart des cas d&rsquo;utilisation actuels. Les variables d\u00e9finies avec <code>let<\/code> ont une port\u00e9e de bloc, ce qui signifie qu&rsquo;elles ne sont accessibles que dans le bloc o\u00f9 elles sont d\u00e9finies. De plus, elles ne sont pas accessibles avant leur d\u00e9claration, \u00e9vitant ainsi les pi\u00e8ges du hoisting.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9claration avec let\nlet nom = \"Jean\";\nconsole.log(nom); \/\/ Affiche : Jean\n\n\/\/ R\u00e9affectation\nnom = \"Pierre\";\nconsole.log(nom); \/\/ Affiche : Pierre\n\n\/\/ Exemple scope\nif (true) {\n  let age = 25;\n  console.log(age); \/\/ Affiche : 25\n}\nconsole.log(age); \/\/ Erreur : age is not defined\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9clarer une Variable avec <code>const<\/code><\/h3>\n\n\n\n<p><code>const<\/code> est \u00e9galement introduit avec ES6 et est utilis\u00e9 pour d\u00e9clarer des variables qui ne doivent pas \u00eatre r\u00e9affect\u00e9es. Comme <code>let<\/code>, <code>const<\/code> a une port\u00e9e de bloc. Les variables d\u00e9clar\u00e9es avec <code>const<\/code> doivent \u00eatre initialis\u00e9es au moment de leur d\u00e9claration.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9claration avec const\nconst nom = \"Jean\";\nconsole.log(nom); \/\/ Affiche : Jean\n\n\/\/ Tentative de r\u00e9affectation\nnom = \"Pierre\"; \/\/ Erreur : Assignment to constant variable.\n\n\/\/ Const en objets\nconst utilisateur = {\n  nom: \"Jean\",\n  age: 30\n};\n\n\/\/ Modification d'une propri\u00e9t\u00e9\nutilisateur.age = 31; \/\/ Pas d'erreur\nconsole.log(utilisateur.age); \/\/ Affiche : 31\n\n\/\/ R\u00e9affectation de l'objet\nutilisateur = {}; \/\/ Erreur : Assignment to constant variable.\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences Notables entre <code>var<\/code>, <code>let<\/code> et <code>const<\/code><\/h3>\n\n\n\n<p>Examinons les principales diff\u00e9rences entre ces trois types de d\u00e9claration de variables :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Port\u00e9e :<\/strong> <code>var<\/code> a une port\u00e9e de fonction tandis que <code>let<\/code> et <code>const<\/code> ont une port\u00e9e de bloc.<\/li>\n<li><strong>Hoisting :<\/strong> Les variables d\u00e9clar\u00e9es avec <code>var<\/code> sont hoist\u00e9es et initialis\u00e9es comme <code>undefined<\/code>. Celles d\u00e9clar\u00e9es avec <code>let<\/code> et <code>const<\/code> sont \u00e9galement hoist\u00e9es mais ne peuvent pas \u00eatre utilis\u00e9es avant leur d\u00e9claration (Temporal Dead Zone).<\/li>\n<li><strong>R\u00e9affectation :<\/strong> Les variables <code>var<\/code> et <code>let<\/code> peuvent \u00eatre r\u00e9affect\u00e9es, mais pas les variables <code>const<\/code>.<\/li>\n<li><strong>Initialisation :<\/strong> Les variables <code>var<\/code> et <code>let<\/code> peuvent \u00eatre d\u00e9clar\u00e9es sans initialisation, mais <code>const<\/code> doit \u00eatre initialis\u00e9 au moment de la d\u00e9claration.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Bonnes Pratiques pour Utiliser let et const<\/h3>\n\n\n\n<p>Il est g\u00e9n\u00e9ralement recommand\u00e9 d&rsquo;utiliser <code>let<\/code> et <code>const<\/code> plut\u00f4t que <code>var<\/code> pour la d\u00e9claration de variables. Voici quelques bonnes pratiques \u00e0 suivre :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pr\u00e9f\u00e9rer <code>const<\/code> par d\u00e9faut :<\/strong> Utilisez <code>const<\/code> pour toutes les variables dont la valeur ne change pas. Cela permet de renforcer l&rsquo;int\u00e9grit\u00e9 et la s\u00e9curit\u00e9 du code.<\/li>\n<li><strong>Utiliser <code>let<\/code> pour les variables modifiables :<\/strong> Lorsque vous devez changer la valeur de la variable, utilisez <code>let<\/code>.<\/li>\n<li><strong>\u00c9viter <code>var<\/code> :<\/strong> \u00c9vitez d&rsquo;utiliser <code>var<\/code> en raison de ses limitations et de ses comportements inattendus avec la port\u00e9e et le hoisting.<\/li>\n<li><strong>D\u00e9clarer les variables au d\u00e9but des blocs :<\/strong> Pour am\u00e9liorer la lisibilit\u00e9 du code, d\u00e9clarez vos variables au d\u00e9but des blocs de code.<\/li>\n<li><strong>Nommer les variables de mani\u00e8re descriptive :<\/strong> Utilisez des noms de variables clairs et descriptifs pour am\u00e9liorer la compr\u00e9hension du code.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cas Pratiques de D\u00e9clarations de Variables en JavaScript<\/h3>\n\n\n\n<p>Voyons quelques exemples pratiques d&rsquo;utilisation des variables en JavaScript. Pour une compr\u00e9hension plus approfondie, consultez ces articles utiles sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce qu&rsquo;une Variable en JavaScript<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9clarer et Utiliser des Variables dans une Boucle<\/h4>\n\n\n\n<p>Les boucles for sont l&rsquo;un des endroits o\u00f9 l&rsquo;utilisation de <code>let<\/code> se d\u00e9marque par rapport \u00e0 <code>var<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation de let dans une boucle for\nfor (let i = 0; i < 3; i++) {\n  setTimeout(() => console.log(i), 1000);\n}\n\/\/ Affiche 0, 1, 2\n\n\/\/ Comparaison avec var\nfor (var i = 0; i < 3; i++) {\n  setTimeout(() => console.log(i), 1000);\n}\n\/\/ Affiche 3 trois fois en raison de la port\u00e9e globale de var\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de Const dans des Objets et des Tableaux<\/h4>\n\n\n\n<p>Les objets et tableaux d\u00e9clar\u00e9s avec <code>const<\/code> peuvent \u00eatre modifi\u00e9s, mais pas r\u00e9affect\u00e9s.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Objet d\u00e9clar\u00e9 avec const\nconst utilisateur = { nom: \"Jean\", age: 30 };\n\n\/\/ Modification des propri\u00e9t\u00e9s (autoris\u00e9)\nutilisateur.age = 31;\nconsole.log(utilisateur.age); \/\/ Affiche : 31\n\n\/\/ Tentative de r\u00e9affectation de l'objet (interdit)\nutilisateur = { nom: \"Pierre\", age: 25 }; \/\/ Erreur\n\n\/\/ Tableau d\u00e9clar\u00e9 avec const\nconst couleurs = [\"rouge\", \"vert\", \"bleu\"];\n\n\/\/ Modification des \u00e9l\u00e9ments du tableau (autoris\u00e9)\ncouleurs.push(\"jaune\");\nconsole.log(couleurs); \/\/ Affiche : [\"rouge\", \"vert\", \"bleu\", \"jaune\"]\n\n\/\/ Tentative de r\u00e9affectation du tableau (interdit)\ncouleurs = [\"noir\", \"blanc\"]; \/\/ Erreur\n<\/code><\/pre>\n\n\n<!-- Ajoutant du contenu additionnel pour atteindre la longueur requise -->\n\n\n<h3 class=\"wp-block-heading\">Variables Globales et Locales en JavaScript<\/h3>\n\n\n\n<p>Comprendre la <strong>port\u00e9e des variables<\/strong> est crucial pour \u00e9crire du code bien structur\u00e9. Les variables globales sont accessibles partout dans le code, tandis que les variables locales ne le sont que dans le bloc o\u00f9 elles ont \u00e9t\u00e9 d\u00e9clar\u00e9es. Pour aller plus loin sur ce sujet, d\u00e9couvrez notre article complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">Port\u00e9e des Variables en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9boguer le Code JavaScript<\/h3>\n\n\n\n<p>Le d\u00e9bogage est une \u00e9tape essentielle dans le d\u00e9veloppement de toute application JavaScript. Utiliser les outils appropri\u00e9s peut vous aider \u00e0 identifier et \u00e0 corriger les erreurs rapidement. Consultez notre guide d\u00e9taill\u00e9 sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">Utilisation du D\u00e9bogueur en JavaScript<\/a> pour en savoir plus sur les meilleures techniques de d\u00e9bogage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions et Param\u00e8tres en JavaScript<\/h3>\n\n\n\n<p>Les fonctions sont des blocs de code r\u00e9utilisables en JavaScript. Il est important de comprendre comment les d\u00e9clarer et les utiliser efficacement. D\u00e9couvrez notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/ecrire-une-fonction-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">\u00c9crire une Fonction en JavaScript<\/a> pour ma\u00eetriser cet aspect fondamental du langage.<\/p>\n\n\n\n<p>Vous pouvez \u00e9galement lire comment <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\" target=\"_blank\" rel=\"noopener\">ajouter des param\u00e8tres \u00e0 une","protected":false},"excerpt":{"rendered":"<p>D\u00e9clarer des Variables en JavaScript est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur web. Utiliser correctement let, const, et var permet d&rsquo;\u00e9crire du code plus propre,&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2870,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","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\/5528","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=5528"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5528\/revisions"}],"predecessor-version":[{"id":5529,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5528\/revisions\/5529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2870"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}