Understanding Objects In Javascript

What is an object?

An object is one of the eight javascript datatypes. It is a collection of related data. It can either be empty or contain a list of properties. An object property has a key (which is also known as an identifier) before a colon and a value after the colon. An object value can be but not limited to: a string, a boolean, a number, a function, an array, or even an object.

Creating an object

An object is created using curly braces.

let personObj = {};

The example above is an empty object.

Let's create an object to store a person's personality.

let personObj = {
  name: {
    first: 'John',
    last: 'Paul'
  },
  age: 28,
  gender: 'male',
  occupation: 'engineer',
  'favourite meal': 'strawberry  pancakes',
  hobbies: ['gaming', 'writing', 'painting']
}

The above example contains a string, an integer, an array, and an object value.

Accessing an object

An object can be accessed using either the dot notation or the bracket notation.

The dot notation

To access an object value using the dot notation, the object name has to be written first, followed by a dot '.', then the object value key intended to be accessed. Using the earlier example:

personObj.name.first; 
personObj.age; 
personObj.hobbies[1];

The above section will return:

John
28
writing

The bracket notation

To access an object value using the bracket notation, the object name is written first, then the object value key in quotes enclosed in a square bracket '[]'. A key or identifier with more than one word can be accessed using the bracket notation only. Using the earlier example:

personObj['name']['first'];  
personObj['age']; 
personObj['hobbies'][1]; 
personObj['favorite meal'];

The above lines will return:

John
28
writing
strawberry pancakes

Note: there is no dot '.' in the above lines of code.

Modifying an object

An object is a mutable data type, this means it can be modified. This can be done either using dot notation or bracket notation.

Updating an object property

The object property has to be accessed first before it can be updated. After accessing the object property, the property key is assigned the new property value. Here is an example using the earlier example:

personObj.age = 35

Or

personObj['age'] = 35

The personObj object will now return:

{
  name: {
    first: 'John',
    last: 'Paul'
  },
  age: 35,
  gender: 'male',
  occupation: 'engineer',
  'favourite meal': 'strawberry pancakes',
  hobbies: ['gaming', 'writing', 'painting']
}

Adding an object property

An object property can be added either using the dot notation or the bracket notation. An object is assigned a new property key. The new property key is assigned its property value. Here is an example using the earlier example:

personObj.slang = 'You only live once'

Or

personObj['slang'] =  'You only live once'

The personObj object will now return:

{
  name: {
    first: 'John',
    last: 'Paul'
  },
  age: 35,
  gender: 'male',
  occupation: 'engineer',
  'favourite meal': 'strawberry pancakes',
  hobbies: ['gaming', 'writing', 'painting'],
  slang: 'You only live once'
}

Summary

In summary, objects are used to store a collection of data. Its properties are key-value pairs data. Its properties can be easily accessed and modified.

Vector created by vectorjuice