Exploring the Different Ways to Create Objects in JavaScript


When programming in JavaScript, one of the key concepts is object-oriented programming. Objects allow you to store data and functions in a structured way, making it easier to organize your code and access your data. There are many ways to create objects in JavaScript, but in this blog post, we will explore three popular approaches.

Code 1: Object Literal Notation

In JavaScript, the this keyword inside a function refers to the object that the function is a property of or the object that the function is called on. However, the behavior of the this keyword inside an arrow function is different from regular functions.

One way to create objects in JavaScript is using object literal notation. This approach involves defining the object properties and methods within curly braces. Here's an example:

const student = {
fullName: "Ram",
  father: "Sam",
  age: 12,
  address: "cherry road",
  city: "salem",
  about: function () {
    return `${this.fullName} is from ${this.city}`;
  },
  eligibility: function () {
    return this.age>= 18;
  },
};

This code creates a student object with several properties, including fullName, father, age, address, and city. It also has two methods, about and eligibility.

Code 2: Factory Function

Another approach to creating objects is using a factory function. This involves creating a function that returns a new object with the desired properties and methods. Here's an example:

const studentMethod = {
  about: function () {
    return `${this.fullName} is from ${this.city}`;
  },
  eligibility: function () {
    return this.age>= 18;
  },
};

function addStudent(fullName, father, age, address, city) {
  const user = {};
user.fullName = fullName;
user.father = father;
user.age = age;
user.age = age;
user.address = address;
user.city = city;
user.about = studentMethod.about;
user.eligibility = studentMethod.eligibility;
  return user;
}

console.log(addStudent("Sam", "Raja", 25, "Gandhi Road", "Salem"));

This code creates a function addStudent that takes in several parameters for the student's properties and then creates an empty object. The function then sets the object's properties and methods using the studentMethod object, which contains the shared methods.

Code 3: Prototype Inheritance

A third approach is using prototype inheritance. This involves creating a prototype object with shared methods and properties, and then creating new objects that inherit from the prototype. Here's an example:

const studentMethod = {
  about: function () {
    return `${this.fullName} is from ${this.city}`;
  },
  eligibility: function () {
    return this.age>= 18;
  },
};

function addStudent(fullName, father, age, address, city) {
  const user = Object.create(studentMethod);
user.fullName = fullName;
user.father = father;
user.age = age;
user.age = age;
user.address = address;
user.city = city;
  return user;
}

console.log(addStudent("Sam", "Raja", 25, "Gandhi Road", "Salem"));

This code is similar to Code 2, but it uses Object.create to create a new object that inherits from studentMethod. This means that the new object has access to all the methods and properties defined in studentMethod.

In summary, there are different ways to create objects in JavaScript, and each approach has its own advantages and disadvantages. Table below provides a quick comparison of the three approaches discussed in this blog post.

Approach Advantages Disadvantages
Object Literal Notation Simple and easy to read Does not allow for creating multiple instances
Factory Function Allows for creating multiple instances with shared methods Requires an extra function to create each instance
Prototype Inheritance Allows for creating multiple instances with shared methods and avoids duplicating methods Can be more complex to understand

In conclusion, choosing the right approach for creating objects in JavaScript depends on the requirements of your project and your own coding preferences. By understanding the different approaches and their tradeoffs, you can make informed decisions and write more efficient and effective code.

List of Programs


JS Practical Questions & Answers


JS Practical Project