JavaScript The Old “var”

In this chapter, we represent the old scripts. It’s not about writing new codes.

Let’s start at the very beginning.

As you have already learned, there are three main ways for variable declaration:

const
let
var

The var originates from ancient times and is different from the other two. In general, it is not used in modern scripts, because variables declared with the var keyword have either global or function scope, but they do not exhibit block-level scope. Consequently, when a variable is declared within a loop or an if statement, it can be accessed and potentially redefined outside of that block, which may result in unintended behavior and a malfunctioning program.

var may seem similar to let, as it can declare a variable.

For instance:

Javascript variables

function welcomeSite() { var siteMessage = "Welcome to W3Docs"; // local variable, "var" instead of "let" console.log(siteMessage); // Welcome to W3Docs }welcomeSite(); console.log(siteMessage); // Error, siteMessage is not defined

There are notable differences.

First and foremost, the variables that var has declared are either global or function-wide. You can see them through blocks:

Javascript variables

if (true) { var answer = true; // use "var" instead of "let" } console.log(answer); // true, the variable lives after if

The code blocks are ignored by var. Hence there is a global variable answer.

If you apply let answer instead of the var answer, it can be possible to see the variable only inside the if.

For example:

Javascript variables

if (true) { let answer = true; // use "let" } console.log(answer); // Error: answer is not defined

The same is for loops:

Javascript variables

for (var i = 0; i < 10; i++) { // ... } console.log(i); // 10, "i" is a global variable, it's visible after loop

In case the code block is inside a function, the var transforms into a function-level variable, like this:

Javascript variables

function welcomeSite() { if (true) { var siteMessage = "Welcome to W3Docs"; } console.log(siteMessage); // works } welcomeSite(); console.log(siteMessage); // Error: siteMessage is not defined

The var declarations are processed at the start of the function. So, it would be best if you define the var variables at the start of the function.

It is visualized in the example below:

Javascript variables

function welcomeSite() { siteMessage = "Welcome to W3Docs"; console.log(siteMessage); var siteMessage; } welcomeSite();

It is possible to hoist declarations, but not the assignments.

It is demonstrated in the example below:

Javascript variables

function welcomeSite() { console.log(siteMessage); var siteMessage = "Welcome to W3Docs"; } welcomeSite();

The line var siteMessage = "Welcome to W3Docs" consists of two actions:

Declare variable var
Assign variable =.

The declaration is processed at the beginning of the function execution. On the contrary, the assignment works at the place it comes out. The code works as follows:

Javascript variables

function welcomeSite() { var siteMessage; // declaration console.log(siteMessage); // undefined siteMessage = "Welcome to W3Docs"; } welcomeSite();

IIFE

As initially existed only var having no block-level visibility, the developers created a way of emulating it. The invention was named “immediately-invoked function expressions” (IIFE). Of course, you shouldn't use it at present but can find it in older scripts. It looks like this:

Javascript variables

(function () { let siteMessage = "Welcome to W3Docs"; console.log(siteMessage); // Welcome to W3Docs })();

In the example above, a Function Expression is made immediately. Hence, the code invokes at once having its private variables.

Summary

After learning what var is, you may have a better perception of old scripts in general.

There exist two significant differences of var compared with let and const:

There are not any block scopes for the var variables. They have minimum visibility at the function level.
The declarations of var are processed at the beginning of the function.