JavaScript, as a versatile language, provides various methods to bundle data and functionalities, and one of the primary ways to do this is through objects.

What is an Object in JavaScript?#

In JavaScript, objects are data types that bundle up both data and functionalities. When a function is stored as a property within an object, it is termed a method. If a function exists independently, it is simply called a function.

Methods to Create Objects#

Method 1: Literal Notation#

Objects can be created directly using curly braces {}. This is a straightforward approach where properties and methods are defined within the braces as shown below:

let user1 = {
  name: 'Rabi',
  lastName: 'Siddique',
  show: function () {
    console.log('My name is ' + this.name + ' ' + this.lastName);
  },
};

user1.show(); // Outputs: My name is Rabi Siddique

This method is simple but becomes inefficient and repetitive, especially when dealing with a large number of objects, as it violates the DRY (Don’t Repeat Yourself) principle.

Method 2: Using Dot Notation#

Another method involves creating an empty object and then dynamically assigning properties to it using dot notation:

let obj4 = {};
obj4.name = 'Yousaf';
obj4.lastName = 'Javed';
obj4.show = function () {
  console.log('My name is ' + this.name + ' ' + this.lastName);
};

obj4.show(); // Outputs: My name is Yousaf Javed

Method 3: Object.create Method#

The Object.create() method allows for the creation of an object with a specified prototype object and properties.

let obj5 = Object.create(null); // Creates an empty object without any prototype linkage
obj5.name = 'Ibrahim';
obj5.lastName = 'Javed';
obj5.show = function () {
  console.log('My name is ' + this.name + ' ' + this.lastName);
};

obj5.show(); // Outputs: My name is Ibrahim Javed

Optimizing Object Creation: Avoiding Redundancy#

When designing applications, especially those requiring a multitude of user objects, efficiency and scalability become critical. The methods described above are not optimized for memory usage or code reusability.

Solutions#

Factory Functions#

Factory functions help create objects on the fly and can be a more scalable solution:

function userCreater(name, lastName) {
  return {
    name,
    lastName,
    show: function () {
      console.log('My name is ' + this.name + ' ' + this.lastName);
    },
  };
}

let obj6 = userCreater('Rabi', 'Siddique');
obj6.show(); // Outputs: My name is Rabi Siddique

However, each object created this way has its own copy of the show function, which can lead to unnecessary memory use.

Improved Solution: Prototype Inheritance#

A more memory-efficient approach involves using prototypes, where all objects share a common set of methods:

let commonStuffBetweenObjects = {
  show: function () {
    console.log('My name is ' + this.name + ' ' + this.lastName);
  },
};

function userCreaterII(name, lastName) {
  let user = Object.create(commonStuffBetweenObjects);
  user.name = name;
  user.lastName = lastName;
  return user;
}

let obj7 = userCreaterII('Rabee', 'Siddique');
obj7.show(); // Outputs: My name is Rabee Siddique

Classes: Syntactic Sugar over Prototypes#

Introduced in ES6, classes provide a cleaner and more intuitive syntax for dealing with objects and inheritance in JavaScript:

class UserCreaterIV {
  constructor(name, lastName) {
    this.name = name;
    this.lastName = lastName;
  }

  show() {
    console.log('My name is ' + this.name + ' ' + this.lastName);
  }
}

let obj10 = new UserCreaterIV('Hello', 'World');
obj10.show(); // Outputs: My name is Hello World