Variable in JavaScript has value without specifying it

In JavaScript for certain variable names, a quite confusing situation can happen due to the various scopes present in the language. Let’s start off with some examples where we see the expected outcome and reach some interesting points from there. We have placed all the example code at the root of a JS file (so it is not inside any block).

var firstName = 'John';
var lastName;
console.log(firstName);
console.log(lastName);

The output of this is not surprisingly the following.

John
undefined

The first one contains a string we have specified and the second one prints undefined as we have not specified any value.

What if I declare a variable called “name”, but don’t assign a value to it?

var name;
console.log(name);

Surprisingly, it will contain an empty string. We’ll see why at the end, but until that let’s see another example.

What happens if I assign “John Doe” to the variable, and rerun my program?

var name = 'John doe';
console.log(name);

It will, of course, print “John Doe”. Nothing surprising. But what if I update the code to the following and refresh the page?

var name;
console.log(name);

This is what we see after the refresh:

John Doe

Wow! Our variable has the value we have previously set, although it’s not even in our code anymore.

Explanation

The first surprising outcome happened because the window object has a property called “name”, which contained an empty string. This is what is returned because we were using the “name” variable from the global scope. So what is the window object exactly?

The window object is supported by all browsers. It represents the browser’s window. All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are properties of the window object.

So, even before one line of our code executed, the “name” global variable already had an empty string as value. That is what we got back.

The other weird outcome is also because of the window object’s “name” property. This property is persisted between page refreshes and it is only cleared when the browser window is closed. This is why it still contained the value we have removed.

The conclusion we can draw here is that besides the JavaScript keywords (e.g. delete, var) that you cannot use for variable names, there are some other names that should not be used because of their unexpected side effects.

Of course, using global variables is not a good idea 99% of the time. But this won’t stop anyone from using them. They are especially common for practice code when we just quickly trying out something, and this is a good opportunity for beginners to have some headaches due to the above issue. So guys, be careful with your variable naming!

Specifying the tab order of HTML elements using the tabindex attribute

As you probably know you can use the TAB key to go through certain elements (most commonly forms fields) on a web page. By default, each HTML page has a tabbing order that matches the order of the elements in your markup. So if an element on the page gets focus and you press the TAB key, the next element that receives focus will be the one that is next to it in the markup and is considered tabbable by default by the browser.

The tabindex attribute can be used to change this order. In HTML5 it can be specified on any element, however it is not necessarily useful in all cases. Let’s see a simple exampale where the tabindex attribute is used to change the order of tabbing on a simple form:

<form>
    First name:<br>
    <input type="text" name="firstname" tabindex="1">
    <br>
    Last name:<br>
    <input type="text" name="lastname" tabindex="-1">
    <br>
    Email:<br>
    <input type="text" name="email" tabindex="3">
    <br>
    Password:<br>
    <input type="text" name="password" tabindex="2">
</form>

By default, tabbing would take you through the input fields in the order they are defined. We changed this order by specifying the tabindex attribute. At first the “First name” field will be focused, then the “Password”, and lastly the “Email”. The “Last name” field won’t be focused. To understand the reason for this behaviour, lets see how the tabindex is taken into account.

If you specify the tabindex attribute on at least one element on the page, the tabbing will occur in the following manner:

  1. The elements that have a positive tabindex specified will be selected in increasing tabindex order.
  2. If we reach the last element that has a tabindex, then next the elements without tabindex will be focused in the order they are defined in the markup.
  3. The elements that are not tabbable by default (e.g. a div) or have a tabindex of -1 will not be selected at all.

A lot of HTML elements are not tabbable by default, but by specifying a tabindex for them they will get included in the tabbing order.

When you are specifying tabindex for your elements it’s a good idea to leave some room between each index. This way, if you have to insert some new elements in the tab order, you don’t have to adjust the tabindex of other elements. So from this perspective the tabindexes 10,20,30,40 are better than 1,2,3,4.