{"id":186758,"date":"2021-02-23T16:00:19","date_gmt":"2021-02-23T13:00:19","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/defining-variables-in-javascript-cloudsavvy-it\/"},"modified":"2021-02-23T16:00:19","modified_gmt":"2021-02-23T13:00:19","slug":"defining-variables-in-javascript-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/defining-variables-in-javascript-cloudsavvy-it\/","title":{"rendered":"#Defining Variables in JavaScript \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a303a69c0980\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a303a69c0980\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/defining-variables-in-javascript-cloudsavvy-it\/#Var\" >Var<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/defining-variables-in-javascript-cloudsavvy-it\/#Let\" >Let<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/defining-variables-in-javascript-cloudsavvy-it\/#Const\" >Const<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/defining-variables-in-javascript-cloudsavvy-it\/#Which_Variable_Type_Should_I_Use\" >Which Variable Type Should I Use?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/defining-variables-in-javascript-cloudsavvy-it\/#When_Not_to_Use_Let\" >When Not to Use Let<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#Defining Variables in Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9816\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/38b865d8f78e872a08747837d13626ae\/p\/uploads\/2021\/02\/c123ee3a.jpg\" alt=\"Illustration showing the JavaScript logo\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>ES6\u2019s finalisation in 2015 brought new ways to define JavaScript variables. The <code>let<\/code> keyword creates a block-scoped variable while <code>const<\/code> specifies an immutable value. Here\u2019s the lowdown on how these modern variable types differ from the classic <code>var<\/code>.<\/p>\n<h2 id=\"var\"><span class=\"ez-toc-section\" id=\"Var\"><\/span>Var<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Prior to ES6, <code>var<\/code> was your only option when defining a variable. You can freely change the values of variables created with <code>var<\/code>. You may also redeclare the variable itself.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">var<\/span> demo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"first value\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">var<\/span> demo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"second value\"<\/span><span class=\"sy0\">;<\/span>\ndemo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"third value\"<\/span><span class=\"sy0\">;<\/span>\nexample <span class=\"sy0\">=<\/span> <span class=\"st0\">\"this throws an error - variable not declared\"<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Using <code>var<\/code> creates a variable that\u2019s scoped to the current function. In the event you use it outside a function, the resulting variable will be globally scoped.<\/p>\n<p>The \u201cscope\u201d of a variable describes where it can be used. A function-scoped variable can be accessed by code in the function that defines it. A global variable is accessible throughout your code.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">var<\/span> myGlobal <span class=\"sy0\">=<\/span> <span class=\"st0\">\"global\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">function<\/span> testA<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">var<\/span> myFunctionScope <span class=\"sy0\">=<\/span> <span class=\"st0\">\"testA\"<\/span><span class=\"sy0\">;<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>myFunctionScope<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>myGlobal<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"kw1\">function<\/span> testB<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    myGlobal <span class=\"sy0\">=<\/span> <span class=\"st0\">\"overwritten!\"<\/span><span class=\"sy0\">;<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>myGlobal<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n   <span class=\"co1\">\/\/ console.log(myFunctionScope);          \/\/ ERROR<\/span>\n<span class=\"br0\">}<\/span>\n\u00a0\ntestA<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\ntestB<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\ntestA<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>In this example, the difference between globally scoped and function scoped variables are exhibited. <code>myGlobal<\/code> can be read (and written) by both <code>testA<\/code> and <code>testB<\/code>. <code>myFunctionScope<\/code> is only defined in <code>testA<\/code>, so <code>testB<\/code> throws an error when trying to access it. Here\u2019s what this example would output:<\/p>\n<pre>testA&#13;\nglobal&#13;\n&#13;\noverwritten!&#13;\n&#13;\ntestA&#13;\noverwritten!<\/pre>\n<p>The value of <code>myFunctionScope<\/code> is maintained separately within each function. The value of <code>myGlobal<\/code> is updated in both functions when <code>testB<\/code> overwrites it.<\/p>\n<h2 id=\"let\"><span class=\"ez-toc-section\" id=\"Let\"><\/span>Let<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The newer <code>let<\/code> keyword is the modern alternative to <code>var<\/code>. You can often adopt <code>let<\/code> in all the places you used to write <code>var<\/code>. There are important differences to note though.<\/p>\n<p>The most significant <code>let<\/code> feature is its scoping. Variables are scoped to individual code blocks instead of entire functions. In JavaScript, a block is a section of code that\u2019s wrapped in curly braces. Each <code>let<\/code> variable is only accessible to code within its block.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">function<\/span> letTest<span class=\"br0\">(<\/span>x<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    let demo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"hello world\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span>x <span class=\"sy0\">&gt;<\/span> <span class=\"nu0\">10<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        let y <span class=\"sy0\">=<\/span> <span class=\"nu0\">9000<\/span><span class=\"sy0\">;<\/span>\n        demo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>demo<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>  <span class=\"co1\">\/\/ \"foobar\"<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>y<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>     <span class=\"co1\">\/\/ ERROR<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>In this example, the <code>if<\/code> statement creates a new code block. Blocks inherit the scope of their parent block so the <code>demo<\/code> variable remains available. The <code>y<\/code> variable is scoped to the <code>if<\/code> statement. Trying to access <code>y<\/code> outside of the <code>if<\/code> block results in an undefined variable error.<\/p>\n<p>Like <code>var<\/code>, variables created with <code>let<\/code> can have their values changed at any time. They cannot be redeclared though \u2013 using <code>let<\/code> twice with the same name in a single block will cause an error.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">let demo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"test\"<\/span><span class=\"sy0\">;<\/span>\ndemo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"example\"<\/span><span class=\"sy0\">;<\/span>\nlet demo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"test\"<\/span><span class=\"sy0\">;<\/span>      <span class=\"co1\">\/\/ ERROR<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>An exception is when redeclaring a variable in a nested scope. The rules of block-level scoping mean this is permitted \u2013 you end up with two <em>separate<\/em> variables that happen to have the same identifier.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">let foo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"bar\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span><span class=\"kw2\">true<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    let foo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"sy0\">;<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>foo<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span>\nconsole.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>foo<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The above example would emit <code>foobar bar<\/code>. The <code>foo<\/code> variable is redeclared in the <code>if<\/code> block, without impacting the <code>foo<\/code> variable of the outer scope. You do lose the ability to reference the outer variable from within the inner block.<\/p>\n<h2 id=\"const\"><span class=\"ez-toc-section\" id=\"Const\"><\/span>Const<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <code>const<\/code> keyword was another ES6 addition. It is block-scoped like <code>let<\/code>. <code>const<\/code> is short for \u201cconstant\u201d and is used for immutable values that will never change. Trying to update the value of a <code>const<\/code> variable will always result in an error.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> foo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"bar\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">const<\/span> foo <span class=\"sy0\">=<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"sy0\">;<\/span>   <span class=\"co1\">\/\/ ERROR<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>As a consequence, you must always initialise <code>const<\/code> variables with a value. It\u2019s not permissible to define a <code>const<\/code> and set its value later on.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">let demoLet<span class=\"sy0\">;<\/span>                    <span class=\"co1\">\/\/ OK<\/span>\n<span class=\"kw1\">var<\/span> demoVar<span class=\"sy0\">;<\/span>                    <span class=\"co1\">\/\/ OK<\/span>\n<span class=\"kw1\">const<\/span> demoConst<span class=\"sy0\">;<\/span>                <span class=\"co1\">\/\/ ERROR<\/span>\n<span class=\"kw1\">const<\/span> demoConst <span class=\"sy0\">=<\/span> <span class=\"st0\">\"value\"<\/span><span class=\"sy0\">;<\/span>      <span class=\"co1\">\/\/ OK<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Technically, <code>const<\/code> does not define a constant value. It actually creates a <em>constant reference<\/em> to a value. The effect of this is that you can still update the properties of objects assigned to a <code>const<\/code>. Errors only occur if you use the <code>const<\/code> itself on the left-hand side of an assignment.<\/p>\n<h2 id=\"which-variable-type-should-i-use\"><span class=\"ez-toc-section\" id=\"Which_Variable_Type_Should_I_Use\"><\/span>Which Variable Type Should I Use?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You should adopt <code>let<\/code> for most <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a>-purpose variables in your JavaScript code. The block-level scoping and forbidden redeclaration help to catch errors and avoid unintentional overwrites.<\/p>\n<p>Using <code>let<\/code> stops variable \u201cleakage,\u201d where variables can be accessed in scopes they\u2019re not intended for. A classic example is iterators in loops:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">for<\/span> <span class=\"br0\">(<\/span><span class=\"kw1\">var<\/span> i <span class=\"sy0\">=<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span> i <span class=\"sy0\">&lt;=<\/span> <span class=\"nu0\">10<\/span><span class=\"sy0\">;<\/span> i<span class=\"sy0\">++<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"co1\">\/\/ do something<\/span>\n<span class=\"br0\">}<\/span>\nconsole.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>i<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This would result in <code>10<\/code> getting emitted to the console. Using <code>let<\/code> instead would emit <code>undefined<\/code>, as the <code>i<\/code> variable would be inaccessible outside the <code>if<\/code>. scope. This is usually the desired outcome in this kind of scenario.<\/p>\n<p>Loops also demonstrate the dangers of <code>var<\/code> reassignment:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">for<\/span> <span class=\"br0\">(<\/span><span class=\"kw1\">var<\/span> i <span class=\"sy0\">=<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span> i <span class=\"sy0\">&lt;=<\/span> <span class=\"nu0\">10<\/span><span class=\"sy0\">;<\/span> i<span class=\"sy0\">++<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    setTimeout<span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>i<span class=\"br0\">)<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1000<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>At first glance, this code looks like it <em>should<\/em> emit the numbers 1 to 10. Instead, <code>10<\/code> will be logged ten times. <code>setTimeout()<\/code> is asynchronous and <code>i<\/code> in the callback is lexically bound to the scope. As <code>var i<\/code> is being used in the loop, the <code>i<\/code> variable gets a new value on each iteration. When the timer callback runs, all ten iterations have already completed and <code>i<\/code> will always resolve to the final value \u2013 <code>10<\/code>, in this case.<\/p>\n<p>Using <code>let i<\/code> instead would declare a <em>new<\/em> variable called <code>i<\/code> for each iteration of the loop. Each variable would retain its own value after its iteration completes, resulting in the expected log output.<\/p>\n<h2 id=\"when-not-to-use-let\"><span class=\"ez-toc-section\" id=\"When_Not_to_Use_Let\"><\/span>When Not to Use Let<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are scenarios where you shouldn\u2019t use <code>let<\/code>. You should use <code>const<\/code> when you\u2019re creating a variable that you know will never change. Bundlers and static analysis tools will then be able to alert you if you unwittingly try to reassign its value.<\/p>\n<p>It\u2019s usually a good idea to keep variables immutable wherever possible. This helps eradicate bugs caused by unintentional overwrites. Using <code>const<\/code> also helps you indicate your intent in a codebase by making it explicit that a value won\u2019t change.<\/p>\n<p>ES6 features such as <code>let<\/code> and <code>const<\/code> are now universally supported by modern browsers. Some older browsers without full ES6 support, notably Internet Explorer 11, offer them too. You don\u2019t need to worry about whether they\u2019ll be available unless you\u2019re targeting a heavily dated platform. Use <code>let<\/code> and <code>const<\/code> to keep your code cleaner and reduce the risk of hidden bugs.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/9815\/let-var-and-const-defining-variables-in-javascript\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#Defining Variables in JavaScript \u2013 CloudSavvy IT&#8221; ES6\u2019s finalisation in 2015 brought new ways to define JavaScript variables. The let keyword creates a block-scoped variable while const specifies an immutable value. Here\u2019s the lowdown on how these modern variable types differ from the classic var. Var Prior to ES6, var was your only option when&#8230;<\/p>\n","protected":false},"author":1,"featured_media":186759,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/38b865d8f78e872a08747837d13626ae\/p\/uploads\/2021\/02\/c123ee3a.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-186758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/186758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=186758"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/186758\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/186759"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=186758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=186758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=186758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}