Different ways to create an Object in Javascript

There are several ways to create an object in Javascript. Let's go through one by one.

Object literal

Often used to store one occurrence of data

const person = {
  name: "John",
  age: 50,
  birthday() {
    this.age++
  }
}
person.birthday() // person.age === 51

Constructor

Often used when you need to create multiple instance of an object, each with their own data that other instance of the class cannot affect. The new operator must be used before invoking the constructor or the global object will be mutated.

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.birthday = function() {
  this.age++
}
const person1 = new Person("John", 50)
const person2 = new Person("Sally", 20)
person1.birthday() // person1.age === 51
person2.birthday() // person2.age === 21

Factory function

Creates a new object similar to a constructor, but can store private data using a closure. There is also no need to use new before invoking the function or the this keyword. Factory functions usually discard the idea of prototypes and keep all properties and methods as own properties of the object.

const createPerson = (name, age) => {
  const birthday = () => person.age++
  const person = { name, age, birthday }
  return person
}
const person = createPerson("John", 50)
person.birthday() // person.age === 51

Object.create()

Sets the prototype of the newly created object

const personProto = {
  birthday() {
    this.age++
  }
}
const person = Object.create(personProto)
person.age = 50
person.birthday() // person.age === 51

A second argument can also be supplied to Object.create() which acts as a descriptor for the new properties to be defined.

Object.create(personProto, {
  age: {
    value: 50,
    writable: true,
    enumerable: true
  }
})

Conclusion

• Prototypes are objects that other objects inherit properties and methods from.
• Factory functions offer private properties and methods through a closure but increase memory usage as a tradeoff, while classes do not have private properties or methods but reduce memory impact by reusing a single prototype object.

Comments

[codingjlu]

What about the Object constructor?

new Object;
new Object();
new Object({ initial: "value" });

[Andrew Baisden]

Nice simple tutorial thanks for sharing. BTW you can add syntax colour highlighting to your code blocks in Markdown. Google it 🙂

[Satel]

Thanks, Andrew, I will check it

[Andrew Baisden]

Much better 😁

[StormyTalent]

Excellent explanation!
Thanks for sharing.