{"id":5523,"date":"2024-08-28T13:08:32","date_gmt":"2024-08-28T13:08:32","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript-2\/"},"modified":"2024-08-28T13:08:32","modified_gmt":"2024-08-28T13:08:32","slug":"qu-est-ce-qu-une-variable-en-javascript-2","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript-2\/","title":{"rendered":"2.1 Qu&rsquo;est-ce qu&rsquo;une Variable en JavaScript ?"},"content":{"rendered":"\n<p><strong>Variables JavaScript : Qu&rsquo;est-ce qu&rsquo;une Variable en JavaScript ?<\/strong> Les variables en JavaScript sont l&rsquo;un des concepts fondamentaux que chaque d\u00e9veloppeur doit ma\u00eetriser. Elles permettent de stocker et de manipuler des donn\u00e9es dans vos programmes. Apprenez comment d\u00e9clarer, initialiser et utiliser les variables en JavaScript gr\u00e2ce \u00e0 ce tutoriel d\u00e9taill\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux Variables 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\/658877565?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>Une variable en JavaScript est un conteneur pour stocker des donn\u00e9es. Utiliser des variables rend le code plus performant et plus facile \u00e0 lire. Pour d\u00e9clarer une variable en JavaScript, vous pouvez utiliser <code>var<\/code>, <code>let<\/code>, ou <code>const<\/code>. Apprenons comment en d\u00e9clarer quelques-unes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9clarer des Variables avec <code>let<\/code>, <code>const<\/code> et <code>var<\/code><\/h3>\n\n\n\n<p>Les fa\u00e7ons les plus courantes de d\u00e9clarer des variables en JavaScript sont d&rsquo;utiliser les mots-cl\u00e9s <code>let<\/code> et <code>const<\/code>. Le mot-cl\u00e9 <code>var<\/code> est l&rsquo;ancienne m\u00e9thode de d\u00e9claration et poss\u00e8de des comportements h\u00e9rit\u00e9s que nous aborderons bri\u00e8vement. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9clarer une variable avec let\nlet age;\nage = 25; \/\/ Initialiser la variable\nconsole.log(age); \/\/ Affiche : 25\n\n\/\/ D\u00e9clarer une variable avec const\nconst name = \"Alice\";\nconsole.log(name); \/\/ Affiche : Alice\n\n\/\/ D\u00e9clarer une variable avec var\nvar city = \"Paris\";\nconsole.log(city); \/\/ Affiche : Paris\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Choisir entre <code>let<\/code>, <code>const<\/code> et <code>var<\/code><\/h3>\n\n\n\n<p>Le choix entre <code>let<\/code>, <code>const<\/code> et <code>var<\/code> d\u00e9pend de nombreux facteurs, notamment de la port\u00e9e, de la mutabilit\u00e9 et des fonctionnalit\u00e9s h\u00e9rit\u00e9es. Voici une explication :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ const\n\/\/ Utilisez const pour d\u00e9clarer des variables qui ne changeront jamais\nconst pi = 3.14;\nconsole.log(pi); \/\/ Affiche : 3.14\n\n\/\/ let\n\/\/ Utilisez let pour des variables dont les valeurs peuvent changer\nlet score = 0;\nscore = 10;\nconsole.log(score); \/\/ Affiche : 10\n\n\/\/ var\n\/\/ Utilisez var lorsque vous devez g\u00e9rer la compatibilit\u00e9 avec d'anciens scripts\nvar greeting = \"Bonjour\";\ngreeting = \"Bonsoir\";\nconsole.log(greeting); \/\/ Affiche : Bonsoir\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e des Variables en JavaScript<\/h3>\n\n\n\n<p>La port\u00e9e d\u00e9termine o\u00f9 une variable est accessible dans votre programme. En JavaScript, vous avez la port\u00e9e globale et la port\u00e9e locale (fonction ou bloc). Voici comment cela fonctionne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Port\u00e9e globale\nlet globalVar = \"Je suis global\";\n\nfunction demoFunction() {\n    \/\/ Port\u00e9e locale\n    let localVar = \"Je suis local\";\n    console.log(globalVar); \/\/ Accessible ici\n    console.log(localVar); \/\/ Accessible ici\n}\n\ndemoFunction();\nconsole.log(globalVar); \/\/ Accessible ici\nconsole.log(localVar); \/\/ Erreur : non d\u00e9fini en port\u00e9e globale\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Initialisation des Variables en JavaScript<\/h3>\n\n\n\n<p>Une variable en JavaScript peut \u00eatre initialis\u00e9e imm\u00e9diatement apr\u00e8s sa d\u00e9claration ou ult\u00e9rieurement. Si non initialis\u00e9e, elle aura une valeur <code>undefined<\/code>. Examinons cela :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let x; \/\/ Variable d\u00e9clar\u00e9e mais non initialis\u00e9e\nconsole.log(x); \/\/ Affiche : undefined\n\nlet y = 10; \/\/ D\u00e9clar\u00e9e et initialis\u00e9e\nconsole.log(y); \/\/ Affiche : 10\n\nx = 20; \/\/ Initialisation ult\u00e9rieure\nconsole.log(x); \/\/ Affiche : 20\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Meilleures Pratiques pour D\u00e9finir des Variables en JavaScript<\/h3>\n\n\n\n<p>Il est crucial de suivre certaines meilleures pratiques lors de la d\u00e9claration de variables pour \u00e9crire un code propre, maintenable et performant :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez <code>const<\/code> par d\u00e9faut ; passez \u00e0 <code>let<\/code> si la variable doit changer.<\/li>\n<li>\u00c9vitez <code>var<\/code> pour \u00e9viter les probl\u00e8mes de port\u00e9e et de red\u00e9claration.<\/li>\n<li>Choisissez des noms de variables significatifs et descriptifs pour rendre le code plus lisible.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Pratique : Utilisation de Variables dans une Fonction<\/h3>\n\n\n\n<p>Int\u00e9grons ce que nous avons appris dans un exemple pratique. Nous allons d\u00e9clarer des variables, les initialiser et les utiliser dans une fonction qui calcule l&rsquo;\u00e2ge en fonction de l&rsquo;ann\u00e9e de naissance :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function calculateAge(yearOfBirth) {\n    const currentYear = new Date().getFullYear();\n    let age = currentYear - yearOfBirth;\n    return age;\n}\n\nlet birthYear = 1990;\nconsole.log(\"L'\u00e2ge est : \" + calculateAge(birthYear)); \/\/ Affiche : L'\u00e2ge est : 33\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Avanc\u00e9 : Variables et Port\u00e9e<\/h3>\n\n\n\n<p>Utilisons les variables dans un contexte l\u00e9g\u00e8rement plus avanc\u00e9 en explorant leur port\u00e9e dans des fonctions imbriqu\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let globalVar = \"Global\";\n\nfunction outerFunction() {\n    let outerVar = \"Outer\";\n\n    function innerFunction() {\n        let innerVar = \"Inner\";\n        console.log(globalVar); \/\/ Affiche : Global\n        console.log(outerVar);  \/\/ Affiche : Outer\n        console.log(innerVar);  \/\/ Affiche : Inner\n    }\n\n    innerFunction();\n    console.log(innerVar); \/\/ Erreur : innerVar n'est pas d\u00e9fini\n}\n\nouterFunction();\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les Variables JavaScript<\/h2>\n\n\n\n<p>Les variables en JavaScript sont essentielles pour stocker et manipuler des donn\u00e9es. Ma\u00eetriser l&rsquo;utilisation de <code>let<\/code>, <code>const<\/code> et m\u00eame <code>var<\/code> vous permettra de structurer votre code efficacement. En suivant des bonnes pratiques et en comprenant la port\u00e9e des variables, vous pourrez \u00e9crire du code plus robuste et maintenable. Pour continuer votre apprentissage, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">cours sur les fondamentaux de JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour approfondir davantage sur les concepts de JavaScript, explorez nos guides d\u00e9taill\u00e9s sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce qu&rsquo;une fonction en JavaScript<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation du d\u00e9bogueur en JavaScript<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\" target=\"_blank\" rel=\"noopener\">les boucles for en JavaScript<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/convertir-donnees-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">la conversion de donn\u00e9es en JavaScript<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\" target=\"_blank\" rel=\"noopener\">les conditions if-else 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","protected":false},"excerpt":{"rendered":"<p>Variables JavaScript : Qu&rsquo;est-ce qu&rsquo;une Variable en JavaScript ? Les variables en JavaScript sont l&rsquo;un des concepts fondamentaux que chaque d\u00e9veloppeur doit ma\u00eetriser. Elles permettent&#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":[3,8],"tags":[18],"class_list":["post-5523","post","type-post","status-publish","format-standard","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\/5523","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=5523"}],"version-history":[{"count":0,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5523\/revisions"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}