Introduction To Objects

Open the project folder

JavaScript Objects

Another object type along with array is an actual Object. We briefly looked at objects earlier and these are a collection of properties:

// key: value
loggedIn: true

The above example shows the key of loggedIn and the value of true.

Over to our starter files we can see how this looks as a complete object:

let user = {
  // key: value
  first: 'Homer',
  last: 'Simpson',
  occupation: 'Safety Inspector',
  loggedIn: true,
  foods: ['pizza', 'mexican', 'indian'],
};
document.getElementById('title').innerText = user;

This example will display in the browser as object Object. This is what happens when we try to display an object in the browser, it is converted to a string and [object Object] is the default value that is returned.

Accessing object properties

With arrays we used the square brackets to access the values index number, for objects, we can use the square brackets to select a value by the key:

document.getElementById('title').innerText = user['first'];

Selecting a key like this is referred to as bracket notation. You can also select keys using the dot notation:

document.getElementById('title').innerText = user.first;

When we previously looked at arrays we accessed values using the index position. With objects, we access properties using the key.

If we just wanted to inspect all of the objects contents, we can log it to the console:

console.log(user); // or user.first, user.last etc

Or in a table-like format:

console.table(user);

Arrays of objects

These console logs can be useful for debugging and generally checking what values are contained for any data type. If we had multiple objects, we could also place them inside of arrays. This is useful for storing lots of users or products:

let users = [
  {},
  {},
];

Just for simplicity, only the first and last name has been used for this example:

let users = [
  {
    first: 'Marge',
    last: 'Simpson',
  },
  {
    first: 'Homer',
    last: 'Simpson',
  },
];

Can you work out how to access both the first names?

Since arrays are numbered or indexed, we can access each object by it's position in the array:

document.getElementById('title').innerText = users[0];

Remember, when displaying an object in the browser, it will show object Object. We need to select the object property we want to use:

document.getElementById('title').innerText = users[0].first;

If we had many objects inside an array like this, it is not always practical to select each one individually. To speed up repetetive tasks, a loop may be used, we will cover this in a dedicated lesson later.

There are lots of uses for this kind of set up, not just a collection of users. If we had an ecommerce store, it could hold a collection of products, or we could create a shopping basket array, and when a new item is added it could be pushed to the array.

There are so many uses for this, and also much more to discover with objects and arrays, and we will go deeper into these in the upcoming sections.