Scoping Variables With A Block Statement

A block is simply any code wrapped in curly braces { }.

In JavaScript, you can use block scope and the let keyword to your advantage by defining variables that are only available to a block rather than polluting the global scope.

Let's look at two examples:

const dateStr = "2020-05-04";
var [year, month, day] = dateStr.split('-');

// 'year' accidently gets redefined on the global scope
var year = "1982";

let parsedDate;
parsedDate = Date.parse(year, month, day);
console.log(parsedDate);

// Expected: 1577836800000
// Actual:   378691200000

The year varibale is available on the global scope and could easily be redefined causing an unexpected final result.

Here's how block scope can fix this.

const dateStr = "2020-05-04";
let parsedDate;
var year = "1982"; // Gloabl year variable

{
  let [year, month, day] = dateStr.split('-');
  parsedDate = Date.parse(year, month, day);
}

console.log(parsedDate);

// Expected: 1577836800000
// Actual:   1577836800000

We now have a global year variable and block scoped year, month and day variables. Assigning a value to parsedDate is handled within the block scope so the actual result matches our expected result.

That's me!

I’m Ajay Karwal. I write about my experiences as a front-end developer. If you enjoy my content, please consider supporting what I do.

Become a PatronBuy me a coffee