JavaScript – hoisting, var, let, const

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:

  • var declares “almost global” variables
  • let declares block variables
  • const declares block read-only variables

Explanation follows.

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:

JS

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:

JS

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:

JS

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.

JS

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:

JS

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();

Leave a Reply

avatar
  Subscribe  
Notify of