One of the concepts I found difficult to understand when I started learning to code was Objects. Apart from the similarity with Arrays, it seemed to be a difficult concept to grasp. This article is my attempt at demystifying JavaScript Objects for novice programmers.

What are JavaScript Objects?

JavaScript objects can be defined in many ways. However, the underlining meaning is that they are entities. According to the Mozilla Developer Network MDN, an object is a standalone entity, with properties and type.

In basic English, think of an object as a noun: a name of a person, animal, place, or thing. When you reconsider the MDN definition above (a standalone entity with properties and type), it means although an entity exists independently, it has properties.

Take for instance a car. We can represent a car as an object. If a car is an object, what then are the likely properties of that car? Properties mean the things the car has. A car will have will usually have these properties:

• make
• colour
• tyres
• model
• the year of manufacture and so on.

Let’s consider another object. You, yes you! You can exist as an object or an entity.

Recall that we likened an object to a noun. If so, what then are your properties? Those would be:

• your first name
• your last name
• your age
• your email address
• your postal address
• your educational qualifications and so on.

How to create a new Object

Objects are represented in key: value pairs. This means the values are mapped to the keys. In one of the examples above, assuming your first name was Victor, then you can create a person (you) object with yourFirstName as key and Victor as value.

We shall look at two ways of creating a new Object (there are more ways). In this example, we are creating a student object:

const studentOne = {} // an empty student object

const studentOne = new Object()

In the examples above, we have created an empty object (studentOne). We now need to give this object its own properties. There are two ways via which we can add properties to this object. They are:

• dot notation

• square brackets

Using dot notation, we can add properties to the studentOne object thus:

studentOne.name = "George" //The student's name is George
studentOne.age = 19 // The student's age is 19
studentOne.city = "Stafford" // The student's city is Stafford

Using square bracket notation, we can add properties to the studentOne object thus:

studentOne["name"] = "George" //The student's name is George
studentOne["age"] = 19 //The student's age is 19
studentOne["city"] = "Stafford"  // The student's city is Stafford

Instead of first creating an empty object and subsequently adding properties, we can simply create the studentOne object and add properties straightaway:

const studentOne = {
      name: "George",
      age: 19,
      city: "Stafford"
}

How to Access Object Properties

Accessing the properties of an object is similar to creating new properties. We can either use the dot or square bracket notation. However, one limitation of the dot notation is that it cannot be used if, for whatever reason, the name of the key starts with a number (An example is given towards the end of the article).

We can access the value of studentOne's name as follows:

console.log(studentOne.name) // George
console.log(studentOne["name"]) //George

In the example below, we have created an object named worldCupYears with years as key and host countries as value.

const worldCupYears = {
             2006: 'Germany',
             2010: 'South Africa',
             2014: 'Brazil',
             2018: 'Russia'
}

console.log(worldCupYears.2006) // syntax error 
console.log(worldCupYears[2006]) // Germany
console.log(worldCupYears['2006']) // Germany

Accessing the values of this object using the dot notation will return an error, hence the square bracket notation should be used wherever the key starts with a number.

After having a good grasp of the foundational concepts, you can then go ahead to manipulate objects at an advanced level.

Thank you for reading!