Language

3 Ways to Create Objects in Object-Oriented JavaScript

3 Ways to Create Objects in Object-Oriented JavaScript

JavaScript is a powerful programming language that supports Object Oriented Programming (OOP). In fact, in JavaScript, objects rule the day—from core features such as strings and arrays to browser APIs built using the language.

Bautista, a U.S.-based web developer who is passionate at teaching people about programming, emphasizes that “to take your JavaScript skills to the next level, you need to understand the object-based nature of the language.”

Here are three ways to create objects in Object-Oriented JavaScript (OOJS) programming:

  1. Using object literals

In OOP, an object literal refers to a comma-split list of name-value pairs enclosed within curly brackets. The names are strings, and the values are any primitive data types available in JavaScript such as arrays, strings, numbers, functions, and many others.

Usually, object literals are utilized in encapsulating code and wrapping it in an orderly package. This way, they prevent collisions with variables and objects found on the global scope.

With object literals, you can gather properties and methods together and make your code clean and uncluttered.

Here is an example:

JavaScript object literals are singletons, and they allow you to create objects conveniently and flexibly. They save you from writing excessive lines of code.

For example, you can place an object literal anywhere in your workspace without including any previous setup, and it will still work well—something which can be very useful!

Although object literals are important, they do not support instantiation or inheritance. If you want to make use of these features, you’ll need to use other techniques for creating objects.

  1. Using object constructor functions

Constructor functions are the most conventional technique of creating JavaScript objects that rely on prototyping inheritance to utilize each other’s functionalities. A key characteristic of these functions is that they can be instantiated and inherited from.

Let’s see an example of how constructor functions can be used in OOJS.

Here is what is happening on the above code:

  • Constructor functions are created just like regular functions. However, the difference is that the this keyword is employed for declaring properties and methods. In this case, this represents the object presently in the scope of the Liveedu function.
  • A new object referred to as liveedu is created using the new operator. Typically, new binds the newly created object to the this operator within the called constructor function. Consequently, the binding enables the liveedu object to acquire the properties and methods of the constructor function.
  • The liveedu object has a property referred to as prototype, which is where all inherited members are defined. So, when a function like watch() is called, the browser will move up the chain of objects and their respective prototype properties until it retrieves its value.
  1. Using prototyping inheritance

JavaScript objects can also be created using the concept of prototypical inheritance. Most modern browsers implement prototypes using a special property called __proto__, which is pronounced as dunder proto (shortened version of double underscore prototype).

Let’s use the following examples to illustrate how __proto__ can be used in prototyping inheritance.

As you can see on the above code, both objects have similar methods, which make the code look redundant.

Therefore, to make the objects share the same watch method, we can use the __proto__ prototype property. In other words, we can use the prototype to extend the properties of the objects.

Here’s is the rewrite of the above code:

As you can see on the above code, both the objects share the same method that is defined in WatchProto. The liveedu and livecoding objects can directly access it, leading to cleaner and efficient code.

It’s important to note that __proto__ is a new JavaScript ES6 syntax that may not be available in old browsers. Alternatively, you can use the Object.create() method to create prototypes.

Here is an example:

Wrapping up

Understanding JavaScript objects is key to getting deeper into the ubiquitous language.

What’s your experience with implementing the object-oriented programming features of JavaScript?

Please share your comments and questions below.

Avatar
About author

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.