How to Create Objects in JavaScript?

When you start working with JavaScript, one of the most important concepts you’ll implement in your project is ‘Object’. Objects are almost everywhere in JavaScript — from DOM elements to configurations and even in API responses as well. Having proper understanding about Objects in JavaScript, is super important for becoming a proficient JavaScript Developer.

In this guide, we’ll explore several handy ways to create objects, with code examples, explanations, and use cases to help you learn step by step.

So, Let’s dive deep into it –

What is an Object in JavaScript? What are it’s Features?

In JavaScript, an object is a standalone real world entity, which has some properties and a type. It’s similar to real-life objects like a Bike or Car — which has properties like color, model, and brand, and methods like drive() or brake().

Let’s see how does an object look like conceptually as well as in practical life –

Features of JavaScript Object:

Object Properties :

In all the OOPs supported programming languages, every Object will have some properties and some behaviors / methods / functions.

A JavaScript Object property is basically a connection bridge between a name (or key) and a value.

Object Behaviors / Methods :

Methods are defined the way normal functions are defined, the only difference is that – they have to be assigned as the property of an object.

Within a class body, there are numerous features available, such as –

************************************
******** LogicalDuniya.com *********
************************************

class Car {
  // Constructor
  constructor() {
    // Constructor body
  }

  // Instance field
  carName = "Tesla";

  // Instance method
  drive() {
    // drive method body
  }

  // Static field
  static carType = "Electric";

  // Static method
  static getCarCompany() {
    // getCarCompany method body
  }

  // Static block
  static {
    // Static initialization code
  }

  // Private field
  #engineNumber = "ENG12345";
}

There are different ways to declare, define and use Objects in JavaScript. Let’s learn about the most important ones first –

1. Using Object Literals

This is the simplest way to create an object in JavaScript.

const site = {
  name: "LogicalDuniya.com",
  viewers: 1100000,
  greet: function() {
    console.log(`Hello Learners, Welcome to ${this.name}`);
  }
};

site.greet(); // Output = Hello Learners, Welcome to LogicalDuniya.com

2. Using the new Object() Syntax

You can also create an object using JavaScript’s built-in Object constructor.

const site = new Object();
site.name = "LogicalDuniya.com";
site.yearOfLaunch = 2010;
site.greet = function() {
  console.log(`Hello, I am ${this.name}`);
};

site.greet(); // Output = Hello, I am LogicalDuniya.com

You can also create an object using JavaScript’s built-in Object constructor. You can use this useful way of creating objects in JavaScript, When you prefer a more object-oriented structure or need to dynamically build your object.

3. Using a Constructor Function

function Site(name, theYearOfLaunch) {
    this.name = name;
    this.yearOfLaunch = theYearOfLaunch;
    this.greet = function() {
      console.log(`Hi!! I’m ${this.name}`);
    };
  }
  
  const s1 = new Site("Logical", 12);
  const s2 = new Site("Duniya", 12);
  
  s1.greet(); // Output = Hi!! I’m Logical
  s2.greet(); // Output = Hi!! I’m Duniya

A constructor function acts like a blueprint for creating multiple objects. when you require to create multiple similar objects with shared structure, this will be the perfect way to proceed further.

4. Using Object.create()

const site = {
    teaches: true,
    jsTutorial: function() {
      console.log("A New JS Tutorial Published !!");
    }
  };
  
  const siteLogicalDuniya = Object.create(site);    // Creating an Object in JavaScript..
  siteLogicalDuniya.ranks = true;
  
  console.log(siteLogicalDuniya.teaches);           // Output = true
  siteLogicalDuniya.jsTutorial();                   // Output = A New JS Tutorial Published !!

Using this method, you create a new object using an existing object as the prototype. It is useful, when you want to build inheritance in a clean and prototype-based manner.

5. Using JSON

const jsonString = '{"site":"LogicalDuniya.com","views":10000000}';
const site = JSON.parse(jsonString);

console.log(site.name);   // Output = LogicalDuniya.com

You can also create an object using JSON syntax and then parse it. This way of creating Objects in JavaScript is useful in receiving data from a server or an API and converting it to a usable JS object.

🚀 Interview Tips
1. Always know the difference between shallow copy and deep copy while creating objects.

2. Understand prototype chain and inheritance when using Object.create() or classes.

3. Use ES6+ features like object destructuring and shorthand methods to simplify object manipulation.

Conclusion📝

In this JavaScript Guide, we explored How to create Objects in JavaScript with help of multiple ways, such as object literals, constructor functions, Object.create(), and more. We learned how object-oriented programming principles apply in JavaScript.

Whether you’re building a single-page application or a microservice architecture, mastering objects is essential. Each object creation method serves a different purpose — some are best for reusability, others for inheritance, and others for clean syntax.

Next 👇

• To learn more simple and detailed JavaScript guides, do check our “Free” JavaScript Mastery Series.

• To use 100s of “Free” tools to fasten your daily Development, Testing and Content Writing tasks, visit our – Tools.LogicalDuniya.com
• Check this to know about more other interview related JavaScript Tutorials and for other latest technologies & concepts – visit the Tutorials page.

Happy Learning,
Shubham : )