Variables

We already know that the computer world has nothing but data.

There are different types of data (we call them data types), as follows:

• Your name is a kind of data
• Your age is data
• Your grade is also data

Yet, they all are different. What is the difference between them? Your name only contains a group of characters or, as some people also call it, string. Your age is an integer type data. Your grade is a float type data. The wonderful thing in JavaScript is that you do not have to specify the data type before writing a variable's name.

Note

JavaScript allows working with three data types. Strings (for example, "This is an example of string"), numbers (for example, 2015, 3.1415, and so on), and Boolean (for example, true or false).

Did we discuss variables? Well, you already know the data types. You will need something to store your data. This something is called variable. In JavaScript, we use var before the variable names. Remember that var starts with small letter.

Let's consider the following example:

var x;
var y;
var sum;
var name;

Let's say that we have 14 apples and 6 oranges. To store them in variables we will use the following:

var apples = 14;
var oranges = 6;

The following example is not the same. Can you tell why?

var Apples = 14;
var apples = 14;
var APPLES = 14;
var appleS = 14;

Yes, JavaScript is case sensitive. All the variables are different here, though the values of the variables are the same.

Now, let's do some coding. Previously, on console, you printed your name as homework. I hope you did it without any trouble. How about we now print your name differently using a variable? Assume that your name is Sherlock Holmes. What kind of data is it?

You are right, it is string type. Usually for string type data, we put the string between two quotes.

Let's consider the following example:

var name = "Sherlock Holmes";
var occupation = "Detective"

To print them using console, you need to type each statement and press Enter. Take a look at the following image:

Note

Do not copy and paste the codes on the console. You might get a syntax error.

You will see an extra line appearing after you hit Enter, stating undefined. Don't worry about this for now. It just returned a console log.

You stored the Sherlock Holmes string on the name variable and you stored Detective on occupation. Every time you access name or occupation, you can access the stated strings.

Consider that you want to print Sherlock Holmes on your screen. Just type the following:

document.write(name);

After typing, hit Enter. You will see Sherlock Holmes is printed on the screen, as follows:

Type document.write(occupation); and hit Enter, as shown in the following screenshot:

You may be wondering why is there no space between Sherlock Holmes and Detective. As, on the console, the history is not automatically removed from the web page on the left-hand side and after you hit Enter for your second output (occupation), the string places itself right after the previous string. This will always happen, unless you clear your console using the Ctrl + L keyboard shortcut and reload the web page pressing the key F5.

Note

Your stored variables will also be erased from the memory when you reload the web page. Don't worry, you will be taught how to use your variables storing on a file in the next chapter.

If you want to join two (or multiple) variables, you add a plus sign (+) between the two variables, as follows:

document.write(name+occupation);
document.write(occupation+name);

Can you tell me what will be output of these commands?

Yes, you are right. The output will be as follows:

Sherlock HolmesDetective

DetectiveSherlock Holmes

Note

Your output might be in one line on the web page. If you want to split the lines, add a <br> HTML tag. The simplest way to add this is to type document.write("<br>"); and hit Enter. Your next output will be in a new line.

If you want to add any string (for example, a space) between the two strings other than any variables, just type the following:

document.write(name+" "+occupation);

The output will be as follows:

Sherlock Holmes Detective

What will happen when you type the following code and hit Enter?

document.write("My name is "+name+" and I am a "+occupation);

Yes! You are absolutely right. The output will be as shown in the following:

My name is Sherlock Holmes and I am a Detective

Now, add another variable on the console. Consider that Sherlock Holmes is 24 years old. Do you remember what kind of data age is?

Yes, it is an integer type of number. Therefore, type the following code and hit Enter:

var age = 24;

You have the following three variables now:

• Name
• Occupation
• Age

Let's print the following output on the web page:

My name is Sherlock Holmes, I'm 24 years old and I am a Detective

What will our code be on the console?

The code is as follows:

document.write("My name is "+name+", I\'m "+age+" years old and I am a "+occupation);

The output can be seen as follows:

Tip

Printing quotations/inverted commas

If you want to print Shakespeare said, "To be, or not to be: that is the question!" using the document.write(); syntax, you will probably type the following code:

document.write("Shakespeare said, "To be, or not to be: that is the question!"");

However, this will give you an error known as SyntaxError. To get rid of this error, you need to use a backward slash (\) before the two inverted commas. The correct code will be as follows:

document.write("Shakespeare said, \"To be, or not to be: that is the question!\"");

The output will be as shown in the following:

Shakespeare said, "To be, or not to be: that is the question!"

The same rule applies for single inverted comma (').

Here is a quick exercise for you:

1. Suppose Tom has a cat (Lucy). The cat, Lucy, is 2.4 years old. Store the name, cat's name, and its age on three different variables and print the following output using console:

   Tom's cat Lucy is 2.4 years old.

2. Assume that you bought 4 pounds of apples. Each pound costs you $1.2. Store the price and quantity of apples on two different variables and print the following output using console:

   I bought 4 pounds of apples. I had to pay $1.2 for each pound.