We code the web

Var, let or const, what to use?

The Javascript world has grown, a lot. Instead of a simple scripting language, it is now used as a full blown programming language for the web. Not to forget it’s server side capabilities with NodeJS. ECMAScript 6 brings some features to make Javascript a more ‘mature’ language. A good example is the new let and const variable types.

What is the difference and which one should you use? Well, the ‘old’ var variable declaration used to be function scoped. To show what this means, we will use a little code example:

1
2
3
4
5
6
7
8
9
10
11
12
if (true) {
var a = 3;
}
function f() {
var b = 5
}
f();
console.log(a); // => 4
console.log(b); // => undefined

In the example above we can see that a is 4, but b is _’not defined’. _Variable b is only known inside function f, not outside of it. Variable a however is known outside of the if statement.

A code block is essentially a ‘group’ of statements, enclosed in {} curly braces. They are mostly used in if/else statements and loops. You could see a function als a kind of special code block stored in an object, it behaves differently.

Let and const are block scoped, meaning that they are only known inside the code block they were defined in. Let’s see how that works:

1
2
3
4
5
6
7
8
9
10
11
12
if (true) {
let a = 3;
}
function f() {
let b = 5
}
f();
console.log(a); // => undefined
console.log(b); // => undefined

As you can see, let is undefined outside of functions and code blocks (like an if statement). Const works exactly the same, but it has an extra property, it cannot be changed, as the following example will show:

1
2
const a = 3;
a = 5 // => Error!

Currently most browsers do not check for constant reassignment. Only Firefox will throw an error if you do this. Also some javascript code linters detect disallowed const assignments.

So what should you use? Well, accessing variables declared inside a code block from outside the code block, is a bad practice. It indicates code smell and you probably should refactor. I would advice only to use let and const. Consider var ‘legacy’ in ES6. Try to always use const if you don’t need to reassign the variable. You will see that you can use const a lot more then you think. This improves code readability, because it tells the reader how the variable is going to be used. If it is a let, it is probably going to be re-assigned. If it is a const, it is going to be used as read-only.

So that’s it! Rember: var is function scoped, let and const are block scoped, where const is read-only after declaration. Happy coding!

Related posts

Async ... await in Javascript

We’ve all been through callback hell, maybe we use Promises and Observables to get some relief. Will async await liberate us once and for all?

ES6 Destructuring

Destructuring must be my favorite feature of ECMAScript 6. I don’t exactly know why, I guess I just like the simplicity. It makes your code more clean and declarative.

Flux, what and why?

If you are into front-end development, you’ve probably heard or read the term ‘Flux’. What does it mean and why should you care?