DEV Community

Satel
Satel

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
  }
})
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (5)

Collapse
 
codingjlu profile image
codingjlu

What about the Object constructor?

new Object;
new Object();
new Object({ initial: "value" });
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andrewbaisden profile image
Andrew Baisden

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

Collapse
 
satel profile image
Satel

Thanks, Andrew, I will check it

Collapse
 
andrewbaisden profile image
Andrew Baisden

Much better 😁

Collapse
 
stormytalent profile image
StormyTalent

Excellent explanation!
Thanks for sharing.