Creating Objects in JavaScript
JavaScript is an object-based language and in JavaScript almost everything is an object or acts like an object. So, to work with JavaScript effectively and efficiently we need to understand how objects work as well as how to create our own objects and use them.
JavaScript Object
A JavaScript object is a variable that can hold many different values. It acts as the container of a set of related values. For example, recipes in a cookbook, users of a website or payments in a bank could all be JavaScript objects.
In JavaScript, objects can store two kinds of values:
1. properties for static values
2. methods for dynamic values
When we create a JavaScript object, we need to define its name, properties, and methods.
Creating Objects in JavaScript
There are four different ways to create objects:
1. Object Literals.
2. Constructor Functions.
3. ECMAScript 6 Classes.
4. Object.create Method.
Let’s look at each one of them in detail.
1. Object Literals
Object literals are a comma-separated list of key-value pairs wrapped in curly braces. As objects are variables, we can instantiate them the same way as a variable. For example, the following code creates an object called userProfile001 with three properties: firstName, lastName, and dateOfBirth:
We can also add a method to an object literal. For example, the getName() method below takes two properties of the userProfile001 object (firstName and lastName) and returns the user’s full name. The this keyword refers to the current object of which properties the method is calling.
2. Constructor Functions
The second method of creating a JavaScript object is to use the constructor function. We define an object type without any specific values. Then, we create new object instances and populate each of them with different values.
Below, we can see the same userProfile001 object defined by using a constructor function called function User(). The constructor creates an object type called User(). Then, we create a new object instance called userProfile001, using the new operator. The constructor function contains three this statements that define the three properties with empty values. The values of the properties are added by each object instance.
Besides properties, we can also define methods within a constructor function. We need to use almost the same syntax as with methods created for object literals. The only difference is that here, we also need to add the this keyword before the name of the method.
3. ECMAScript 6 Classes
ECMAScript 6 introduced the class keyword to create classes in JavaScript. Now we can use the class attribute to create a class in JavaScript instead of a function constructor, and use the new operator to create an instance. With the new ES6 class syntax, the userProfile001 object can be created in this way:
4. Object.create Method
We can also create new objects using the Object.create() method, which allows us to use an existing object literal as the prototype of a new object we create. Let’s say we want to create a userProfile002 object that has the same properties and methods as userProfile001, just with different values.
We use the Object.create() method to instantiate the new userProfile002 object. We need to add userProfile001 as an argument of the create() method, as that will be the prototype of the new object. Then, we simply set the values for the three properties (firstName, lastName, dateOfBirth) using the familiar dot notation.
Conclusion
In JavaScript, there are four ways to create an object — using object literals, constructor functions, ES6 classes and object.create method, which is very useful when we need to create an object using an existing object as a prototype.
Thank you for reading.
