DEV Community

Amit Verma
Amit Verma

Posted on

Difference between var, let and const in JavaScript

In JavaScript, the keywords var, let, and const are used to declare variables, but they have some key differences in terms of scope, hoisting, and mutability. Here's a brief explanation of the differences between these three variable declarations:

var: The var keyword has been used in JavaScript for a long time. Variables declared with var are function-scoped, meaning they are accessible within the function in which they are declared. If a variable is declared with var outside of any function, it becomes globally scoped and can be accessed throughout the entire script. One important thing to note is that variables declared with var are hoisted, which means they are moved to the top of their scope during the compilation phase.

Example:

function exampleFunction() {
    var x = 10;
    if (true) {
        var y = 20;
        console.log(x); //Output 10
    }
    console.log(y); //output 20
}
exampleFunction();
Enter fullscreen mode Exit fullscreen mode

let: Introduced in ECMAScript 6 (ES6), the let keyword allows the declaration of block-scoped variables. Block scope means the variable is only accessible within the nearest pair of curly braces {} where it is declared. Unlike var, let variables are not hoisted to the top of their scope. They are only accessible after their declaration statement. Additionally, let variables can be reassigned new values, but their scope remains within the block where they are defined.

Example:

function exampleFunction() {
    let x = 10;
    if (true) {
        let y = 20;
        console.log(x); // 10
    }
    console.log(y); // ReferenceError: y is not defined
}
exampleFunction();
Enter fullscreen mode Exit fullscreen mode

const: Also introduced in ES6, the const keyword is used to declare constants. Constants are block-scoped and cannot be reassigned after declaration. This means that once a value is assigned to a const variable, it cannot be changed. Like let, const variables are also not hoisted and are only accessible after their declaration statement.

Example:

function exampleFunction() {
    const x = 10;
    if (true) {
        const y = 20;
        console.log(x); // 10
    }
    console.log(y); // ReferenceError: y is not defined
}
exampleFunction();
Enter fullscreen mode Exit fullscreen mode

In summary, var is function-scoped and hoisted, let is block-scoped and not hoisted, and const is block-scoped and immutable. It is recommended to use let and const over var due to the more predictable scoping behavior they provide. Additionally, using const for variables that should not be reassigned helps to write more robust and error-free code.

It's important to note that the scope and behavior of these keywords may change depending on whether they are used in the global scope, function scope, or inside other constructs like loops or conditionals. Understanding variable scoping and the differences between var, let, and const is crucial for writing clean and reliable JavaScript code.

Thanks for reading.
Happy coding

Top comments (0)