JavaScript – hoisting, var, let, const
This post is a quick summary of the differences in JavaScript variable declaration.
Before ES2015 (previously named ES6), there was only one keyword to declare variables: var. The newer standard introduced two extra useful keywords: let and const.
Briefly:
vardeclares “almost global” variablesletdeclares block variablesconstdeclares block read-only variables
Explanation follows.
Table of contents
By the way, I’ve put together a small collection of tools I use regularly — things like time tracking, Git helpers, database utilities, and a few others that make development a bit smoother.
Hoisting
There is something irrational about how JavaScript freed variables. It is possible to use variables without any declaration keyword! So it’s perfectly legal (but not the best idea) to write: a = 3.
What’s more confusing, it is legal to write:
The declaration in line 3 does absolutely nothing and does not protect before using an undeclared variable a in line 1.
Fortunately, that trick will not work the let or const – an error will be thrown that you tried to access the variable before initialization.
var
Variables declared with var in global scope are available everywhere.
Variables declared with var inside a function are accessible only in that function, but in any (even higher) block:
That’s crazy… Forget about var for your sanity!
let
Variables declared with let are available only in this and deeper blocks. This is how it should work:
const
Variables declared with const are not variables but constants ;). They behave alike let in terms of scope, but their values cannot be modified. An attempt to change the value will throw an error.
Why and when to use variables that cannot be modified? All the time, actually!
This is a protection against making mistakes in code and changing values that were not supposed to be changed. It turns out that there are many variables that should not be changed – when you want to store a return value from other function, you usually do not modify it, just reuse it. This concept of using immutable values comes from Functional Programming and is a great idea to follow to make the code cleaner. In functional programming it’s more strict – imagine you cannot change any variable’s value, you can only return new values through functions…
It’s worth remembering what const guards in JavaScript: only changing an assignment to the variable. So it is not possible to assign another value to a constant, but it is still possible to change that constant’s property, for example:
Summary
var | let | const |
function test() {
var a = 1;
if (true) {
var a = 4;
console.log(a); // 4
}
console.log(a); // 4
}
test(); | function test() {
let a = 1;
if (true) {
let a = 4;
console.log(a); // 4
}
console.log(a); // 1
}
test(); | function test() {
const a = 1;
if (true) {
const a = 4;
console.log(a); // 4
}
console.log(a); // 1
}
test(); |