Object Creation in JavaScript

This post is part of a series of posts on JavaScript object-oriented programming. Link to the series are as follows:

This series is as follows:

In the previous part of this series, we went through JavaScript objects and how they work under the hood. As a refresher, JavaScript objects are created at the low-level using new Object(). We will go through Object creation in JavaScript, but bare in mind that almost everything in JavaScript revolves around objects, and inherit from Object's prototype. Now let's examine different way how objects are created in JavaScript. In demonstrating object creation, we will focus on a representing a person.

Object constructor: new Object();

We've previously gone through creating an object using the Object constructor, but it's worth mentioning again to help solidify the concept.


    var person = new Object();
    person.id = 123;
    person.firstname = "John";
    person.lastname = "Fischer"
    person.age = 24;
    person.showMove = function(){
        console.log("I can do a split!");
    };

Object Literals

Using the new Object() constructor can be quite convoluted and lengthy, but object literals provide shortcut for creating objects, but under the hood, new Object() is still being used.


    var person = {
        id: 123,
        firstname: "John",
        lastname: "Fischer",
        age: 24;
        showMove : function(){
            console.log("I can do a split!");
        };
     }

Patterns for creating Objects

Constructor Functions

Constructor functions try to emulate the concept of classes in strongly typed languages such as C# and Java. There are some convention to adhere to though. The naming convention for constructor function starts with uppercase letter and the rest lowe-case letters.

Note: Functions are also objects. A function's prototype points to/inherits from Object which is the root object in JavaScript


    function Person(firstname, lastname, age) {
      this.firstname = firstname;
      this.lastname = lastname;
      this.age = age;
      this.showMove = function(){
        console.log("I can do a split!");
      }

    }

With this pattern, all kind of Person object can be created say, Bob and Alice.


    let alice = new Person("Alice", "Guru", 27);
    let bob = new Person("Bob", "Don", 32);

We now have Alice and Bob objects, and more can be created, but always pay attention that the constructor function is always instantiated or activated with the new keyword.

Factory function
Factory function is a pattern for creating objects, and it's reusable. We see how this function can be used to enforce privacy in later series. For now, let's see how to create object using the factory pattern.


    function createPerson(firstname, lastname, age) {
      return {
        firstname,
        lastname,
        age,
        showMove: function(){
            console.log("I can do a split!");
        }
      }

    }
    
    let alice = createPerson("Alice", "Guru", 27);
    let bob = createPerson("Bob", "Don", 32);

Prototype pattern
Objects can also be created in JavaScript using prototype property of an object. Remember that every created object in JavaScript automatically has a prototype at the time of creation. Let's see how we can use prototype to create an object.


    function Person() {
    }
    
    Person.prototype.firstname = "Bob";
    Person.prototype.lastname = "Guru";
    Person.prototype.age = 24;
    Person.prototype.showMove = function(){
      console.log("I can do a split!");
    }

We shall examine prototype property further as it holds the key to OOP in JavaScript.

This concludes the objection creation series. We'll use all we've learned so far in the next coming series to really make sense of OOP in JavaScript.

Happy coding.