Confused about what an object is? Is there any similarity between a real-life object and the one in the programming world? No worries stick around, we will not only understand what it is but also learn how to create an object in JavaScript.
So, let's begin.
Objects are similar to what life objects are. An example will help us understand better, say a car. It has a particular model, a color, a design, etc. which are its various properties. Likewise, objects in the programming world also have various properties associated with them.
There are a number of ways in which we can create an object, let's start with the simplest way i.e. object literal. So, we will try to syntactically represent the same example of the car mentioned above.
const car = {
model: "mustang gt",
color: "black",
};
Kaboom!! we have created an object with model and color properties. Here, inside the braces we have a key and value pair; model, color are keys whereas mustang gt, black are values. These values can be accessed and used further in the program.
Now, let's try to create another object named user that contains a function. Yes, objects can have functions too.
const user = {
firstName: "Popat",
lastName: "Lal",
greet: function() {
console.log('Welcome!');
}
};
Thus, user object with properties firstName, lastName, and greet have been created.
Now, suppose you need to display the full name of the user somewhere, how will you do it? Yes! by accessing the values of firstName, lastName and simply displaying them. You must be thinking how can one access them? No worries below are two ways, to explain the same.
Either, we can write objectName.propertyName or objectName["propertyName"] and to make it clear propertyName and keys are the same.
user.firstName;
//or
user["firstName"];
We can access the function in a similar way in which we access other properties user.greet but here, we also need to add parenthesis at the end ().
user.greet(); // Welcome!
//or
user["greet"](); // Welcome!
If we forget to add the parenthesis (), then it would simply return the function definition.
Now, that we have got a basic understanding of objects, let us look into a little more advanced way of creating objects using the constructor function.
One thing to be noted, by convention the name of the constructor function always starts with caps.
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log(`Hi! ${this.name}`);
}
}
const personOne = new Person('Jake', 25);
console.log(personOne);
personOne.greet(); // Hi! Jake
Here this refers to the object being created. If you want to know more about this keyword you can refer to this article this keyword.
Now, as shown above, to create an object from the constructor function we need to use the new keyword. And all the objects created from the Person function will have the name, age, and greet properties.
In, ES6 a new feature class was added for creating objects which is just a syntactic sugar over the constructor function. We are going to look into this in the upcoming blog.
That's it for now.
I hope that you have got a basic understanding of objects and how to declare them in JavaScript.
If you find this blog helpful do share it with your friends.