JavaScript variables, differences - var vs let vs const

var vs let vs const muscle dog meme

Basics

First, let's start with describing variables. A variable can be thought of as an indicator to the computer to associate a value with a particular name, and to keep track of it when it is stored in memory.

Data in a variable bucket This allows for the value to be used in the future for different operations, just by using the name. Variables are one of the key concepts that make up any programming language. They can be described as the building blocks of a language, thus it is important to know about the types and how to use them properly.

Var

"var" keyword is the original way of creating variables in JavaScript. When you use this keyword in front of a name or string, and assign a value to it, you are creating a location in the memory where this particular value is stored.

var example Now the important thing to note about var is that it's function scoped or globally scoped.

What is Scope?

Scope is a common concept in programming languages. Scope essentially means all the places in the program where a variable or a function is visible and thus can be accessed or called.

If a variable is said to be outside a scope, it means the program does not have access to the variable in the scope where it is currently in. The variable might exist somewhere else in the program, but can't be used in the current part of the program.

JavaScript has 3 types of scope:

Block scope
Function scope
Global scope

Var is defined as being function scoped or globally scoped, which means:-

When defined inside a function, var is accessible within it and also inside any inner functions defined in this outer function. This is the concept of closure. In the below example, var 'first' is defined inside the function varScope. It is also visible within any functions created inside varScope (i.e. innerScope). However, var 'second' created inside innerScope is not visible to the outside function as it has the function scope of innerScope.

var scope example code

When defined outside all functions, var variables have global scope, which means they can be accessed anywhere in the program. In the below example, hobby is a globally scoped var and is available to use inside any other functions that are created. This is not the case for the var currentGame, which is function scoped to printGame, where it is created.

var global scope example code

What is var hoisting?

Var hoisting is another peculiar property of var variables. In most cases, it's not very common to see variables being used before they are declared. But this is possible using var, as var declarations are processed before any code is executed.

A way to remember it is like a flag being hoisted to the top, var declarations are also hoisted to the top of the program.

var hoisting example code

There is a very important distinction here - when a var is hoisted, only its declaration is hoisted and not the initialization. The initialization happens only when the assignment statement is reached. Till then the variable remains undefined (but declared).

var hoisting undefined example code

Let

"let" is the second way of declaring variables. Let and const were released with ES2015 (EcmaScript6). Initialization with a value is optional. let declaration

Also, unlike var, let is initialized to a value only when the program reaches the part where it is present.

Let Scope

let variables are created with a block scope, or scope of expression on which it is used. This is unlike the var keyword, which declares a variable globally, or locally to an entire function irrespective of block scope. The below code will help you understand the block scope. A block can be seen as the part of the program between two { }.

let scope example code

Temporal dead zone (TDZ)

Another difference between let and var is that while var variables can be accessed before being declared (as we saw above, undefined is printed if you do this), let variables cannot be read/written until they have been declared.

Without initializing with a value, let variables are given the value as undefined, but accessing the variable before the declaration leads to ReferenceError. This is known as Temporal dead zone, where let variables are in TDZ and accessing them leads to error. TDZ continues till the line where let variable is declared.

TDZ example code Below is what the error will look like: TDZ ReferenceError

Const

"const" was the second form of variable declaration released in ES6 along with let. Const is used as a short form for constant, and does exactly what the word means. It is used for variables that will be constant throughout the program and never change.

It is the same as casting a variable value in cement, instead of just putting it in a box (var & let), as it will stay the same. Its value can't be changed using assignment operators.

const example code

Const variables also can't be redeclared. Const variables also require compulsory initialization with a value.

const redeclaration error

Temporal dead zone (TDZ) applies to const variables as well.

Const scope

Const has a block scope, which works the same way as described above with let.

const scope code example

Const in objects and arrays

Const variable values cannot be changed but this doesn't apply to objects and arrays.

Object keys can be modified, added or deleted
Object key values can be modified and removed

const in obj example

Similarly, in the case of arrays values can be added and deleted from the array:-

const in array example

Difference summarized

Let's summarize the blog with the differences among var, let and const.

var vs let vs const difference

Now coming to what you should use, it's usually a personal preference but ideally, you should avoid using var due to its peculiar behavior at times. Prefer using let for variables that need to be changed and const for those that will remain the same.

That's it from my side, hope you learned something new :) Feel free to reach out to me on Twitter or Linkedin

Re-learning Coding