With block scope, variables declared using let enhance control and reduce errors.

Declaration before use is a requirement with let, ensuring code clarity and order.

let avoids redeclaration in the same scope, safeguarding your variables against overwrites.

Block Scope

Pre-ES6, JavaScript operated with global and function scopes. The scene evolved in 2015.

ES6 brought a refreshing change with the introduction of let and const.

let and const offer block scoping capabilities, adding precision to JavaScript.

With these additions, JavaScript now allows for more robust and secure code structures.

Example

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

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

Global Scope

Variables declared with var enjoy universal access thanks to their global scope.

The var keyword is unique in that it extends the reach of variables beyond block scope.

Example

Variables declared with varinside a { } block can be accessed from outside the block:

{
  var x = 2;
}
// x CAN be used here

Cannot be Redeclared

Variables defined with let are safeguarded against redeclaration within the same scope, ensuring each identifier is unique and managed efficiently.

With let you can not do this

let x = "John Doe";

let x = 0;

Variables defined with var can be redeclared.

‍

With var you can do this:

var x = "John Doe";

var x = 0;

Redeclaring Variables

Using var to redeclare a variable can lead to complications; if you redeclare a variable inside a block, it affects the variable outside the block as well.

Example

var x = 10;
// Here x is 10

{
var x = 2;
// Here x is 2
}

// Here x is 2

<!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>

With let, you can declare variables that are limited to the scope of a block statement, or expression on which it is used, unlike the var keyword, which defines a variable globally or locally to an entire function regardless of block scope. This means that variables declared with let inside a block, stay within that block.

let x = 10;// Here x is 10{let x = 2;// Here x is 2}// Here x is 10

<!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>

What is Good?

The let and const keywords enhance JavaScript by providing block scope.
With let and const, variables cannot be redeclared, preventing overwriting errors.
It's mandatory to declare let and const variables before use, ensuring structured code.
let and const offer a clearer, more predictable scope by not binding to the this context.
Unlike var, let and const are not hoisted, so their declaration does not move to the top, which helps in maintaining cleaner code logic.

What is Not Good?

‍
- Variables declared with `var` don't require initialization.

- Declarations using `var` are hoisted, allowing them to be recognized throughout their enclosing scope.

- The `var` keyword is function-scoped and binds to the `this` context within functions.

Browser Support

Internet Explorer 11 and earlier versions do not support let and const.
For broader compatibility in these versions, use var

Redeclaring

In JavaScript, redeclaring a variable using var is permissible throughout a program.

Example

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

<!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>

When using let, you cannot redeclare a variable within the same block, ensuring variables are uniquely defined.

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
}

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 a different block is allowed, providing flexibility while maintaining block scope integrity.

<!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>

Let Hoisting

Variables defined with var are hoisted to the top of their scope, allowing you to use them before they are explicitly declared.

Example

This is OK:

carName = "Volvo";
var carName;

<!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>

To deepen your understanding of how variables are moved within their scope, explore the concept further in the chapter on JavaScript Hoisting.
Although variables declared with let are hoisted to the top of their block, they are not initialized, which means accessing them before declaration leads to a ReferenceError.

Example

carName = "Saab";
let carName = "Volvo";

<!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) {

Take a look into your desired course

Students

Hire from us

Partners