{"id":5894,"date":"2024-09-05T00:14:04","date_gmt":"2024-09-05T00:14:04","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/pourquoi-utiliser-let-const-javascript-react\/"},"modified":"2024-09-05T00:14:08","modified_gmt":"2024-09-05T00:14:08","slug":"pourquoi-utiliser-let-const-javascript-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/pourquoi-utiliser-let-const-javascript-react\/","title":{"rendered":"2.2 Pourquoi Utiliser let et const en JavaScript avec React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Pourquoi Utiliser let et const en JavaScript avec React<\/strong> est une question essentielle pour tout d\u00e9veloppeur souhaitant devancer les bonnes pratiques de codage modernes. Apprendre \u00e0 utiliser <strong>let<\/strong> et <strong>const<\/strong> de mani\u00e8re ad\u00e9quate dans un environnement React peut grandement am\u00e9liorer la lisibilit\u00e9, la s\u00e9curit\u00e9 et les performances de votre code. Voyons pourquoi et comment les utiliser correctement \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>let<\/strong> et <strong>const<\/strong> 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\/706049657?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\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" 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\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" 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>Les d\u00e9clarations <code>let<\/code> et <code>const<\/code> sont apparues avec l&rsquo;ECMAScript 2015 (ES6) et ont apport\u00e9 des fonctionnalit\u00e9s additionnelles et des avantages pour les d\u00e9veloppeurs JavaScript. Contrairement \u00e0 <code>var<\/code>, ces mots-cl\u00e9s permettent de d\u00e9clarer des variables avec une port\u00e9e limit\u00e9 \u00e0 un bloc et offrent des comportements plus pr\u00e9visibles, notamment en \u00e9vitant les probl\u00e8mes li\u00e9s \u00e0 la lev\u00e9e (hoisting) et autres effets ind\u00e9sirables. Explorons comment et pourquoi vous devriez vous familiariser davantage avec <code>let<\/code> et <code>const<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <strong>let<\/strong> en JavaScript<\/h3>\n\n\n\n<p>Le mot-cl\u00e9 <code>let<\/code> permet de d\u00e9clarer des variables ayant une port\u00e9e de bloc, ce qui signifie qu&rsquo;elles ne sont accessibles que dans le bloc o\u00f9 elles sont d\u00e9finies. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function example() {\n  let x = 10;\n  if(x > 5) {\n    let y = 20;\n    console.log(x); \/\/ 10\n    console.log(y); \/\/ 20\n  }\n  console.log(x); \/\/ 10\n  \/\/ console.log(y); \/\/ ReferenceError: y is not defined\n}\n<\/code><\/pre>\n\n\n\n<p>En utilisant <code>let<\/code> dans cet exemple, nous cr\u00e9ons une variable <code>y<\/code> qui est limit\u00e9e au bloc <code>if<\/code>, ce qui contribue \u00e0 \u00e9viter les effets ind\u00e9sirables dus \u00e0 la port\u00e9e des variables.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Constantes avec <strong>const<\/strong><\/h3>\n\n\n\n<p>Le mot-cl\u00e9 <code>const<\/code> est utilis\u00e9 pour d\u00e9finir des constantes, c&rsquo;est-\u00e0-dire des variables immuables dont la valeur ne peut pas \u00eatre chang\u00e9e une fois d\u00e9finie. Cela rend le code plus lisible et moins sujet aux erreurs involontaires. Examinons un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const PI = 3.14159;\nPI = 3.14; \/\/ TypeError: Assignment to constant variable.\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, tenter de r\u00e9assigner une nouvelle valeur \u00e0 <code>PI<\/code> d\u00e9clenchera une erreur. Cependant, il est important de noter que si <code>const<\/code> est utilis\u00e9 avec des objets ou des tableaux, leurs propri\u00e9t\u00e9s internes peuvent toujours \u00eatre modifi\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const arr = [1, 2, 3];\narr.push(4);\nconsole.log(arr); \/\/ [1, 2, 3, 4]\n\nconst obj = {a: 1};\nobj.b = 2;\nconsole.log(obj); \/\/ {a: 1, b: 2}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <strong>let<\/strong> et <strong>const<\/strong> avec React<\/h3>\n\n\n\n<p>Lorsque vous travaillez avec React, l&rsquo;utilisation de <code>let<\/code> et <code>const<\/code> est essentielle pour obtenir un code plus robuste et maintenable. Par exemple, utilisez <code>const<\/code> pour les composants fonctionnels et certaines variables qui ne devraient pas \u00eatre r\u00e9assign\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nconst MyComponent = () => {\n  const [count, setCount] = React.useState(0);  \/\/ Utilisation de const\n\n  const increment = () => {\n    setCount(count + 1);  \/\/ Utilisation de let\n  }\n\n  return (\n    <div>\n      <p>{count}<\/p>\n      <button onClick={increment}>Increment<\/button>\n    <\/div>\n  );\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous utilisons <code>const<\/code> pour d\u00e9clarer le composant fonctionnel <code>MyComponent<\/code> et les \u00e9tats, car ces d\u00e9clarations ne doivent pas changer. Pour les variables d&rsquo;\u00e9tat mutables comme <code>count<\/code>, l&rsquo;API <code>useState<\/code> de React est utilis\u00e9e pour g\u00e9rer les modifications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gains de S\u00e9curit\u00e9 et de Lisibilit\u00e9 avec <strong>let<\/strong> et <strong>const<\/strong><\/h3>\n\n\n\n<p>Utiliser <code>let<\/code> et <code>const<\/code> am\u00e9liore la lisibilit\u00e9 du code en rendant explicite l&rsquo;intention de l&rsquo;auteur. Cela permet \u00e9galement de pr\u00e9venir les bugs en restreignant la port\u00e9e des variables et en \u00e9vitant les r\u00e9assignations involontaires. Voici un exemple d\u00e9montrant le gain en s\u00e9curit\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>for (let i = 0; i < 5; i++) {\n  setTimeout(() => {\n    console.log(i); \/\/ 0, 1, 2, 3, 4\n  }, 1000);\n}\n<\/code><\/pre>\n\n\n\n<p>Si nous avions utilis\u00e9 <code>var<\/code> ici, la sortie aurait \u00e9t\u00e9 <code>5<\/code> r\u00e9p\u00e9t\u00e9 cinq fois, car <code>var<\/code> n&rsquo;est pas limit\u00e9e \u00e0 la port\u00e9e du bloc et <code>i<\/code> aurait \u00e9t\u00e9 reassign\u00e9e dans chaque it\u00e9ration. <code>let<\/code> garantit que chaque instance de <code>i<\/code> est bloqu\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages de <strong>let<\/strong> et <strong>const<\/strong> pour les D\u00e9veloppeurs React<\/h3>\n\n\n\n<p>Les d\u00e9veloppeurs utilisant des technologies comme <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">React<\/a> b\u00e9n\u00e9ficient grandement des pratiques modernes en JavaScript telles que l&rsquo;utilisation de <code>let<\/code> et <code>const<\/code>. Ces mots-cl\u00e9s permettent de rendre les composants plus pr\u00e9visibles et moins sujets aux erreurs. Un autre bon exemple de leur efficacit\u00e9 se trouve lors de l&rsquo;\u00e9criture de fonctions fl\u00e9ch\u00e9es, comme expliqu\u00e9 dans <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">cet article<\/a>.<\/p>\n\n\n\n<p>Pour les d\u00e9butants, il est essentiel de se familiariser avec ces concepts afin d&rsquo;\u00e9crire du code plus propre et plus s\u00fbr. De plus, la ma\u00eetrise des objets en JavaScript, comme le d\u00e9crit <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">ici<\/a>, va de pair avec l&rsquo;utilisation des mots-cl\u00e9s <code>let<\/code> et <code>const<\/code>.<\/p>\n\n\n\n<p>Pour aller plus loin, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\">l&rsquo;utilisation des classes en JavaScript<\/a> et d\u00e9couvrez comment elles interagissent avec <code>let<\/code> et <code>const<\/code> pour cr\u00e9er des composants puissants et bien structur\u00e9s. Vous pouvez \u00e9galement explorer les nouveaut\u00e9s de JavaScript qui sont essentielles \u00e0 conna\u00eetre pour travailler efficacement avec <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\">React<\/a>.<\/p>\n\n\n\n<p>Ces pratiques permettent non seulement de rendre le code plus s\u00e9curis\u00e9, mais aussi d&rsquo;acc\u00e9l\u00e9rer le d\u00e9veloppement, comme le montre notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">la cr\u00e9ation d&rsquo;une premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En conclusion, l&rsquo;utilisation de <strong>let<\/strong> et <strong>const<\/strong> en JavaScript et React n&rsquo;est pas seulement une bonne pratique, mais une n\u00e9cessit\u00e9 pour \u00e9crire du code clair, maintenable et \u00e0 l&rsquo;\u00e9preuve des bugs. Ces outils vous permettront de g\u00e9rer les port\u00e9es correctement, de maintenir l&rsquo;immuabilit\u00e9 l\u00e0 o\u00f9 elle s&rsquo;impose, et d&rsquo;\u00e9viter les probl\u00e9matiques li\u00e9es au comportement impr\u00e9visible des variables. Continuez \u00e0 explorer et \u00e0 perfectionner votre utilisation de ces mots-cl\u00e9s pour optimiser vos projets React.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour d\u00e9couvrir encore plus de pratiques et d&rsquo;astuces sur React et le d\u00e9veloppement JavaScript moderne, explorez notre collection de formations disponibles sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\" target=\"_blank\" rel=\"noopener\">Mozilla Developer Network<\/a> et <a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/javascript\" target=\"_blank\" rel=\"noopener\">Stack Overflow<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Pourquoi Utiliser let et const en JavaScript avec React est une question essentielle pour tout d\u00e9veloppeur souhaitant devancer les bonnes pratiques de codage modernes&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":3243,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","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\/5894","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5894"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5894\/revisions"}],"predecessor-version":[{"id":5895,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5894\/revisions\/5895"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3243"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}