A collaborative website about the latest JavaScript features and tools.
Send a Post

*using github

Jaydson Gomes
Posted by
Thu Aug 28 2014 01:58:23 GMT+0000 (UTC)

What you need to know about block scope - let

Variables declaration in any programming language are something pretty basic.
Regardless the language, understanding how variable scope works is essential to write any kind of program.
In Python, for example, as well as in most languages​​, there are two scopes: Local and Global.
Variables defined at the top of the file, without identation, are global scope variables.
Variables declared inside the function body are considered as local scope.
So far, everything is very similar. In JavaScript, the behavior is quite similar.
Let's see one example in both languages:

# Python
x = 1 # global scope
y = 3

def sum(a, b):
    s = a + b # local scope
    return s
// JavaScript
var x = 1;  // global scope
var y = 3;

function sum(a, b) {
    var s = a + b;  // local scope
    return s;
}

In most C-based languages(JavaScript, PHP), variables are created at the spot where they were declared.
However, in JavaScrpt this is different, and can become complicated.
When you declare a variable in the body of a function, it is moved to the top or to the global scope. This behavior is called hoisting.
Unlike Python and other languages, in JavaScript, a variable declared in a for loop leaks its value.
See the example below:

// JavaScript
for (var i = 0; i <= 2; i += 1) {
    console.log(i); // current i
}
console.log(i); // last i

In this case, even outside of the for loop block, the variable i is still there, with the last value stored.
This is a pretty common issue where a program can be easily broken by lack of attention.
Another important factor in JavaScript is that the omission of var to declare a variable causes it to be allocated in the global scope, and this can cause many problems.

let declaration

The let arrives in ES6 as a substitute for var. Yes, the idea is that var will be discontinued in a distant future, because today it would be impossible completely stop supporting it without breaking the whole internet.
The let works as expected, setting the variable in the place where it was declared.
Example:

let foo = true;
if  (foo) {
    let bar = 'baz';
    console.log(bar); // outputs 'baz'
}

try {
    console.log(bar);
} catch (e) {
    console.log("bar doesn't exist");
}

As you might imagine, let solves the problem with the variable in the for loop.
See:

// JavaScript
for (let i = 0; i <= 2; i += 1) {
    console.log(i); // current i
}
try {
    console.log(i);
} catch (e) {
    console.log("i doesn't exist");
}

Support today

You can use let today*
Check out the awesome Kangax ES6 table > https://kangax.github.io/compat-table/es6/#.
let is currently supported by the modern browsers (even IE11) in theirs last versions and Traceur as well.
You can try ES6 let on Firefox devtools:

let on firefox nightly

  • NOTE: As well pointed by Michał Gołębiowski on the comments below, browsers implementations are not fully according with the spec, so you may find some bugs.
    For real world applications, you'll need to use a traspiler (at least, for a while until mid 2015).

Conclusion

Although simple, declaring variables in JavaScript can cause headache for beginners in the language.
With let, to declare variables is much more intuitive and consistent with a C-based language.
The use of var should be discontinued, and only the let must exist in the future.
There's no hoisting behavior for variables declared with let.

icon comments

Comments

comments powered by Disqus