Object Creation Methods — JavaScript

Manoj - Oct 27 - - Dev Community

In JavaScript, almost “everything” is an object. Understanding how to create and work with objects effectively is fundamental to becoming proficient in JavaScript development.

All the objects created inherits directly from the built-in Object.prototype by default.

There are several ways to create object in JavaScript. Here are some common methods:

1. Object Literals

Simple and Straightforward way to create a object without specifying a prototype explicitly.

const obj = {
    property1: "value1",
    property2: "value2"
};
Enter fullscreen mode Exit fullscreen mode

2. Using the new keyword with Object Constructor

We can create objects using the built-in Object constructor function along with the new keyword.

const obj = new Object();
obj.key1 = value1;
obj.key2 = value2;
Enter fullscreen mode Exit fullscreen mode

3. Object.create() Method

Unlike other object creating methods Object.create() allows us to explicitly specify the prototype of the newly created object.

const prototypeObject = {}; // Prototype object
const obj = Object.create(prototypeObject);
Enter fullscreen mode Exit fullscreen mode

Prototype chain of the new object will include the prototypeobject provided as an argument, and ultimately, it will inherit from Object.prototype.

4. Factory Functions

A simpler approach to create objects by encapsulating the object creation process within a function.

function myFunction(key1, key2) {
    return {
        key1: key1,
        key2: key2
    };
}

const obj = myFunction(value1, value2);
Enter fullscreen mode Exit fullscreen mode

5. Using Function Constructors

We can define a constructor function and then create objects from it using the new keyword which is useful for creating multiple objects with the same structure.

Constructor functions typically start with a capital letter by convention.

function MyObject(key1, key2) {
    this.key1 = key1;
    this.key2 = key2;
}
const obj = new MyObject(value1, value2);
Enter fullscreen mode Exit fullscreen mode

6. Using ES6 Classes

Introduced in ES6, class syntax allows us to define object blueprints more clearly.

Classes are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance.

class MyClass {
    constructor(key1, key2) {
        this.key1 = key1;
        this.key2 = key2;
    }
}
const obj = new MyClass(value1, value2);
Enter fullscreen mode Exit fullscreen mode

Quick Question: Is it possible to create an object with no prototype methods?


Thank you for reading! I hope you found this blog informative and engaging. If you notice any inaccuracies or have any feedback, please don’t hesitate to let me know.

. .