Const vs Var vs Let: When and where to use them?

In JavaScript, const, var, and let are three keywords that are used to declare variables. These keywords are used to specify the scope and lifetime of the variables that they declare, and they also have different rules for reassignment and redeclaration. Understanding the differences between these keywords and how they are used can be important for writing effective and efficient JavaScript code.

So, today, we're just gonna do that :)

Const

const is a keyword that is used to declare a constant variable. Such a variable is one that cannot be reassigned or redeclared once it has been declared. This means that once a variable has been declared using the const keyword, its value cannot be changed, and it cannot be redeclared within the same scope. For example:

const x = 5;
x = 20; // this will throw an error, because x is a constant and cannot be reassigned
const x = 20; // this will also throw an error, because x has already been declared as a constant

const variables must be initialized with a value when they are declared, and this value cannot be changed later. However, it is important to note that the value of a const variable can be mutable, which means that it can be modified in place. For example:

const x = [1, 2, 3];
x.push(4); // this is allowed, because x is an array and we are modifying it in place
x = [1, 2, 3, 4]; // this will throw an error, because x is a constant and cannot be reassigned

Var

var is a keyword that is used to declare a variable in JavaScript. Unlike const variables, var variables can be reassigned and redeclared within the same scope. For example:

var x = 10;
x = 20; // this is allowed, because x is a var and can be reassigned
var x = 20; // this is also allowed, because x has already been declared as a var and can be redeclared

var variables do not have to be initialized with a value when they are declared, and they can be declared without being initialized at all. However, it is generally a good practice to initialize var variables with a value when they are declared, in order to avoid issues with undeclared variables.

Let

let is a keyword that was introduced in JavaScript in ECMAScript 6 (ES6) and is similar to var in many ways. Like var variables, let variables can be reassigned and redeclared within the same scope. However, let variables have a different lifetime than var variables, which means that they are only accessible within the block in which they are declared. This is known as block-scoping, and it is similar to the way that const variables are scoped.

For example:

if (true) {
  let x = 10;
  console.log(x); // this will output 10
}
console.log(x); // this will throw an error, because x is not defined outside of the block in which it was declared

let variables can also be used in for loops in a similar way to var variables, and they will be re-initialized on each iteration of the loop:

for (let i = 0; i < 10; i++) {
  console.log(i); // this will output 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
}
console.log(i); // this will throw an error, because i is not defined outside of the block in which it was declared

One major difference between let and var is that let variables are not hoisted, which means that they are not accessible before they are declared. This can be a useful feature in some cases, because it prevents the use of variables before they are defined, which can help to prevent certain types of bugs.

Conclusion

All in all, const, var, and let are all useful keywords for declaring variables in JavaScript, and they each have their own unique properties and features. const is useful for declaring variables that should not be reassigned or redeclared, var is useful for declaring variables that can be reassigned and redeclared and let is useful for declaring variables that have a block-scoped lifetime and are not hoisted.

Whatever you choose to use, choose wisely!

Let's connect!

✨ Twitter

✨ Github