Javascript Variables

The variable is one of the most fundamental concepts in any programming language. The first step towards becoming proficient in JavaScript is having a good understanding of variables.

Variables can be a little confusing, especially to newbie programmers. Even people who are familiar with variables from other programming languages may find JavaScript’s take a little strange. The good news is that JavaScript variables are actually easy to understand.

This tutorial is going to help you achieve just that. We shall start from the basics, and progress to the trickier parts.

Let’s start from the very beginning:

What Is A Variable?

A variable is a way to store information so that you can later use it. What does this mean? To answer this question, let us use an illustration:

Consider the following JavaScript statement:

alert ('Hi Alex, Pleased to meet you');

This will of course pop an alert box with the phrase ‘Hi Alex, Pleased to meet you’. Now, this can be wonderful if Alex visits the page. But what if someone else visited the web page? You wouldn’t want to offend them by calling them Alex, would you?

You can make things simpler by asking for the visitor’s first name, and then offering them a customized greeting. The JavaScript prompt() function can easily give you the name. The statement,

prompt('What is your first name?');

will easily get you the name. But that throws you in a dilemma; how do you store the visitor’s name? The answer is simple, using a variable. Let us call the variable “first_name”. We can store the visitor’s name as follows

var first_name = prompt('What is your first name?');

Don’t mind if you don’t understand the “var first_name =” part of the above statement. You’ll understand it shortly. The point here is that we are storing the visitor’s name in a variable called “first_name”. So, now that we have the name, we can give them a customized greeting:

alert ('Hi ' + first_name + ', Pleased to meet you');

This now gives a customized greeting. You can try it by clicking the button labeled “Check It Out” below. You can try it several times with different names.

Now that you’ve seen a variable in action, let’s go back to our definition:

In our example, the information was the name of the visitor. When we wanted to store it, did so in a variable.

var first_name = prompt('What is your first name');

And how did we use the information? Well, we added it to the text in the alert box:

alert ('Hi ' + first_name + ', Pleased to meet you');

We could have used it in other ways. For example, we could have displayed it alone in an alert box

alert(first_name);

Or written it to the page:

document.write(first_name);

The bottom line is that a variable provides a way to store information. Once you have stored the info, you can use in any way you want. You will see more examples of how to use variables as this tutorials progresses.

Anyhow, since you now know what a variable is used for, let us proceed to how to create variables:

Declaring A Variable

Before you can use a variable, you have to create it. In programming-speak, creating a variable is called “declaring a variable”. In JavaScript, you create a variable using a two step process.

1. Find a name for your variable
2. Transform that name into a variable

Let’s look at each of these steps in detail

1. Finding a Name

Before you can create a variable, you have to make up a name for it. In our example, we came up with “first_name”. But we could have given anything else like “_name”, “mammoth”, “x” or even something nonsensical like “zxsye”.

Basically, you can call your variable whatever you like – as long as you can remember it. However, it is often advisable to give a name which is easily recognizable. A simple rule of thumb is to use a name which is descriptive of what you intend to store in the variable. We called ours “first_name” which is descriptive enough. Another option could have been “firstName”.

We’ll return to the issue of names later. For now, just know that before you can create a variable, you need to find a name for it.

2. Transform the name into a variable

Once you have a name, you need to make it a variable. In JavaScript, you do this by placing the keyword “var” to the left of the name as follows:

var first_name;

The “var” keyword is used to create a variable (or declare a variable). As long as you place “var” to the left of any word, that word automatically becomes a variable. For instance,

var summer;

creates a variable called “summer”,

var interest;

creates a variable called “interest” and so on.

However, a variable name can’t be any arbitrary word or sequence of characters. JavaScript provides a set of rules for creating variable names. For a variable name to be valid, it should conform to these rules.

Creating A Valid Variable Name

If the name you select isn’t valid, there will be a JavaScript error, and your script will not run.

• • A variable name can contain letters, numbers, underscore(_), dollar sign ($). These are some valid names: “first_name”, “$mart”, “data23″ but these are invalid “@erica”, “&mart” and “first%name”
  • A variable name must begin with a letter, an underscore (_) or a dollar sign($). A variable name cannot begin with a number. “$mart”, “_week_day” and “f8″ are valid while “7up”, “1zone” and “8_mile” are invalid.
  • A variable name cannot be a keyword. JavaScript keywords like “if”, “else”, “switch”, “function” and so on cannot be used as variable names.

Plus, future keywords like class, const, enum etc also can’t be used as variable names.

• • Many non-english, unicode characters can be used in Javascript variable names

For example, ʘʘ is a valid Javascript variable name!