Why shouldn't use Var in JavaScript.
Tags: javascript, var, beginners, webdev
Published: 2024-03-26 10:15:59

In JavaScript, we need to declare variables. There are three ways to declare variables using the keywords var, let, and const. However, what are the differences, and when should we use each one? Why shouldn't we recommend using var?

Let's discuss.

## <u>**Var:**</u>

To understand `var`, it's important to know about a global object. In browsers, there is a global object named `window`. First, let's take a look at the `window object`.

![window object in browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7ukrgrvaibrzbbnrrmz.png)

### <u>Characteristics of `var`:</u>

- Variables declared using `var` work in both global and function scope.
- `var` variables can be re-declared.
- `var` variables can be reassigned.
- `var` variables can hoisted.

Let's now declare a variable using the `var` keyword.

```js
var a = 10;
var b = "hello";
function test1() {}
var test2 = () => {};
```

When we declare a variable using `var`, outside any function, it gets appended to the `window` object. So, after declaring a variable using var, if we log window, we can see that it contains the variable.

![how var variable append with window object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfvzwddpe1gkci65f03c.png)

What we can understand from that example is that `var` works as a global variable declaration. When we declare a variable using var, it is set as a global scope variable, meaning it becomes a property of the global object (`window` in the case of browsers). This can lead to unintended consequences and potential issues with variable scoping and accidental variable reassignment.

### <u>What is scope?</u>

Scope refers to the context in which variables are defined and can be accessed. It determines the visibility and lifetime of variables within a program.
<br/>


### <u>`Var` problems with scope:</u>

So declaring a variable with `var`, it works in global scope and function scope, but it has no effect on block scope.

```js
var message = "First message";
if (true) {
  var message = "Second message";
}
console.log(message); // "Second message"
```

In the above example, when we declare the message variable within the if block, it actually overrides the global variable `window.message`.

![how var variable append with window object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnf7ftfn20vqe4nlw522.png)

### <u>Var problems with reassignment:</u>

At times, when we want to keep certain values fixed, like the value of PI. But when using var, these values might accidentally get changed or overwritten, which can be risky.

```js
var valueOfPI = 3.1416;
console.log(valueOfPI); // 3.1416
/* 
Other codes 
-- ---- - ----
----------------
--- 
---------
---------------------
*/
/* 
Other codes 
-- ---- - ----
-------
--- 
------
*/
valueOfPI = 99;
console.log(valueOfPI); // 99
```

### <u>Var problems with re-declaration :</u>

Again when we use `var` we can redeclare a variable with the same name.

```js
var message = "Message A";
console.log(message); //  "Message A"
var message = "Message B";
console.log(message); //  "Message B"
var message = "Message C";
console.log(message); //  "Message C"
```

This situation can make the code-base riskier because in a lengthy code-base, variable modifications like this may occur without throwing any errors, making debugging more complex.

### <u>Var problems with hoisting :</u>

Hoisting is a term in JavaScript where all variable and function declarations within a scope are moved to the top of that scope. In the case of `var`, variables are declared with the value `undefined`.

```js
console.log(message); // undefined
var message = "hello with var";
```

It works like:

```js
var message = undefined;
console.log(message); // undefined
message = "hello with var";
```

Accessing a variable its before declaration indeed lead to confusing and weird behavior during the execution. And `var` don't have any [Temporal Dead Zone (TDZ)](https://umarfarooquekhan.medium.com/what-is-the-temporal-dead-zone-in-javascript-and-how-does-it-relate-to-let-and-const-33c93c1df291) like `let` or `const`.

## Q: Is there any way to use var as block scope?

The direct answer is no, you can't directly achieve block-scoping with var. However, you can achieve it indirectly by using Immediately-Invoked Function Expressions (**IIFE**).

**An IIFE is a type of function that is created and invoked immediately after its creation.**

After wrapping `var` variables in an IIFE, they behave as if they are in block scope. If we try to access these variables outside the IIFE, it will throw a `ReferenceError`.

```js
// IIFE using arrow function
(() => {
  var a = 10;
  console.log(a); // 10
})();
console.log(a); // ReferenceError: a is not defined
```

```js
// IIFE using traditional function
(function () {
  var b = 10;
  console.log(b); // 10
})();
console.log(b); // ReferenceError: a is not defined
```

As we know, `var` is function-scoped. To achieve block scope functionality, we create a function and immediately invoke it. As a result, all variables and functions within that Immediately-Invoked Function Expression (**IIFE**) will only exist within its scope, and we can't access them outside of that function. This creates a block scope illusion.

### <u>Conclusion:</u>
To solve all these problems, ES6 introduced two new ways to declare variables: let and const, which are safer than var.


-------------------------

Thanks for reading. If this information is helpful to you, please consider following me. If you have any questions or would like to discuss any other topic related to web development or JavaScript, feel free to comment below.