JavaScript uses the let keyword to declare variables. Although the var keyword can also be used to declare variables, their main distinction is in the scopes they have. Let is block scoped, whereas var is function scoped; we shall go into more detail on this later.

Understanding how the let keyword differs from var is crucial for understanding it.

Function Scope

var example

function func() {
  // x is known here but not defined.
  console.log('value of x here: ', x)
  {
    var x = 10;
    x = x + 5;
  }
  // x is still known here and has a value.
  console.log('value of x after for block: ', x)
}
// x is NOT known here.
func()

let example

function func() {
  // x is NOT known here. Try uncommenting the line below.
  // console.log('value of x here: ', x)
  {
    let x = 10;
    x = x + 5;
  }
  // x is NOT known here. Try uncommenting the line below.
  // console.log('value of x after for block: ', x)
}
// x is NOT known here.
func()

The first tab in the code sample above uses var; take note of how var is declared in line 5 within a block. Above the block, this variable is known (but undefined). After the block, it is known and defined, though.

The places where x has a scope are represented by the highlighted lines. Var is referred to as having function scope because it encompasses the entire function.

Note that x is only known and defined within the block it is declared in?the highlighted lines?in the second code tab, where it is declared using let in line 5. Everywhere outside of its block is outside of its scope.

Block scope

Take into account the following illustration to further illustrate the block scope for let:

var example

var mango = "yellow"

if (mango === "yellow"){
  var mango = "blue"
  console.log(mango)
}
console.log(mango)

let example

let mango = "yellow"

if (mango === "yellow"){
  let mango = "blue"
  console.log(mango)
}
console.log(mango)

Using let

Inside the if block, mango is first declared as "yellow" in line 1 and then redeclared as "blue" in line 4. The mango stated inside the if block, however, only has scope inside that block, as the output demonstrates. The original mango variable with the value "yellow" is accessible outside of this block.

Using var

On the other hand, changing the mango defined in line 1 to "blue" inside the if block in the code that uses var also affects the mango declared in line 1. This is so that block scope is irrelevant when variables declared using var are defined


Recommended Posts

View All

Difference Between == and === in JavaScript


Learn the Difference Between == and === in JavaScript. Discover how each operator compares values and data types, and when to use them in code.

What is currying function in JavaScript ?


Currying function in JavaScript allows you to transform a function that takes multiple arguments into a series of functions that each take one arg.

4 Ways of Passive Income for a Programmer


Everyone wants to make extra money, but owing to time limits and jobs, we can't devote more time to it.. Find out how to become a programmer who makes...

JavaScript's Lambda and Arrow Functions


Lambda and arrow functions in JavaScript allow for concise and elegant code. Learn how to use them to streamline your code and improve readability.

What's the difference between undefined and not defined in JavaScript


undefined?and?not defined?in JavaScript refer to memory space in JavaScript, but there is a very clear distinction between them