What is a JavaScript object?

A JavaScript object is like a bag of stuff.

The stuff put in the bag is given a name and can be accessed by reference to that name.

The name of a item in an object is often referred to as a key.

This is an example of a JavaScript object.

1
2
3
4
5
{
    firstName:'Pat',
    surname:'Smith',
    age:5
}

The things to the left of the colon (firstName, surname, age) is the name of the items in the object. And the things to the right of the colon is the value of the item.

As the items of a JavaScript object is not stored in any particular order, this

{ a:'A', b:'B', c:'C' }

is the same object as

{ c:'C', b:'B', a:'A' }

Let's try it out

1

Type the following into the the box where it says Enter source code here:

1
2
3
4
5
drawHouse({
    width:80,
    height:150,
    colour:'red'
});
2

Click Check source code.

3

Click Run!.

So what is happening here?

The function drawHouse() takes an object as an argument and will draw a house based on the data in the object when called.

Now, for fun. Try this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
drawHouse({
    width:60,
    height:110,
    colour:'blue'
});
drawHouse({
    width:60,
    height:110,
    colour:'blue'
});
drawHouse({
    width:80,
    height:150,
    colour:'grey'
});
drawHouse({
    width:40,
    height:60,
    colour:'green',
    roofType:'sloping'
});
drawHouse({
    width:50,
    height:40,
    colour:'red',
    roofType:'sloping'
});
When you feel that you understand the content of this lesson. You are perhaps ready for the following lessons:
The 3d monochrome arcade foundation
How to make a 3d monochrome arcade game
The Grid foundation
How to make a Grid game
The Manhattan maze puzzle foundation
How to make a Manhattan maze puzzle game
The Tokyo maze puzzle foundation
How to make a Tokyo maze puzzle game