Let, Var & Const

Variable declaration is one of the easiest tasks in every programming language. However, when it comes to JavaScript, it can become a bit tricky due to the special features of the language. But don't worry, we've got you covered. Let's dive into the world of variable declaration and catch all the fishes in the ocean.

Feeling puzzled? Keep reading rest of the article.

Did you Know?

What is ECMAScript?

Have you ever heard someone referring to JavaScript as ES6 or ES7 and felt confused about it?

Let me introduce you to another name for JavaScript, i.e., ECMAScript. Yes, you heard it right, the official name of JavaScript is ECMAScript. So, what do those numbers (ES6, ES7, etc.) signify? JavaScript was created more than 25 years ago, and since then, it has undergone significant evolution. Numerous new features and syntax have been added to JavaScript over the years. Initially, it took years to introduce new features to the existing language. However, modern JavaScript is updated annually with the addition of new features. JavaScript ES6 is the version of JavaScript that was released in 2015, and many major changes to the Javascript standard came with Javascript ES6.

Until 2015, Javascript versions were named by version number like ES1, ES2, ES3, etc., ES6 was the last Javascript version to be named in this way, and before the end of 2015 ES6 was renamed to ES2015 (ECMAScript 2015).

The impact of ES6 implementation on the JavaScript standard was significant. Thus, in modern times, JavaScript is also commonly referred to as ES6. While there have been more versions of JavaScript released since ES6 — which we'll discuss later — none have gained as much prominence within the developer community as ES6.

After JavaScript ES5, JavaScript ES6 was introduced nearly 6 years later. ES6 arrival modernized the capabilities for web development in the 2010s, making programming in JavaScript more efficient and easier.

There is no "ES7" or "ES8" officially even though multiple annual naming conventions were conducted after 'ES6' because, 'ES6' is considered as a legacy name and thus modern JavaScript is also known as 'ES6' or sometimes 'ES2015'.

var The var keyword was the traditional way of declaring variables in JavaScript. Variables declared with var are function-scoped or globally-scoped but not block-scoped. This means that variables declared with var are hoisted to the top of their function or global scope. This hoisting behavior can sometimes lead to unexpected results and make debugging challenging.

var is function scoped When we declare a variable using var inside a function, we cannot access the variable outside the function.

Let's understand through an example:

index.js

function example() {
    var x = 10;
    console.log(x);
}

example();       // 10
console.log(x);       // Throws ReferenceError: x is not defined
Reassignment and Redefinition using var
In JavaScript, the var keyword allows variables to be both reassigned and redefined within the same scope, 
unlike let which only allows reassignment.
 This behavior of var can sometimes lead to unexpected results and bugs in code if not used carefully.

Let's see an example :


index.js

// Re assignment using var var x = 10; console.log(x); // Output : 10

x = "Mayank"; console.log(x); // Output : Mayank

index.js

// Re definition using var
var x = 10;
console.log(x);    // Output : 10

var x = "Mayank";
console.log(x);    // Output : Mayank
var has some quirks and drawbacks, especially related to variable hoisting and its lack of block scope. Due to these issues, let and const were introduced in ES6 (ECMAScript 2015) to provide better variable scoping mechanisms. It's generally recommended to use let and const instead of var in modern JavaScript code, unless there's a specific reason to use var.

let
In JavaScript, the let keyword is used to declare variables that are block-scoped, meaning they are only accessible within the block in which they are defined. Block scope refers to any code block delimited by curly braces {} such as loops, conditionals, or function bodies.

Let's consider an example :


index.js

let x = 10; if (true) { let y = 20; console.log(x); // Output: 10 console.log(y); // Output: 20 } console.log(x); // Output: 10 console.log(y); // Throws ReferenceError: y is not defined Reassignment and Redefinition using let Variables declared with let can be reassigned, just like those declared with var, but they cannot be redeclared within the same block scope. This helps prevent accidental redeclaration of variables and can aid in writing more predictable and maintainable code.

Let's consider an example :

index.js

// Re assignment using 'let'

let x = 10;
console.log(x);    // Output : 10

x = "Mayank";
console.log(x);    // Output : Mayank

index.js

// Re definition using 'let'

let x = 10;

let x = "Mayank"; console.log(x); // Output : Error! const In JavaScript, the const keyword is used to declare constants. Constants are variables whose values cannot be reassigned once they are initialized. This means that once a value is assigned to a constant using const, it cannot be changed or reassigned throughout the execution of the script.

Here's a basic example of using const:

index.js

const x = 20;
console.log(x);      // Output : 20

x = 30;
console.log(x);      // Output : Error!
Constants declared with const must be initialized with a value. Unlike variables declared with var or let, which can be declared without immediately assigning a value, const requires initialization at the time of declaration.

Example :


index.js

let x; // No Error

var y; // No Error

const z; // Error! "Missing initializer in const declaration" It's important to note that while the value assigned to a constant cannot be changed, if the value is an object or an array, its properties or elements can still be modified. This is because const only prevents reassignment of the variable itself, not its properties or elements.

Example :

index.js

const person = {
    name: 'Mayank',
    age: 21
};

console.log(person.name);    // Output: Mayank

// Modifying object properties is allowed
person.name = 'Love';
console.log(person.name);    // Output: Love

// Attempting to reassign the variable will throw an error
person = {};    // Throws TypeError: Assignment to constant variable.
Similarly with arrays...


index.js

const numbers = [1, 2, 3]; console.log(numbers); // Output: [1, 2, 3]

// Modifying array elements is allowed numbers.push(4); console.log(numbers); // Output: [1, 2, 3, 4]

// Attempting to reassign the variable will throw an error numbers = []; // Throws TypeError: Assignment to constant variable. It is important to remember that for complex data types like objects and arrays, const only prevents reassignment of the variable itself, not its properties or elements.

Conclusion Welcome to JavaScript! I hope you enjoyed this article. Understanding variable declaration is crucial for grasping the basics, which will be indispensable on our development journey.

Thanks for sticking with us until the end. See you in the next article!

Keep learning! :)