When to Use var in JavaScript

Introduction

In JavaScript, the var key phrase is used to declare a variable. It has been part of JavaScript because the language’s inception and continues to be an necessary a part of it, regardless of the introduction of let and const in ECMAScript 6.

On this Byte, we’ll dive into the aim of the var key phrase, the way it differs from let and const, and when to make use of or omit it.

Why Use the ‘var’ Key phrase?

The var key phrase in JavaScript is used to declare a variable and optionally initialize it to a worth. var is function-scoped, that means it is solely accessible inside the perform it is declared in. If declared outdoors any perform, it is globally scoped. This is an instance:

var title = "John Doe";
perform show() {
    var age = 30;
    console.log(title); // Output: John Doe
    console.log(age); // Output: 30
}
show();
console.log(age); // Output: Error: age isn't outlined

Within the above instance, title is accessible globally, whereas age is just accessible inside the show perform.

Variations Between ‘var’, ‘let’, and ‘const’

One of many important variations between var, let, and const is their scoping guidelines. Whereas var is function-scoped, let and const are block-scoped. This implies let and const are solely accessible inside the block they’re declared in.

One other distinction is that var variables will be re-declared and up to date, however let variables can solely be up to date, not re-declared. const variables, alternatively, can neither be up to date nor re-declared.

This is an instance for example this:

var x = 10;
var x = 20; // That is superb

let y = 10;
let y = 20; // Error: Identifier 'y' has already been declared

const z = 10;
z = 20; // Error: Task to fixed variable.

When to Use ‘var’ and When to Omit It

Given the variations between var, let, and const, when must you use var and when must you omit it?

As a rule of thumb, you need to use var whenever you need the variable to be function-scoped or globally scoped. If you would like the variable to be block-scoped, you need to use let or const as an alternative.

Be aware: For those who’re writing code in ECMAScript 6 or later, it is really useful to make use of let and const over var for higher readability and to keep away from potential points with variable hoisting and re-declaration.

This is an instance:

perform varTest() {
    var x = 1;
    if (true) {
        var x = 2;  // identical variable!
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

perform letTest() {
    let x = 1;
    if (true) {
        let x = 2;  // completely different variable
        console.log(x);  // 2
    }
    console.log(x);  // 1
}

Within the varTest perform, x is re-declared inside the if block, however as a result of var is function-scoped, it is really the identical x as outdoors the if block. Within the letTest perform, x inside the if block is a special x as a result of let is block-scoped.

Frequent Errors and Tips on how to Keep away from Them

The var key phrase could be a supply of some widespread errors, particularly for novices. Let’s have a look at a few of these and how one can keep away from them.

First, a standard mistake isn’t understanding the scope of var. In contrast to let and const, var is perform scoped, not block scoped. Which means that in the event you declare a variable with var inside a loop or an if assertion, it may be accessed outdoors of these blocks.

if (true) {
    var x = 5;
}
console.log(x);  // Outputs: 5

To keep away from this, you should use let or const for block-scoped variables.

Secondly, hoisting could cause surprising habits. Hoisting is a JavaScript mechanism the place variables and performance declarations are moved to the highest of their containing scope. Nevertheless, solely the declarations are hoisted, not the initializations.

console.log(y);  // Outputs: undefined
var y = 5;

To keep away from hoisting points, declare and initialize your variables on the high of your scope.

Hyperlink: If you wish to learn extra and have a greater understanding of hoisting, see our article Hoisting in JavaScript.

ECMAScript 5 and ‘var’

Earlier than ECMAScript 2015, also called ES6, var was the one technique to declare variables in JavaScript. ES5 doesn’t help let and const. For those who’re working with an older codebase or must help older browsers that don’t totally help ES6, you may doubtless encounter var.

In ES5, var has two foremost traits that distinguish it from let and const:

1. Operate scope: As talked about earlier, var is perform scoped, not block scoped.

2. Hoisting: var declarations are hoisted to the highest of their containing scope.

perform instance() {
    console.log(z);  // Outputs: undefined
    var z = 5;
}
instance();

Regardless of these variations, var can nonetheless be used successfully in ES5. Simply pay attention to its distinctive traits and potential pitfalls.

Conclusion

On this Byte, we have explored the aim of the var key phrase in JavaScript, the way it differs from let and const, and when to make use of or omit it. We have additionally highlighted some widespread errors related to var and easy methods to keep away from them. Lastly, we have touched on the function of var in ECMAScript 5.