Storing Data With Variables

Open the project folder

So far, we have been setting or changing values such as updating our title.

In JavaScript and most other languages, we regularly have the need to store data. JavaScript provides us with 3 main ways to do this, let’s begin by looking at the traditional way of storing data in JavaScript, the variable.

Storing data with var

We create a variable using the var keyword, followed by a name. In the index.html file, try this inside the script section:

  var newText
  document.getElementById('title').innerText = 'variables'

Adding a name like this, is called a declaration since we are declaring a new variable.

You can think of a variable as a storage box, and the name being the label on the front so we can easily find it. It makes sense to be descriptive when naming variables, it should reflect what the variable contains.

Also, the name cannot contain spaces and must begin with a letter, underscore, or dollar symbol. If we add something which is not allowed, usually modern text editors will pick up on this and give us a warning.

We can then add a value we want to store inside our variable, such as a string of text:

var newText = 'new text from variable'

Adding a value to our variable is referred to as initialisation. And now we have added something to our variable, we access it by it's name:

document.getElementById('title').innerText = newText

But what if we wanted to change the contents of our variable? We can easily do this. Our variable is already created, so this time we do the same but without the var keyword. The program already knows it is a variable since we declared it, so the var keyword is not required:

var newText = 'new text from variable'
newText = 'updated text'
document.getElementById('title').innerText = newText

The order here is important, since the code is read from top to bottom. If we tried to update the var it before it was created, it won't work, and this is why you will often see variables declared at the start of a script file.

Variables can hold other types of data, not just strings and we will discover more types soon, but for now, there are 2 more types of variables we can use, which were introduced in ES2015. And the first is let.

The let keyword

On the surface, let works the same as var, it can contain a value and we can also update this value.

If we change var to be let in our example, it should make no difference:

let newText = 'new text from variable'
newText = 'updated text'
document.getElementById('title').innerText = newText

There is a difference with something called scope, and this relates to where we can access these variables. The let keyword adds some restrictions to how we can access the values stored inside.

There is a dedicated section about scope later on where we will see this in detail, but we need to learn a few more concepts first before they will become clear.

The const keyword

Next is const, which is short for constant, and you can think of this as holding a constant value that we do not expect to change. We must also give it a value when we are declaring it, this makes sense since it is not intended to be re-assigned with a new value at a later date.

Just like var and let, const can also store a value, but it is more of a read only value.

Using our example, change let to be const:

const newText = 'new text from variable'
newText = 'updated text'
document.getElementById('title').innerText = newText

This will result in the text not updating and you will see an error in the console similar to this:

Uncaught TypeError: Assignment to a constant variable

If we remove the line which updates the constant, the issue will be fixed:

const newText = 'new text from variable'
document.getElementById('title').innerText = newText

In the console error before the message was Assignment to constant variable, and it is this assignment which is the key here.

Assignment refers to when we give a variable a value. We had the error before because we can not reassign to a constant. But this can be a good thing, it means we can store values which we know we don’t intent on changing. This can stop any errors or bugs in our code if somebody accidentally changes a value at a later date.

Using const with Objects

There is something which can be confusing, and it surrounds creating something called an object using const. Objects are also covered in more detail in dedicated lessons.

If we create an object by assigning these curly braces to a constant:

const person = {}

These curly braces contain multiple properties called key value pairs:

const person = {
  name: 'chris',
  likes: 'pizza'
}

And we access these values like this:

document.getElementById('title').innerText = person.name

Even though this object is a constant, it is not strictly immutable, meaning it will never change. We can update the properties like this:

const person = {
  name: 'chris',
  likes: 'pizza'
}

person.likes = 'bananas' // change pizza to bananas

Then update the innerText to be person.likes:

document.getElementById('title').innerText = person.name

And this should update in the browser without any issues. We can also add new properties, such as hair color:

person.likes = 'bananas'
person.hair = ‘blonde’

Then update the innerText to be person.hair:

document.getElementById('title').innerText = person.hair

And you should see the hair property displayed in the browser. Even though we can add or change the properties in this object, re-assigning person to something such a new string will cause an error:

const person = {
  name: 'chris',
  likes: 'pizza'
}

person.likes = 'bananas'
person.hair = 'blonde'
person = 'Chris' // will cause an error

Uncaught TypeError: Assignment to a constant variable

As you can see, a const holding an object can still have it's values mutated inside, we just can not re-assign it’s original value, to maybe a number or a string.

Recap

1. Declaration: Create or "declare" a new variable. E.g. var name.
2. Initialization: A value is assigned to a variable. E.g. var name="Homer".
3. Assignment: Pass or "assign a value to a variable". E.g. var age=37.