JavaScript Best Practices — Creating Objects

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at the best ways to create JavaScript objects, which isn’t by using the Object constructor.

Don't Use the Object Constructor

The Object constructor lets us create an object. However, it isn’t needed to create an object since there’re shorter ways to do it.

For instance, instead of writing the following using the Object constructor to create an object, we can instead write:

const obj = new Object();
obj.a = 1;
obj.b = 2;

We can instead write:

const obj = {
  a: 1,
  b: 2
};

As we can see, we avoid a lot of extra typing by creating an object literal directly rather than using the Object constructor.

We can also create constructor functions or classes to create a template function that we can use to create new objects.

For instance, we can create the Person constructor function using the class syntax so that we can create new Person objects with it using the new operator.

We can write the following to create the Person constructor:

class Person {
  constructor(name) {
    this.name = name;
  }
}

In the class above, we have the name parameter which is used to set the name instance variable in the Person instance.

Then we can create multiple Person instances with it as follows:

const jane = new Person('jane');
const joe = new Person('joe');
const alex = new Person('alex');

In the code above, we created 3 new Person instances, with different values for this.name which we passed in from the name parameter.

We can also add instance methods to a class by writing the following:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet(greeting) {
    return `${greeting} ${this.name}`;
  }
}

In the code above, we have the greet instance method, which takes a greeting string and combine it with the this.name instance variable.

Then we can call it as follows:

console.log(jane.greet('hi'));
console.log(joe.greet('hi'));
console.log(alex.greet('hi'));

We then get:

hi jane
hi joe
hi alex

logged in the console log output as we called greet to pass in 'hi' as the value of greeting .

As we can see, with JavaScript classes, we can create objects that has the same instance variables and methods in it.

Another way to create objects is by using the Object.create method. This method is useful since we can set the prototype of an object as we’re creating the object.

For instance, if we want to create an object that has another object as its prototype, we can write the following code:

const bar = {
  a: 1
}
const foo = Object.create(bar);
foo.b = 1;
foo.c = 2;

In the code above, we have the bar object, which is used as the prototype of the foo object by using the Object.create method.

Then we added extra properties b and c to the foo object itself. b and c are foo ‘s own, or non-inherited property, and a is the property of the prototype of foo .

The prototype is the template object for the child object. An object inherits property from its prototype.

If we log the foo object, we get that foo‘s __proto__ property has property a with its value set to 1.

If we want to create an object without a prototype, we can call the Object.create method with the argument null so that the __proto__ property won’t be set.

For instance, we can write the following to create the object:

const foo = Object.create(null);
foo.b = 1;
foo.c = 2;

Then if we log the value of foo , we’ll see that it has no __proto__ property, which means that the object has no prototype.

Conclusion

There’re many ways to create an object in a concise manner. We shouldn’t use the Object constructor to create an object.

This is because it provides us with no benefits over defining object literals. They both inherit from Object and using the constructor is just a long way to do the same thing.

Alternative ways to create object including using classes as a template for new objects.

Finally, we can use the Object.create to create an object with the prototype that we want.