javaScript-let

<h1 id="javascript-let-declaring-block-scoped-variables">JavaScript let: Declaring Block-Scoped Variables</h1> Summary: in this tutorial, you will learn how to use the JavaScript <code>let</code> keyword to declare block-scoped variables. <h2 id="introduction-to-the-javascript-let-keyword">Introduction to the JavaScript let keyword</h2> In ES5, when you <a href="https://www.javascripttutorial.net/javascript-variables/">declare a variable</a> using the <code>var</code> keyword, the scope of the variable is either global or local. If you declare a variable outside of a function, the scope of the variable is global. When you declare a variable inside a function, the scope of the variable is local. ES6 provides a new way of declaring a variable by using the <code>let</code> keyword. The <code>let</code> keyword is similar to the <code>var</code> keyword, except that these variables are blocked-scope. For example: <pre><code class="hljs language-js">let variable_name;Code language: JavaScript (javascript) </code></pre> In JavaScript, blocks are denoted by curly braces <code>{}</code> , for example, the <code>if else</code>, <code>for</code>, <code>do while</code>, <code>while</code>, <code>try catch</code> and so on: <pre><code class="hljs language-js">if(condition) { // inside a block }Code language: JavaScript (javascript) </code></pre> See the following example: <pre><code class="hljs language-js">let x = 10; if (x == 10) { let x = 20; console.log(x); // 20: reference x inside the block } console.log(x); // 10: reference at the begining of the scriptCode language: JavaScript (javascript) </code></pre> How the script works: <ul> <li>First, declare a variable <code>x</code> and initialize its value to 10.</li> <li>Second, declare a new variable with the same name <code>x</code> inside the <code>if</code> block but with an initial value of 20.</li> <li>Third, output the value of the variable <code>x</code> inside and after the <a href="https://www.javascripttutorial.net/javascript-if-else/"><code>if</code></a> block.</li> </ul> Because the <code>let</code> keyword declares a block-scoped variable, the <code>x</code> variable inside the <code>if</code> block is a new variable and it shadows the <code>x</code> variable declared at the top of the script. Therefore, the value of <code>x</code> in the console is <code>20</code>. When the JavaScript engine completes executing the <code>if</code> block, the <code>x</code> variable inside the <code>if</code> block is out of scope. Therefore, the value of the <code>x</code> variable that following the <code>if </code>block is 10. <h2 id="javascript-let-and-global-object">JavaScript let and global object</h2> When you declare a global variable using the <code>var</code> keyword, you add that variable to the property list of the <a href="https://www.javascripttutorial.net/es-next/javascript-globalthis/">global object</a>. In the case of the web browser, the global object is the <code>window</code>. For example: <pre><code class="hljs language-js">var a = 10; console.log(window.a); // 10Code language: JavaScript (javascript) </code></pre> However, when you use the <code>let</code> keyword to declare a variable, that variable is not attached to the global object as a property. For example: <pre><code class="hljs language-js">let b = 20; console.log(window.b); // undefinedCode language: JavaScript (javascript) </code></pre> <h2 id="javascript-let-and-callback-function-in-a-for-loop">JavaScript let and callback function in a for loop</h2> See the following example. <pre><code class="hljs language-js">for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 1000); }Code language: JavaScript (javascript) </code></pre> The intention of the code is to output numbers from 0 to 4 to the console every second. However, it outputs the number <code>5</code> five times: <pre><code class="hljs language-js">5 5 5 5 5 </code></pre> In this example, the variable <code>i</code> is a global variable. After the loop, its value is 5. When the callback functions are passed to the <code>setTimeout()</code> function executes, they reference the same variable <code>i</code> with the value 5. In ES5, you can fix this issue by creating another scope so that each callback function references a new variable. And to create a new scope, you need to create a function. Typically, you use the <a href="https://www.javascripttutorial.net/javascript-immediately-invoked-function-expression-iife/">IIFE</a> pattern as follows: <pre><code class="hljs language-js">for (var i = 0; i < 5; i++) { (function (j) { setTimeout(function () { console.log(j); }, 1000); })(i); }Code language: JavaScript (javascript) </code></pre> Output: <pre><code class="hljs language-js">0 1 2 3 4 </code></pre> In ES6, the <code>let</code> keyword declares a new variable in each loop iteration. Therefore, you just need to replace the <code>var</code> keyword with the <code>let</code> keyword to fix the issue: <pre><code class="hljs language-js">for (let i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 1000); }Code language: JavaScript (javascript) </code></pre> To make the code completely ES6 style, you can use an <a href="https://www.javascripttutorial.net/es6/javascript-arrow-function/">arrow function</a> as follows: <pre><code class="hljs language-js">for (let i = 0; i < 5; i++) { setTimeout(() => console.log(i), 1000); }Code language: JavaScript (javascript) </code></pre> Note that you’ll learn more about the <a href="https://www.javascripttutorial.net/es6/javascript-arrow-function/">arrow functions in the later tutorial</a>. <h2 id="redeclaration">Redeclaration</h2> The <code>var</code> keyword allows you to redeclare a variable without any issue: <pre><code class="hljs language-js">var counter = 0; var counter; console.log(counter); // 0Code language: JavaScript (javascript) </code></pre> However, redeclaring a variable using the <code>let</code> keyword will result in an error: <pre><code class="hljs language-js">let counter = 0; let counter; console.log(counter);Code language: JavaScript (javascript) </code></pre> Here’s the error message: <pre><code class="hljs language-js">Uncaught SyntaxError: Identifier 'counter' has already been declaredCode language: JavaScript (javascript) </code></pre> <h2 id="javascript-let-variables-and-hoisting">JavaScript let variables and hoisting</h2> Let’s examine the following example: <pre><code class="hljs language-js">{ console.log(counter); // let counter = 10; }Code language: JavaScript (javascript) </code></pre> This code causes an error: <pre><code class="hljs language-js">Uncaught ReferenceError: Cannot access 'counter' before initializationCode language: JavaScript (javascript) </code></pre> In this example, accessing the <code>counter</code> variable before declaring it causes a <code>ReferenceError</code>. You may think that a variable declaration using the <code>let</code> keyword does not hoist, but it does**.** In fact, the JavaScript engine will hoist a variable declared by the <code>let</code> keyword to the top of the block. However, the JavaScript engine does not initialize the variable. Therefore, when you reference an uninitialized variable, you’ll get a <code>ReferenceError</code>. <h2 id="temporal-death-zone-tdz">Temporal death zone (TDZ)</h2> A variable declared by the <code>let</code> keyword has a so-called temporal dead zone (TDZ). The TDZ is the time from the start of the block until the variable declaration is processed. The following example illustrates that the temporal dead zone is time-based, not location-based*.* <pre><code class="hljs language-js">{ // enter new scope, TDZ starts let log = function () { console.log(message); // messagedeclared later }; // This is the TDZ and accessing log // would cause a ReferenceError let message= 'Hello'; // TDZ ends log(); // called outside TDZ }Code language: JavaScript (javascript) </code></pre> In this example: First, the curly brace starts a new block scope, therefore, the TDZ starts. Second, the <code>log()</code> function expression accesses the <code>message</code> variable. However, the <code>log()</code> function has not been executed yet. Third, declare the <code>message</code> variable and initialize its value to 10. The time from the start of the block scope to the time that the <code>message</code> variable is accessed is called a temporal death zone. When the JavaScript engine processes the declaration, the TDZ ends. Finally, call the <code>log()</code> function that accesses the <code>message</code> variable outside of the TDZ. Note that if you access a variable declared by the <code>let</code> keyword in the TDZ, you’ll get a <code>ReferenceError</code> as illustrated in the following example. <pre><code class="hljs language-js">{ // TDZ starts console.log(typeof myVar); // undefined console.log(typeof message); // ReferenceError let message; // TDZ ends }Code language: JavaScript (javascript) </code></pre> Notice that <code>myVar</code> variable is a non-existing variable, therefore, its type is <a href="https://www.javascripttutorial.net/javascript-data-types/#undefined">undefined</a>. The temporal death zone prevents you from accidentally referencing a variable before its declaration. <h3 id="summary">Summary</h3> <ul> <li>Variables are declared using the <code>let</code> keyword are block-scoped, are not initialized to any value, and are not attached to the global object.</li> <li>Redeclaring a variable using the <code>let</code> keyword will cause an error.</li> <li>A temporal dead zone of a variable declared using the <code>let</code> keyword starts from the block until the initialization is evaluated.</li> </ul>

About Me

Top References

NOTE:

This website only for Developing purpose not for business. and all content copied from other place like javascripttutorial.net and W3school.com

About Me

Top References

Top Tutorials

NOTE: