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:
-
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var liveedu = { //declaring properties student: "james", //declaring methods watch: function() { console.log("learn new tech skills"); }, }; //accessing methods and properties liveedu.watch(); //output is learn new tech skills |
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.
-
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function Liveedu(student) { // properties this.student = student; // methods this.watch = function() { console.log(this.student + "learns new tech skills"); } } // instantiating the object var liveedu = new Liveedu("James "); // accessing methods and properties liveedu.watch(); //output is James learns new tech skills console.log(Object.getPrototypeOf(liveedu)); // output is object |
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.
-
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var liveedu = { student: "james", watch: function() { return this.student + " is learning new skills"; } } var livecoding = { student: "felix", watch: function() { return this.student + " is learning new skills"; } } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var WatchProto = { watch: function() { return this.student + " is learning new skills"; } } var liveedu = { student: "james", __proto__: WatchProto } var livecoding = { student: "felix", __proto__: WatchProto } console.log(liveedu.watch()); //james is learning new skills console.log(livecoding.watch()); //felix is learning new skills |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var WatchProto = { watch: function() { return this.student + " is learning new skills"; } } var liveedu = Object.create(WatchProto); liveedu.student = "james"; |
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.
