Incremental Lesson 7 - Objects

About this tutorial

Category: Javascript
Difficulty: Intermediate
Lesson 7 - Objects.zip

Results

This lesson will attempt to explain an aspect of variable handling that can be incredibly useful and time saving, but which is often not fully understood or utilised. Objects are used in a variety of ways, but today we will be looking at how to use them to collate related variables.

Think of a child's lunch box. Inside that lunch box are a number of items. They may have a sandwich, an apple, and a juice box. Each of these items are named and are clearly contained within this lunchbox. This is exactly how objects work inside javascript. Your object is named, in this case "lunchbox", and anything inside it has an identifying name as well. In our example, our contents might be called "sandwich", "fruit", and "drink". Each of these have a name. "Sandwich" might be "vegemite", "fruit" could be "apple", and "drink" could be "apple juice". With these facts, we can start to create a structure for our object. Have a look at the lines below.

var Lunchbox = {
    Sandwich:"Vegemite",
    Fruit:"Apple",
    Drink:"Apple Juice"
}

Notice how the things inside the lunchbox don't have an = sign? Object declarations are handled a little differently, and as a result, an = sign will not define the value of a variable inside an object. They work identically to normal variables, they're just declared differently. Notice how Lunchbox does have the = sign? This is because it's a variable that is not contained inside another variable. It is defined normally. So how would we access the sandwich variable inside this object? Simple.

Lunchbox.Sandwich;

The above variable call will look for the "Sandwich" variable inside the "Lunchbox" variable. Simple right? Now how do we actually set up a variable like this? There are two ways. The syntax above (using the {}) will create a variable called "Lunchbox" with the variables inside the {} as its contents. However, what if you want to use this same structure multiple times in different places? We can change the structure of the syntax a little to make this possible.

function Lunch() {
    this.Sandwich = "Vegemite";
    this.Fruit = "Apple";
    this.Drink = "Apple Juice";
}

What we have above is an object declaration. Note that it is set up as a function, and that the variables are now preceeded with "this." before the variable name and have an = sign rather than a :. First of all, the function structure allows us to call this from anywhere in our code. This means that we can access it multiple times and from multiple locations. Secondly, the "this." addition tells the function that it needs to assign the following variable within the scope of the function. So how do we end up with our new Lunchbox variable?

var Lunchbox = new Lunch();

It's as simple as that. We're declaring a variable "Lunchbox" and telling it to be a "new" copy of the "Lunch()" function. Using this method, we can still access the inner variables the same way, but we can also create new variables without needing to type out the entire structure again. It also means that any values we give the variables in the function will be automatically assigned as default values, meaning that the Lunchbox variable above will have a Vegemite sandwich, an apple, and apple juice. We can then change these values however we want using the standard methods:

Lunchbox.Sandwich = "Peanut Butter";

So how are we going to use this in our project? There are two places that we'll be doing this for now. The first is to create a single variable in which our player's data is saved. Let's go ahead and create a GameSave function to use as an object and put the money variable inside it:

function GameSave() {
    this.money = 0;
}

Now we need to create a new function to create our game save when the page has finished loading. We'll use the window.onload method to do this. This waits for everything on the page to be loaded before running the code inside it:

window.onload = function() {
    window.game = new GameSave();
};

As you can see, our game variable declaration is a little different again. Since our variables before were being created outside a function, we could access them anywhere. If we were to to a simple variable declaration inside a function, it would only remain for the duration of that function. This means that a game variable created normally will disappear as soon as the function is over. To avoid this problem, we need to tell javascript to keep the variable alive and accessible for all functions. We do this by telling it to load the variable directly into the window, making it "global".

Now that we have our game variable, we can access the player's current money using game.money. As a result of this, you'll need to go through your code and change all "money" variable calls to "game.money" and delete the "var money = 0;" line at the start of your document. Run the code and see if it works.

Secondly, we're going to collate our buildings into objects. We'll need to make a standard object for the building first that contains the variables we had before. Check out the code below and see if you can follow it.

function Building() {
    this.name = "Building Name";
    this.cost = 10;
    this.persec = 1;
    this.qty = 0;
}

Now when we want to create a new building, we can use this structure, then change the values as we need. Check out the following or give it a go yourself:

window.Building1 = new Building();
Building1.name = "Lemonade Stand";
Building1.cost = 10;
Building1.persec = 1;

Looking good! You'll now need to go back through your code to change any references to reference the object we've now created. Once you've done that, your lemonade stand should work as it did before. You may be looking at your code now and thinking "but there's more code?". Yes, there is, but it will allow us to create less code in the long term., and is something the next tutorial will touch on.

Additional Notes
It should be noted that commenting your code is an important practice and should be performed on any piece of code you write. Commenting generally involves writing a few small notes about what a piece of code does, how it is used, and where is it implemented or called from. It's a good idea to get used to writing comments early on and ensuring that they are kept up to date. To add comments, either on a new line or at the end of an existing line, use // to tell javascript that whatever follows is a comment and should be ignored. For example:

//This is a comment<br />
var thisisavariable = 1; //This is also a comment
var //This is not valid thisisavariable = 1;
//Neither is this var thisisavariable = 1;

Check out the comments in the demonstration documents for this lesson to get an idea of what you should be doing.