JavaScript — Everything is an Object

Both in programming and real world, everything we see is an object. In real world, an object is a unique thing that possess characteristics and actions. For instance, lets take an real world common object ‘pen’. The characteristics of a pen explains us ‘what color it is?’, ‘what thickness it has?’, ‘what brand it is?’, ‘what type of pen it is?’, etc,. And we use pen to write something. That’s called here, ‘action’. Same applies for JavaScript Objects. Lets get deeper!

Basically, there are class-based and prototype-based languages. As JavaScript is prototype-based language, it simply has objects. A prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object.

Below are the list of concepts, we are gonna go through,

1. Anatomy of an Object
2. Possible ways to create an object

Anatomy of an Object

An Object is a unique entity that contains properties and methods. A property is a key value pair. Here, the value can be a function. In that case, the property is known as a method.

JavaScript Object Structure

Possible ways to create an object

1. Singleton pattern
2. Constructor Invocation Pattern
3. Object.create() & Object.assign()
4. ES6 Class

Singleton Pattern

1. Singleton is an object that can be instantiated only once.
2. In other words, a unique memory location is allocated if an object is created. If an object(lets call it as primary) is assigned to an new object(i.e secondary), it will return the reference of primary object. An update/modification to the secondary object will be reflected to all the object references(in this case, primary object is modified).

Singleton using Object Literal

Create Object using Object Literal

1. This is the simplest way of creating an object with curly brackets({}).
2. Object literal is also a singleton.

Singleton using a function

Create an object using Singleton Pattern

1. Using new keyword and function, a singleton object can be created.
2. Consider singleton pattern only if you have only one instantiation. Else, it will become a nightmare.

Constructor Invocation Pattern

1. Object Constructor
2. Function Constructor

The new keyword is used to invoke the function as a constructor. Here, a new context(a reference to the object that owns it — value of the ‘this’ keyword) is created.

Object Constructor

Create Object using Object Constructor

Creates an object using new keyword with in-built Object constructor (new Object()) function

Function Constructor

Create Multiple Objects using Function Constructor

Creates an object using new keyword and user defined function constructor/user defined prototype

Object.create() & Object.assign()

Object.create()

Create an object using Object.create()

1. Creates an object from other existing object by considering it as a prototype without new keyword.
2. We see here, an empty object({}) for the newObj variable. That’s because, the newly created object inherits the properties of existing object. But the inherited properties are still accessible(in this case, property company is inherited and newObj.company will print the value ‘SQA’) and we can see under ‘_proto_’ property.
3. It shows us the newly added properties and value as it is not inherited(in this case, location property is added)
4. It comes under the topic ‘Inheritance between objects’. we will not discuss in this blog as to keep focus on creating objects

Object.assign()

Creates an object by merging more than one object.

Create an object using Object.assign()

ECMAScript6 Class

Classes are native in JavaScript from ECMAScript6 version.

Create an object using ES6 Class

These are all the possible ways to create objects that I have experimented. I hope you understand the topic.

Thanks for reading the blog and if you think it was useful, please click the clap button to show your support. Continue learning more as you do!