1001 ways to create objects in JavaScript

One of the most basic ways is to create an empty object with the new keyword based on the Object() built-in constructor function, and then add properties individually.

Literary notation

This type of object creation is the simplest, and is based on defining an object property between curly braces:

Basic Factory Function

Factory function is any function that returns a new object that is not a constructor function or class.

This is a simple way of creating a function, which is usually based on the object literal, and is used when we want to avoid the complexity of classes or constructor functions. However, unlike the object literal, with which we can create only one object at a time, the “factory function” can generate more than one.

“Literal for ONE, Factories for Many”

or even simpler:

This approach, by instantiating each new object, also copies the object’s methods, which leads to unnecessary consumption of resources, especially if the object has a large number of methods. To avoid wasting resources, we need to take advantage of “prototype inheritance, where methods are instantiated only once within the “prototype” object. This approach is used in the “Advanced Factory functions” procedure explained below.

Constructor f

When using the new reserved word, a new object is created based on the constructor function with a copy of all properties from the constructor function.

The new object got its own copy of all the properties (they are not just delegated), so if we now change a property in the constructor function, it will not affect the instantiated object:

If a large number of instances are planned, this method is not really recommended because when each object is instantiated, the method will also be instantiated, which unnecessarily consumes part of the resources. In that case, it is better to use the “constructor function + prototype object” template, where the methods are separated within the “prototype object”. With that template, only the properties from the constructor function are instantiated in the new objects, while the methods are delegated through the prototype chain of inheritance (which means that there are no unnecessary method instances).

Constructor f-ja + prototype object

When using the reserved word new, a new object is created based on the constructor function with a copy of all properties from the constructor function, and at the same cost, the instantiated object is connected to the “prototype object” of the constructor function, delegating all methods to it. It is recommended that methods be placed in the prototype object and that the constructor function be used to initiate the required properties.

Example

Tasks “new” reserved words

Each function can be a constructor, and it becomes so only when the reserved word new is called. When using the reserved word new, the following processes occur:

1. New object is being created
2. Associates the new object with the “prototype object” of the constructor function after which it can use its delegate methods
3. If the constructor function does not return any value, then new adds “return this” behind the scenes ie. returns a newly generated object.
4. The reserved word “new” behind the scenes “redirects” this, to point to instantiated objects instead of a global object.

What happens if we call the constructor f without the reserved word “new”?

If we call (invoke) the constructor function without the reserved word “new”, it will return an error, because nothing is returned:

However if we explicitly add “return this” to the previous constructor function and call it again, it will correctly return the property values:

Object.create()

With the Object.create() method, an object is created, which during creation is defined from which object the methods are delegated via the “prototype chain” (properties are not copied!). The syntax for creating an object is:

The Object.create() method performs the following tasks in the background:
1.) A new object
is created
2.) The new object is connected to the object from which it was created and thus inserted into the chain of inheritance, after which it can have access to its delegated methods
3.) Optionally, it can also define new properties of the object.

Parameter “proto”

The first parameter passed to the “Object.create” method is “proto”. It points to the object from which our object will inherit methods. If we want to create an object, which will not inherit anyone’s methods, then we use the value “null” for the parameter.

Optional “propertiesObject” parameters

The “propertiesObject” parameter is optional and through it new properties are added to the constructor function. However, it should be emphasized that the properties added in this way by default have all property descriptors set to FALSE, so they are immutable and unusable in the for…in loop.

Therefore, if we add properties in this way, it is necessary to predefine the descriptors:

A new object created with Object.create() is most often created based on a “prototype object”, but any “ordinary” object can be chosen as a “model”. We are not obliged to define new object properties through this optional parameter “Object.create(), we can define them later with Object.defineProperty():

Advanced Factory functions

Unlike the procedure “Basic factory functions” which does not take advantage of prototypical inheritance, with Advance Factory functions we place object methods in a prototype object, where they are instantiated only once and are available to all created objects.

In the previous example, the variables autoPrototype and autoFactory are global, so it is best to “pack” all of that into IFFE.

It is now “autoPrototype”closure and is only available from the constructor function.

ES6 class

There are NO CLASSES and inheritance in JavaScript as they exist in other object-oriented programming languages! The reserved word “class” in JavaScript is just an aesthetic replacement (eng. syntactical sugar) for the constructor function and “prototype object”, and inheritance is actually delegating properties and methods through the “prototype chain of inheritance”. In JavaScript, a “class” is a special type of function, which, unlike a regular function, cannot be called (invoke) but is used with the reserved word new. The body of the class is executed in “strict mode”.
Constructor is a special method that creates and initializes an object using the “class” keyword. This method is the counterpart to the constructor function from ES5. There can only be one constructor method within a class.

NOTE:
Creating objects in Javascript with the reserved word “class” is not static (immutable after declaring the object) as it is in other programming languages, because even after instantiation the object remains “bound” to the class by delegating methods from the “prototype object”. If we add or change a method in the class, the changed method will be delegated to the created object.

Class syntax

There are two syntaxes to define a class in JavaScript:

Class declarations

The main difference between a function declaration and a class declaration is that classes are not “hoisted” when compiled to the beginning of the program code as a function. So care should be taken to define the class before using “new” to create a new object.

Class expressions

This is a less used way of defining classes:

You can read more about classes in the article “Classes in JavaScript”.