Nested Objects in JavaScript

First of all let’s see how to create an empty object in JavaScript. Open up your browser console (Open new tab and right click on it and go to inspect element -> console) and type

var empty = {};   and then empty.toString(); then it will give "[object Object]"

Output shows that “empty” is an object.

As we are going to discuss about objects it’s really need to know the importance of JavaScript objects. In JavaScript objects are treated as the kings because JavaScript is designed on a simple object-based paradigm.

“Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. The concept of objects in JavaScript can be understood with real life, tangible objects.” If you want to read more on objects visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

For an example let’s take mobile phone as a real world object

Figure - 01

Figure - 02

Let’s create a simple HTML file which includes script tag to implement above sample in JavaScript

Figure - 03

In the above file I created a simple h3 tag call display (display is the id of h3 tag) to print the message that I pass into displayInfo( ) function.

Our main objective of this post is to learn about Nested Objects. Here we simply refresh our knowledge on JavaScript objects, properties and methods so let’s start in creating phone object.

Figure - 04

Figure - 05

Here I create an empty object call phone and print it inside my HTML document. Now we are going to include all properties into phone object.

Figure - 06

Figure - 07

Now we need to add all 4 methods into phone object.

Figure - 08

Below will be the final output of the above script

Figure - 09

Now our memorizing part is finished J .Didn’t you find something strange which we are not address up to this level

Figure - 10

Phone Battery: Simple real-world object which is located inside the phone.

Then how we should represent it inside our program. It’s useless to discuss about a phone battery without a phone. Now the Nested Objects come into action.

Figure - 11

After adding Nested Object into our existing phone object our updated code is

Figure - 12

Figure - 13

I have done small modification to our for loop to display the content of battery object which is located inside the phone.

Figure - 14

Figure - 15

Now I am going to share some different ways which we can use to represent Nested Objects.

This is the person object which contains two Nested objects call address and mood

Figure - 16

This is another way of representing vehicle object Nested Loop object

Figure - 17

Finally I include a different representation of phone object with nested battery object

Figure - 18

To check whether your objects are working fine write below code to print them.

Figure - 19

This is the end of Nested Objects .If you have any suggestions for improvements, please let me know .Happy Coding J