An exploration of JavaScript's variable declaration keywords (Part 1/3)

With the creation of ECMAScript, JavaScript's days of being derided as a "loose" scripting language have come to a halt. Well, not really, but at least proponents of a variable definition stronger than the traditionally-used keyword var have had their prayers answered in the form of let and const, in 2015.

This post is maybe five years too late, but what the hell. Today, we're going to take a look at those.

The keyword var

This is used to declare variables. They can be declared just about anywhere.

var a;

console.log(a);

undefined

var a = 5;

console.log(a);

5

You can access a before even declaring it. Although, I really can't think of a reason why you'd want to.

console.log(a);

var a;

undefined

If you declare a variable twice using var, it will take the most recent value assigned to it.

var a = 5;
var a = 10;

console.log(a);

In this case, it's 10.

10

Let's try this again, explicitly declaring a again, and setting the value to undefined.

var a = 5;
var a = undefined;

console.log(a);

So far so good.

undefined

But what if the second time, you didn't specify a value?

var a = 5;
var a;

console.log(a);

In this case, it's 5. JavaScript uses the most recent value assigned to a.

5

JavaScript assigns the default value of undefined to all variables that haven't been declared, or declared but not assigned a value. This is known as hoisting.

undefined

A variable can be declared using var inside a block...

var a = 5;

if (a > 5)
{
    var b = a;
}
else
{
    var b = a + 1;
}

console.log(b);

6

... then redefined outside of the block.

var a = 5;

if (a > 5)
{
    var b = a;
}
else
{
    var b = a + 1;
}

var b = 10;

console.log(b);

10

Just for good measure, try this!

for (var i = 0; i < 5; i++)
{

}

console.log(i);

You'll notice that you can access i outside of that For loop! That's because the For loop is a block.

5

var can be used to declare a variable outside of a function, then accessed within that function.

var a = 10;

function x()
{
    a = 0;
}

x();

console.log(a);

0

However, if var is used to define a variable inside of a function, it cannot be accessed outside of it.

function x()
{
    var a = 0;
}

x();

console.log(a);

This is the error that will be produced.

Uncaught ReferenceError: a is not defined

You can use var to redeclare a outside of the function and assign a value to it.

function x()
{
    var a = 0;
}

x();
var a = 5;

console.log(a);

5

What we've learned

var is function-scoped. Thus if a variable is declared inside a function, it cannot be accessed outside of it.

Any variable declared using var can be redeclared. This can lead to confusing scenarios. The looseness of JavaScript can be a boon in the sense that it's very forgiving, but in large-scale scripts, this can make errors hard to detect.

If JavaScript is the only language you have ever used, you probably won't think much about this. But if you learned other languages before this, var's behavior will seem really nonstandard and inconsistent to you. It's predictable enough; you just need to understand the rules behind it.

Next

Examining the let keyword.