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.
Top comments (5)
What about the Object constructor?
Nice simple tutorial thanks for sharing. BTW you can add syntax colour highlighting to your code blocks in Markdown. Google it 🙂
Thanks, Andrew, I will check it
Much better 😁
Excellent explanation!
Thanks for sharing.