PRDV402: Introduction to JavaScript II

To begin with, make a local copy of our oojs.html file. This contains very little - an <script> element for us to write our source code into. We'll use this as a basis for exploring basic object syntax. While working with this example, you should have your developer tools JavaScript console open and ready to type in some commands.

As with many things in JavaScript, creating an object often begins with defining and initializing a variable. Try entering the following line below the JavaScript code that's already in your file, then saving and refreshing:

const person = {};

Now open your browser's JavaScript console, enter person into it, and press Enter/Return. You should get a result similar to one of the below lines:

[object Object]
Object { }
{ }

Congratulations, you've just created your first object. Job done! But this is an empty object, so we can not do much with it. Let's update the JavaScript object in our file to look like this:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:

person.name;
person.name[0];
person.age;
person.bio();
// "Bob Smith is 32 years old."
person.introduceSelf();
// "Hi! I'm Bob."

You have now got some data and functionality inside your object and can now access them with some nice simple syntax!

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). A comma must separate each name/value pair, and a colon must separate the name and value in each case. The syntax always follows this pattern:

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

The value of an object member can be pretty much anything - in our person object, we've got a number, an array, and two functions. The first two items are data items called the object's properties. The last two items are functions that allow the object to do something with that data and are referred to as the object's methods.

When the object's members are functions, there's a simpler syntax. Instead of bio: function () we can, write bio(). Like this:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

From now on, we'll use this shorter syntax.

An object like this is called an object literal - we've written out the object contents as we've come to create it. This is different from objects instantiated from classes, which we'll look at later.

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example, by sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array when you want to identify individual items by name.