An Object within an Object

nesting dolls

One thing that is helpful to learn when programming in JavaScript is that nearly everything is an object. We can then use objects to create other objects. Sort of like a copying of the data. It is not a complete “copy and paste”, which I will blog about later, but what I wanted to concentrate on in this post is what this functionality gives us.

We can have an object called a constructor wherein we set up the blueprint for our object. I will go into details of a constructor in a future post. In this one, I simply want you to grasp the power and ease of code reuse with objects within an object and how that allows us to build robust code.

For example, say we have a constructor entitled, “Blog”. Notice the caps…all constructors are supposed to be capitalized. This is not enforced by the language but is a generally accepted convention. Within this Blog constructor, there are two properties…one for holding a date object and one for holding the string of the actual post content.

We can then create an individual blog entry by utilizing the Blog constructor object. It might look like this…

// Create a variable to hold a blog entry
var blogEntry = new Blog(“Something interesting written here.”, new Date("10.31.2016"));

Notice the “new” keyword. This tells JavaScript, “Hey, I am creating something new here. In fact, it is a new instance of the Blog constructor object. So copy all of the necessary stuff for me.”

As I stated earlier, the Blog constructor took two properties…date and string. We can create/pass those along as parameters for the constructor. We now have an individual blog entry.

So why is this important? Within the constructor, we can encapsulate any logic specific to that object…built-in methods, properties, etc. This allows for easier code maintenance and maintains our logic and structure.

Happy Coding!

Clay Hess

More To Explore

developer writing code at his laptop with code surrounding him in multicolored smoke
Code

Exploring the CSS Properties and Values API

The CSS Properties and Values API is an exciting part of the CSS Houdini suite of APIs that enables developers to define and register custom CSS properties directly in JavaScript. This API introduces advanced capabilities like type checking, default values, and control over whether custom properties inherit their values. These features significantly enhance the power and flexibility of CSS in modern web development.

Developer sitting outdoors at a coffer shop working on his laptop with colors swirling
Code

Exploring the CSS Paint API: Unlocking Creativity in Web Design

The web is constantly evolving, and with it, the tools available to developers and designers expand. One of the most exciting additions to modern web design is the CSS Paint API (also known as Houdini’s Paint API). This feature allows developers to create dynamic, programmatically generated images directly in CSS without the need for external assets or heavy graphical libraries.

Share This Post

small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.