Block-level Scope, is one of the new feature that was added to ECMAScript 2015 (formerly known as ECMAScript 6).
In ECMAScript 5 the only scope available to a variable is the function scope. So, the variable are seen in the whole function.

Variable Hoisting

Another feature that JavaScript has is : "Variable Hoisting", which means a variable can be used before it is defined.
So, code like this will work fine:
x = 5;
alert (x);
var x;

What does Hoisting do?

Hoisting is a JavaScript process where the Javascript interpreter will look for any variable declaration inside a function and move it to the beginning of the function.
How that effect our code?

Some Hoisting magic

Let us write a tricky code to show the effect of scope combined with hoisting:
var back_color = "red";
(function() {
    if (typeof back_color === "undefined") {
        var back_color = "yellow";
        alert (back_color);
    } else {
        alert (back_color);
    }
What will the code above show in the alert box?
To the surprise, the above code will show "yellow".

But Why?

The reason for that weird behaviour is that JavaScript (until ECMAScript 5) will move the variable declaration of back_color inside the function to the beginning of the function, keeping the assignment where it is. So the JavaScript interpreter will run this code
var back_color = "red";
(function() {
   var back_color;
   if (typeof back_color === "undefined") {
        back_color = "yellow";
        alert (back_color);
   } else {
        alert (back_color);
   }

So what changed in JavaScript 6?

Coming back to ECMAScript 2015, and as we mentioned in the beginning that the new ECMAScript is going to add block level scoping but with a new statement called "let" which means that if you run the first code replacing var with let inside a browser that support new JavaScript, then the browser will show "red" as a result, because the second variable declaration will be limited inside the scope of if statement.