JS let

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript let

Cannot be Redeclared

Variables defined with let cannot be redeclared and accidentally redeclare a variable.

With let you can not do this:

Example

let x = “John Doe”;

let x = 0;

// SyntaxError: ‘x’ has already been declared

With var you can:

Example

var x = “John Doe”;

var x = 0;

Block Scope

Before ES6 (2015), JavaScript only consisted of Global Scope and Function Scope.

ES6 introduced two new JavaScript keywords: let and const.

These two keywords supported Block Scope in JavaScript.

Variables declared within a { } block cannot be accessed from outside the block:

Example

{ let x = 2; } // x can NOT be used here

Variables declared using the var keyword can NOT have block scope.

Variables declared within a { } block can be accessed from outside the block.

Example

{

  var x = 2;

}

// x CAN be used here

Redeclaring Variables

Redeclaring a variable with the var keyword can impose problems.

Redeclaring a variable within a block will also redeclare the variable outside the block:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Redeclaring a Variable Using var</h2>

<p id=”demo”></p>

<script>

var  x = 10;

// Here x is 10

var x = 2;

// Here x is 2

}

// Here x is 2

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

Redeclaring a Variable Using var

Redeclaring a variable with the let keyword can be used to solve this problem.

Redeclaring a variable within a block will not redeclare the variable outside the block:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Redeclaring a Variable Using let</h2>

<p id=”demo”></p>

<script>

let  x = 10;

// Here x is 10

  let x = 2;

  // Here x is 2

}

// Here x is 10

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

Redeclaring a Variable Using let

10

Redeclaring

Redeclaring a JavaScript variable using var is allowed anywhere in a program:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript let</h2>

<p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program:</p>

<p id=”demo”></p>

<script>

var x = 2;

// Now x is 2

var x = 3;

// Now x is 3

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

JavaScript let

Redeclaring a JavaScript variable with var is allowed anywhere in a program:

3

With let, redeclaring a variable in the same block is NOT permitted:

Example

var x = 2;    // Allowed

let x = 3;    // Not allowed

{

let x = 2;    // Allowed

let x = 3     // Not allowed

}

{

let x = 2;    // Allowed

var x = 3     // Not allowed

}

Redeclaring a variable with let, in another block, IS allowed:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript let</h2>

<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>

<p id=”demo”></p>

<script>

let x = 2;   // Allowed

{

  let x = 3;   // Allowed

}

{

  let x = 4;   // Allowed

}

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

JavaScript let

Redeclaring a variable with let, in another scope, or in another block, is allowed:

2

Let Hoisting

Variables defined with var are hoisted to the top and can be initialized at any time.

Using the variable before it is declared:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>var</b>, you can use a variable before it is declared:</p>

<p id=”demo”></p>

<script>

carName = “Volvo”;

document.getElementById(“demo”).innerHTML = carName;

var carName;

</script>

</body>

</html>

Output

JavaScript Hoisting

With var, you can use a variable before it is declared:

Volvo

Variables specified with let are also hoisted to the top of the block, but not initialized.

Using a let variable before it is defined result in a ReferenceError:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>let</b>, you cannot use a variable before it is declared.</p>

<p id=”demo”></p>

<script>

try {

  carName = “Saab”;

  let carName = “Volvo”;

}

catch(err) {

 document.getElementById(“demo”).innerHTML = err;

}

</script>

</body>

</html>

Output

JavaScript Hoisting

With let, you cannot use a variable before it is declared.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420