JavaScript Objects

Everything in JavaScript excluding numbers, strings, booleans ( true and false ), null , and undefined are objects under the hood.

In JavaScript , arrays are objects, functions are objects, and, of course, objects are objects.

Technically speaking an objects in JavaScript are mutable keyed collections.

The term mutable from the last paragraph means by default you can make changes to an objects by adding or removing an element.

Object contains properties where a property has a name and a value. A property name can be any string, including the empty string (' '). A property value can be any JavaScript value except for undefined.

Objects are useful for collecting and organizing data. They can contain other objects.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.

In JavaScript objects can be created using two syntax:

• Declarative
• Constructed

The literal syntax is defined as:

var bioData = {
  key: value,
  // other properties and values
}

The constructed syntax is defined as:

// create the object using the constructed
// syntax 
var bioData = new Object();

// add a property name and value
bioData.key = value;

The literal syntax is the most common and easiest way of creating objects (explored later). The constructed form on the other hand has one drawback — you will have to add object values one by one.

Here are the things you should take note when creating objects:

• If the property name contains hyphens or spaces, wrap the name in quotes (" ")
• You separate each key value pair with commas ( , )
• If the property name or value is a reserved word, wrap the name in quotes (" ").

Time for some code. Switch over to your browser console and type the following code:

/**
  * An object with three properties
  */
var bioData = {
  first_name: "Habdul",
  last_name: "Hazeez",
  field: "Computer Science"
};

Type in the console and run it:

Next, we confirm the object has been created.

The constructed syntax equivalent is:

var bioData = new Object();

Type in the console, run it and confirm the object is created.

I mentioned earlier that object can also contain another object, here is an example:

var bioData = {
  first_name: "Habdul",
  last_name: "Hazeez",
  field: "Computer Science"
  skills: {
     programming_languages: "JavaScript, C, C++",
     other_fields: "Computer Security, Artificial Intelligence"
  }
};

Data Retrieval

Values can be retrieved from an object by wrapping the object name in square brackets [ ] or using dot notation. If the property name is a reserved word like name then it's best to use the dot notation because its easier to read. Let's see some code.

// retrieve the first_name using square
// brackets notation 

bioData['first_name'];

In the console:

You can also use the dot notation.

biodata.'first_name'

In the console:

How to retrieve data from an object that contains another object is summed up in the image below.

If you attempt to retrieve a non-existence property you will get undefined.

Data Update

A value in an object can be updated by assignment. If the property name already exists in the object, the property value is replaced:

In code:

bioData['first_name'] = "Ben";

In the console:

You can confirm the update with the following code:

// check the object

bioData;

In the console:

The delete operator is used to remove a property from an object. It will remove a property from the object if it has one.

// This will delete the first_name property

delete bioData.first_name;

In the console:

Confirm the deletion:

// check the object to confirm the deletion

bioData;

In the console:

This is just an introduction to JavaScript Objects and i have left out the following among others:

• Object enumeration
• Object References
• Reflection

Up next, Numbers.