J

JavaScript Handbook

Clean • Professional

Creating Objects in JavaScript

2 minute

Creating Objects in JavaScript

JavaScript provides multiple ways to create objects, each suited for different scenarios. Choosing the right method depends on your needs, such as simplicity, reusability, or inheritance.

learn code with durgesh images

1. Object Literal

The simplest and most common way to create an object, using curly braces {} to define key-value pairs directly.

  • Easy to write and read.
  • Ideal for creating single-use objects.
  • Supports nested objects and methods.
const person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

console.log(person.name); // "Alice"
person.greet();           // "Hello, my name is Alice"

2. Using new Object()

Objects can also be created using the built-in Object constructor:

  • Less common than object literals.
  • Useful when creating objects dynamically.
const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

person.greet(); // "Hello, my name is Bob"

3. Constructor Functions

A constructor function is a custom function designed to create multiple similar objects:

  • Use this to define properties and methods.
  • Instantiated with the new keyword.
  • Useful for creating many similar objects.
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const person1 = new Person("Charlie", 28);
const person2 = new Person("Diana", 32);

person1.greet(); // "Hello, my name is Charlie"
person2.greet(); // "Hello, my name is Diana"

4. Classes (ES6)

A modern, syntactic sugar over constructor functions, introduced in ES6 (2015), for creating objects with a cleaner syntax.

  • Syntax is more readable than constructor functions.
  • Supports inheritance with extends and super.
  • Encourages object-oriented programming.
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person("Eva", 26);
person1.greet(); // "Hello, my name is Eva"

5. Object.create()

Creates an object with a specified prototype, allowing custom inheritance from another object.

  • Directly sets the prototype of the new object.
  • Useful for prototype-based inheritance.
  • Does not require a constructor function or class.
const personProto = {
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const person = Object.create(personProto);
person.name = "Frank";
person.greet(); // "Hello, my name is Frank"

Comparison Table of Object Creation Methods

MethodSyntax ExampleKey Use Case
Object Literalconst obj = {}Simple objects, single-use
new Object()const obj = new Object()Dynamic object creation
Constructor Functionfunction Person(){}Multiple similar objects
ES6 Classclass Person {}Object-oriented, reusable, clean syntax
Object.create()Object.create(proto)Prototype-based inheritance

 

Article 0 of 0