3 Ways to Create Objects in Object-Oriented JavaScript
Tags: objects, objectoriented, javascript, oop
Published: 2018-10-04 19:41:46

---
title: 3 Ways to Create Objects in Object-Oriented JavaScript
published: true
description: 
tags: objects, object-oriented, javascript, OOP
cover_image: https://thepracticaldev.s3.amazonaws.com/i/f75m4k27sgbvxyni05kf.jpg
canonical_url: https://blog.liveedu.tv/3-ways-to-create-objects-in-object-oriented-javascript/
---
(This article was originally published on my blog [here](https://blog.liveedu.tv/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](https://www.liveedu.tv/bautistaaa/lm4jx-how-to-build-a-simple-slack-clone-in-firebase-and-angularjs/w1Nzx-how-to-build-chatroom-web-app-like-slack-in-angu-9/), 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
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. 


# 2. Using object constructor functions

Constructor functions are the most conventional technique of creating [JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) 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.

```javascript
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.

# 3. 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. 

```javascript
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:

```javascript
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:

```javascript
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.