What a variable is

Now we're going to talk about one of the most important and fundamental concepts in javascript (and also in other programming languages). Variables. A variable can be thought of as a placeholder for a value. Like a shopping bag that contains perhaps an apple or a banana. You use the bag temporarily to contain the fruit to make it easier carrying it home from the store. Once you've arrived home the fruit can easily be taken out of the bag and used (probably for eating). Now the bag has fulfilled its purpose and can be thrown in the trash or be saved somewhere and used again for something else.

In javascript variables work like this. They're used to contain values which can be used later in the program for different operations and algorithms. A variable can only contain one value at a time, which can be of any data type. Meaning either a string, number, boolean, array, object, function or null or undefined.

A closer look at variables

x = coffee
I like x
x tastes good with sugar in!

An example on how variables in general works and which most hopefully remembers from the math classes in school, is that you take some placeholder and let it refer to a value. In the example above the variable "x" is assigned the word "coffee". When then the text "I like x" is written you understand that it actually means "I like coffee", and that the last statement says "coffee tastes good with sugar in!".

So how does a variable look in javascript?

// Some different ways of declaring variables
var name;
var age;

name = 'Bob';
age = 23;

var x = 73;

var a = 5, b = 7;

In javascript a variable is declared with the word "var" and is followed up with the name it should have. The name can be anything but can only contain letters, numbers and underscores (_) and must either start with a letter or underscore. It also can't be one of javascripts reserved words, which are listed on this page: w3schools.com/js/js_reserved.asp

Variables are something that's called case sensitive. That means if you name them with big letters, they can't later be referred to with small letters. For example the variable text is not the same as Text, they are two different variables.

Assign values to variables

When a variable has a name the assignment operator is used (=) to give it a value. In the example below the variable x is assigned the value 76. The syntax for that is var x = 76; Now javascript will understand that every time x is referred to it's the value 76 that's to be used, so document.write(x) will print out 76.

The value can later be manipulated and changed at free will, meaning if 44 is later assigned to x its value will be 44. The statement "x = x + 1" will increment x with one so its value gets changed to 45.

var x = 76;
document.write(x); // 76

x = 44;
document.write(x); // 44

x = x + 1;
document.write(x); // 45

That was numbers. What about text?

In javascript and in other programming languages text is usually called strings. It's a long story why just that name was chosen, but assigning strings to variables is no different than assigning numbers to them. The example below shows how it's done. Either single or double quotes can be used for strings, there's no difference between them.

var str = 'This is a string';
var str2 = "This is another string";

To use quotes inside strings is pretty easy. Double quotes can be used inside strings declared with single quotes, and single quotes inside strings with double quotes. Otherwise they must be escaped with a backslash, for example like this: var s = "Hello \"mr\" Bob";

Variables are not bound to any specific data types like in many other languages. Instead if you have a variable with the value 33 which is a number. It can later be changed to for example a string like "Hello" without any problems.

Concatenating strings in javascript

When working with strings you often want to combine more than one of them into a single big string, and perhaps add some variables into it. For this the addition operator (+) is used, and it's called to concatenate strings.

var city = 'Stockholm';
var city2 = 'Gothenburg';
var text = city + ' and ' city2 + ' are 2 cities';

document.write(text);
// Stockholm and Gothenburg are 2 cities

var hour = 3;
var minute = 40;

document.write('The clock is ' + hour + ':' + minute + ' am');
// The clock is 3:40 am

Try it yourself

Now it's time to learn about the javascript console. In your web browser hit "f12" or right click somewhere and hit "inspect element". There's a tab there called "console" which is the javascript console. Here it's easier to test basic functions out than to have to create a website for every small thing you want to test. The function console.log will output text into here.

  1. Open up the javascript console in any browser.
  2. Declare some different variables and assign strings, numbers or anything to them.
  3. Concatenate together some different strings.