Objects, Dot and Bracket notation in JavaScript

By McDonald, T.  | Date 14th of August 2020
If you want to be a coder, you will need to know about objects and how to interact with them. Have you been watching teach yourself videos and reading teach yourself blogs? Are you feeling a little bit lost with the jargon? I will show you that the jargon around objects in JavaScript is not as confusing as it first sounds.

What is an object?

An object can be thought of as a thing that can be represented in the real world such as a car or a shop. The car has attributes sometimes called properties, for example colour or model, and protocols sometimes called methods such as peddles or stirring wheel. The attributes describe the characteristic of the car while the protocols are how to interact with the car. You can have many objects and they can all have a different state.

First let’s look at the structure of the object.

Object creation:

objectName = {};
The above creates an empty object.
objectName = {
objProperty_1 : “value 1”,
objProperty_2 : 123,
objProperty_3 : aVariable,
objMethod_1 : function() {some code},

See how the items in the object have key value pairs. The key-value represents an attribute while the key represents the value of the property. Notice the objectMethod, the object method is how to interact with the object: you call the function and it runs the code.

You can also add things
objectName = {};
objectName.objProperty_1 = “value 1”

The two ways to access the object

1. Dot notation

This uses a full stop. 
Returns value 1

2. Bracket notation

This uses brackets. 
Returns value 1