The basics of JavaScript objects

Remember the literal meaning of an object that says "an object is anything you can see and touch"? This definition is related to the same concept of object in JavaScript but a tweak of explicitness is added to it. With the literal meaning of an object, we can have a better understanding of what JavaScript object is.

This article is focused on understanding the basic concept of an object as one of the programming paradigms of JavaScript.

Overview

JavaScript object explained
Characteristics of a JavaScript object
Accessing object properties
Modifying objects
Accessing a nested object
Removing a property in an object
Conclusion

Prerequisites

This article is targeted at beginners with prior knowledge of JavaScript variables and arrays.

JavaScript objects explained

In JavaScript, an object is an entity with properties (you can probably compare them with real life object that is seen and touched). For example, a table has the properties of leg, color, material, height, and width. So it is with JavaScript objects.

The object's properties are characterized by keys with their values attached to them. This is technically known as key/value pairs i.e. the keys and their values go together. You can equally refer to the properties of an object as variables because they possess same core characteristics of variables which is mutability(their values can be changed).

Code Example

/*variable*/ 
let myVar = 'table';

 myVar = 'chair';    /*the value of myVar changed*/
console.log(myVar);  /*logs out chair*/

//an object
const table = {
        color: 'blue',
        legs: 4,
      };
 console.log(table.legs);     /*logs out 4*/

table.legs = 6;               /*The value of the leg property of object "table" changed*/
console.log(table.legs);     /*logs out 6*/

From the code example above, we can see that both values of the variable and legs property were changed from table to chair and from 4 legs to 6 legs respectively.

Characteristics of a JavaScript object

Objects are declared with a variable keyword; let, var, or const.

Example: const table = {};
Objects are also initialized after declaration.

Example: const table = {color: red, legs: 8};
Just as seen in the previous examples above, the properties are encapsulated with curly braces.
Each property is paired with a value.
Each property in the object is separated by a comma.
There could be a nested object; i.e. an object inside an object.
The properties in an object doesn't have an order like an array.
Functions can be nested in an object. Function as a property in an object is known as a method(This will be treated in a later article).

Accessing object properties

Since we are done with what JavaScript objects look like generally, the next step is to check out how to access them.

There are two ways to access the properties of an object: Dot notation and Square bracket notation.

Code Example

const bicycle = {
  color: 'blue',
  type: 'mountain bike',
  wheels: {
    diameter: 18,
    width: 8
  }
};

/*using dot nation*/
bicycle.color;   /* 'blue' */

/*Using square bracket notation*/
bicycle['color'];   /* 'blue'*/

Using either Dot notation or Square bracket notation, targeting the color property of the bicycle object, returns blue.

Modifying objects

As mentioned earlier, objects can be modified: properties can be added and deleted, values can be changed. In a case where the value is a number, the number value can be mathematically added and the result printed. Let's go ahead and see the ways to modify an object.

Modifying the value of a property

const bicycle = {
  seat: 1,
  color: 'blue',
  type: 'mountain bike',
  wheels: {
    diameter: 18,
    width: 8
  }
};

bicycle.type ='sports bike';  /*changes the type of bicycle to sports bike*/
/*OR*/
bicycle['type'] ='sports bike';

bicycle.seat += 1; 
/*OR*/
bicycle['seat'] += 1;  /*adds 1 to seats and the result is now 2*/

Adding properties to an object

Use the following method to add a property to an already existing object.

bicycle.classy = true;
bicycle.warranty = 'none';

/*OR*/
bicycle['classy'] = true;
bicycle['warranty'] = 'none';

Our modified object now looks like this:

const bicycle = {
  seat: 2,
  color: 'blue',
  type: 'sports bike',
  classy: true,
  warranty: 'none',
  wheels: {
    diameter: 18,
    width: 8
  }
};

Accessing a nested object

If we noticed, our bicycle object has another object(wheels) inside it. We can equally access the properties and values in it.

bicycle.wheels.diameter += 2;
bicycle.wheels.color = 'ash';

/*OR*/
bicycle['wheels']['diameter'] += 2;
bicycle['wheels']['color'] = 'ash';

Our bicycle object now looks like this:

const bicycle = {
  seat: 2,
  color: 'blue',
  type: 'sports bike',
  classy: true,
  warranty: 'none',
  wheels: {
    diameter: 20,
    width: 8,
    color: 'ash'
  }
};

Removing a property in an object

Recall that since objects are mutable, not only can we modify existing properties (or even add new ones), we can also delete properties from objects. We can remove a property by using the delete operator as shown below:

delete bicycle.seat;  /*returns true and deletes the seat property of our bicycle object*/

Now, if we try to access the seat property, bicycle.seat; we get undefined because it has been deleted together with its value.

Conclusion

JavaScript objects are useful ways to store data. They are easily accessible and can also be used as variables. We have seen how we can modify the object. So far we have covered the basics. There are more to JavaScript objects but we will learn them in a later article.

If you liked this article, do give your comments and reactions. Follow on twitter @amarealcoder

Miracle's blog