Slide 1

Variable types

The difference between var and let

At this point you may be thinking "why do we need two keywords for defining variables?? Why have var and let?".

The reasons are somewhat historical. Back when JavaScript was first created, there was only var. This works basically fine in most cases, but it has some issues in the way it works — its design can sometimes be confusing or downright annoying. So, let was created in modern versions of JavaScript, a new keyword for creating variables that works somewhat differently to var, fixing its issues in the process.

Slide 2

A couple of simple differences are explained below. We won't go into all the differences now, but you'll start to discover them as you learn more about JavaScript (if you really want to read about them now, feel free to check out our let reference page).

For a start, if you write a multiline JavaScript program that declares and initializes a variable, you can actually declare a variable with var after you initialize it and it will still work. For example:

 myName = 'Chris';

 function logName() {
   console.log(myName);
 }
 logName();
 var myName;

Note: This won't work when typing individual lines into a JavaScript console, just when running multiple lines of JavaScript in a web document.

This works because of hoisting — read var hoisting for more detail on the subject.

Slide 3

Hoisting no longer works with let. If we changed var to let in the above example, it would fail with an error. This is a good thing — declaring a variable after you initialize it results in confusing, harder to understand code.

Secondly, when you use var, you can declare the same variable as many times as you like, but with let you can't. The following would work:

 var myName = 'Chris';
 var myName = 'Bob';

But the following would throw an error on the second line:

 let myName = 'Chris';
 let myName = 'Bob';

You'd have to do this instead:

 let myName = 'Chris';
 myName = 'Bob';

Again, this is a sensible language decision. There is no reason to redeclare variables — it just makes things more confusing.

Slide 4

Variable types

There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.

So far we've looked at the first two, but there are others.

Numbers

You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:

 let myAge = 17;

Slide 4 Downwards

Strings

Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks; otherwise, JavaScript tries to interpret it as another variable name.

 let dolphinGoodbye = 'So long and thanks for all the fish';

Slide 4 Downwards

Booleans

Booleans are true/false values — they can have two values, true or false. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:

 let iAmAlive = true;

Whereas in reality it would be used more like this:

 let test = 6 < 3;

This is using the "less than" operator (<) to test whether 6 is less than 3. As you might expect, it returns false, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.

Slide 4 Downwards

Arrays

An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:

 let myNameArray = ['Chris', 'Bob', 'Jim'];
 let myNumberArray = [10, 15, 40];

Once these arrays are defined, you can access each value by their location within the array. Try these lines:

 myNameArray[0]; // should return 'Chris'
 myNumberArray[2]; // should return 40

The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.

Slide 4 Downwards

Objects

In programming, an object is a structure of code that models a real-life object. You can have a simple object that represents a box and contains information about its width, length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.

Try entering the following line into your console:

 let dog = { name : 'Spot', breed : 'Dalmatian' };

To retrieve the information stored in the object, you can use the following syntax:

 dog.name

We won't be looking at objects any more for now — you can learn more about those in a future module.