To Var or not to Var

To var or Not to var

Introduction

JavaScript is changing all the time. With these changes there comes a lot of improvements. It is important we familiarize ourselves with these changes. An important change that occurred a a few years ago was the addition of two new variables: const and let.

The addition of these two new variables helps to address some common issues in JavaScript. Without going into too much depth I would like to just demonstrate one use case where using let instead of the more popular var is a better option.

Example with var

Take a look at the first example. This involves a common task of selecting a list of items. Although very common, a lot of new developers get tripped up by this seemingly simple exercise. As you know JavaScript (like most programming languages) are zero indexed. That means in programing we begin counting from zero and not one.

So when you click on the first item in the list you should get zero. But instead you get 3!!!

Try clicking on the other items in the list.

Confound it!!!

3 Again!?

Var is the problem!?

I am zero
I am one
I am two

Take a look at the code for this exercise. What is going on here? Why is it not working?

A vary common problem...

The reason this code does not work the way it is intended to is because of scope. The var variable keyword is lexically scoped (that means it depends on where you write it in your code). It is also sometimes called functionally scoped. That just means if you declare it in a function it can not be accessed from outside the function.

So now when you call alert(i) you are accessing the value of i as it appears in the completed loop. Here i represents the number of items that were looped through. In this case 3. So no matter what item in the list you click you will keep accessing the i within the loop and not the value of the list item.

Make sense?

I hope so...

Example with let

The solution to this common problem is surprisingly simple.

Try clicking on the list of items below....

Lets see if it works now.

I am zero
I am one
I am two

Now take a look at the code sample. The only change to the above code is the substitution of var with let.

Let to the rescue!

And now it works. But why?

Again the issue is scope. let amongst other things is block scoped. That means that the value of i in the loop is bound to the loop and it can not be accessed from without the loop. So when you click on an item the i accessed from alert(i) is now not over-ridden by the i in the loop. Instead it accesses the i in items[i].

Conclusion

JavaScript is improving all the time. If you are facing an issue with your code, chances are there is a newer and better way of doing it. Embrace all the new developments in the language. They are there to assist you in addressing common pitfalls.

Bonus code

Learning to code is fun. But theory without usefulness is boring.

So in the spirit of being practical. Here is a little code example to show how this lesson can be applied.

Click on the x to delete the item from the list.

x deletes the spot

I am zero x
I am one x
I am two x

Here is the code for your convenience.