Block scope, function scope and local scope in Javascript

Question

1. Is block scope sometimes the same as function scope? I know function scope is for everything inside a function, but don't get what exactly a block scope is.
2. For Javascript, is it currently recommended to use let / const instead of var for future maintenance? (This was from Airbnb Style Guide)

Answer 1

I'm not sure you really got your questions answered yet:

Is block scope sometimes the same as function scope? I know function scope is for everything inside a function, but don't get what exactly a block scope is.

Yes, a block scope is sometimes the same as a function scope. Block scope is everything inside a set of braces { a block scope here }. So, at the top of a function's code, a block scope will be the same as a function scope:

function test(x) {
   // this is both a block scope and a function scope
   let y = 5;
   if (x) {
       // this is a smaller block scope that is not the same as the function scope
       let z = 1;
   }
}

For Javascript, is it currently recommended to use let / const instead of var for future maintenance? (This was from Airbnb Style Guide)

let and const are part of the newest ES6 specification and are only implemented in the latest Javascript engines and sometimes in the latest engines they are only enabled with special flags. They are coming to all newer JS engines/browsers, but are not widely deployed yet. Thus, if you are writing Javascript for regular browser consumption across the broad internet, you cannot reliably use let and const yet.

There are some cases where you can safely program with let and const now:

1. If you are targeting only a specific Javascript engine and you know that it has support for those features (such as a specific version of nodejs or a plug-in only for a specific version of a specific browser).

2. If you are using a transpiler that will convert your code to code that will run in all browsers. When using a transpiler, you can write your code using the latest features and the transpiler will "dumb it down" so that your code will work in older browsers by using simulations of the newer features.

If you are programming for an environment where you know that let and const are supported, then it is advisable to use them as appropriate. If you declare a variable at the top of your function, then let and var will do the same thing.

If you declare a variable in a smaller scope within the function, then let will be contained within the smaller scope, but var will be hoisted to the top of the function and will have function scope, no matter where it is declared.

---

The AirBnb Style Guide you linked to is specifically written for an ES6 environment (note there is a separate link for an ES5 version of their style guide). So, that means that they are assuming an ES6 capable environment. That's either because they are targeting a server-side JS engine that they know supports ES6 or because they are using a transpiler that will convert ES6 code into something that will run on an ES5 engine.

---

A note about transpilers. Before using a transpiler and switching all variable declarations to let within block scopes, it is worth understanding what kind of code the transpiler generates and whether the extra code it generates has any effect on the performance of your application. For example, block scope for let is simulated by creating an inline IIFE which can lead to extra run-time overhead for every block that contains a let statement. I'm not saying this is necessarily a bad thing that should keep you from using a transpiler, but when deciding whether to use a transpiler, I'd suggest that you thoroughly familiarize yourself with what the transpiled code looks like for a variety of ES6 features so you know whether it is the right tool for any job you have or only for some jobs.

Answer 2

1. javascript 5 does not use blocked scope it uses chained scope. the main difference is that you cannot access the variable out side of the scope unless you make it global. ES 6 will have blocked scope when you declare a variable with let.
2. currently recommended to use var because ES 6 is not fully supported.

Answer 3

Is block scope sometimes the same as function scope? I know function scope is for everything inside a function, but don't get what exactly a block scope is.

Block scope is everything in side a block, e.g.:

function foo() {
    // function scope
    if (condition) {
        // block scope
    }
}

Up through the 5th edition spec, JavaScript didn't have block scope. The next spec (ECMAScript 6, aka "ES6"), which is very nearly completed, adds block scope via let and const.

For Javascript, is it currently recommended to use let / const instead of var for future maintenance?

That's purely up to you. let and const are new tools you can add to your belt. They don't have to replace var if you don't want them to. That said, you hear "let is the new var" a lot.

Variables declared with let have block scope, ones declared with var do not.

Note that let and const don't have great support in the wild yet. No great surprise, adding block scope to an engine that never had it before is presumably non-trivial. You can use a transpiler like Babel, or just keep using var for now.