Objects are the most important concept in JavaScript because in JS everything is an Object.
There are seven data types in JavaScript. Six of them are primitives and we have learnt about them earlier. They are primitives because their values contain only a single thing (be it a string or a number or whatever).
In contrast, objects are used to store keyed collections of various. An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where key is a string (also called a “property name”), and value can be anything.
We can imagine an object as a cabinet with signed files. Every piece of data is stored in its file by the key.
There are different ways to create JavaScript Objects.
Using the Object() constructor:
var d = new Object();
This is the simplest way to create an empty object.
Using Object.create() method:
var a = Object.create(null);
This method was introduced in ES6 and creates a new object extending the prototype object passed as a parameter.
Using Object Literal:
var b = {};
This is equivalent to Object.create(null) method, using a null prototype as an argument.
You can also define and create an object in the same statement.
var person = {firstName:"Harry", lastName:"Potter", age:50, occ:"Wizard"};
In Object, we store values as a “Key-value” pair. The key is also called property or property name.
You can access the property of an Object by two format - dot notation or bracket notation. In below example we have used both dot notation as person.firstName and bracket notation as
person['occ'] . var person = {firstName:"Harry", lastName:"Potter", age:50, occ:"Wizard"}; console.log(person.firstName + ' is a ' + person['occ']); //Harry is a Wizard
for…in loop- h3
The for…in loop is used to iterate over properties of an Objects.
//Object example var person = {firstName:"Harry", lastName:"Potter", age:50, occ:"Wizard"}; for(const key in person) { console.log(person[key]); } //Harry //Potter //50 //Wizard
You can add key-value pair also by two format – dot notation or bracket notation.
// dot notation var developer = new Object(); developer.firstName = "Larry"; developer.lastName = "Armstrong"; developer.role = "frontend"; console.log(developer); //{ firstName: "Larry", lastName: "Armstrong", role: "frontend" } // bracket notation var person = Object.create(null); person["First Name"] = "Tim"; person["Last Name"] = "Horton"; person["Age"] = 67; console.log(person); //{ "First Name": "Tim", "Last Name": "Horton", Age: 67 }
The benefit of the bracket notation is that we can have keys with spaces in it as in the above example.
The delete keyword can be used to delete a key-value pair from an Object. We can delete by both dot notation or bracket notation
var person = {firstName:"Harry", lastName:"Potter", age:50, occ:"Wizard"}; delete person.age; delete person['occ']; console.log(person); //{ firstName: "Harry", lastName: "Potter" }
In JavaScript Objects can have method or function as a property value. In the below example, we have a method, which has a value as an anonymous function. Notice, that inside the method, we use this.pr0pertyName like this.firstName to access other properties.
To access a method from outside we need to call objectName.methodName() like
var person = {firstName:"Harry", lastName:"Potter", age:50, occ:"Wizard"}; delete person.age; delete person['occ']; console.log(person); //{ firstName: "Harry", lastName: "Potter" }
We can also add a new method after this Object is created and gives flexibility to dynamically add method. We are updating the above Object and adding a new method fullName after it is initially created.
var person = { firstName:"Harry", lastName:"Potter", age:50, occ:"Wizard", fullBio: function() { console.log(this.firstName + ' ' + this.lastName + ' aged ' + this.age + ' is a ' + this.occ); } }; person.fullName = function() { console.log(this.firstName + ' ' + this.lastName); } person.fullName(); //Harry Potter
Object constructor is nothing but Constructor functions. They are basically a JavaScript way to implement the concept of Classes.
Let’s refactor the above example to create as many wizards as we need. In the example below, we have a “Hogward” constructor function. In it, we have firstName, lastName, age, which we are also returning by getInfo(). Now we can create a new instance of it by using the “new” keyword. Each instance will have its own “this” and have its own getInfo().
let Hogward = function(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age this.getInfo = function() { console.log(this.firstName + ' ' + this.lastName + ' aged ' + this.age); } } let harryWiz = new Hogward('Harry', 'Potter', '50'); console.log(harryWiz.getInfo()); //Harry Potter aged 50 let hermoineWiz = new Hogward('Hermoine', 'Granger', '45'); console.log(hermoineWiz.getInfo()); //Hermoine Granger aged 45
“this” with constructor function
When a function is called with “new” keyword, it is known as constructor function. And the value of “this” refers to the newly created instance.
In JavaScript, as you know everything is an Object. So whenever we create a function, there is one object which is created. but actually, there is another object which is created which is known as the prototype object in Javascript.
Consider the below example. In the below example foo has the property which is able to access its prototype. The properties, also known as prototypes and it is written as foo.prototype
Let consider the below sample to understand it better. Whenever a function is created there are two objects, one is the function object another is the prototype object. Now to access the Prototype object we have a property on the function object also known as “prototype”.
In the Hogward example in Object constructor, we have a problem. Every time we create a new instance we get a new copy of getInfo(). Suppose we have 100 instances, then we will have 100 copies. The below-console log shows the same thing.
let Hogward = function(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age this.getInfo = function() { console.log(this.firstName + ' ' + this.lastName + ' aged ' + this.age); } } let harryWiz = new Hogward('Harry', 'Potter', '50'); console.log(harryWiz.getInfo()); //Harry Potter aged 50 let hermoineWiz = new Hogward('Hermoine', 'Granger', '45'); console.log(hermoineWiz.getInfo()); //Hermoine Granger aged 45
We should somehow move the logic for getInfo()outside our Constructor function and that is where the concept of Prototype helps.
Every instance created from the function has access to the Prototype object. Now, let’s move our getInfo()outside our Constructor function using the prototype.
let Hogward = function(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } Hogward.prototype.getInfo = function() { console.log(this.firstName + ' ' + this.lastName + ' aged ' + this.age); } let harryWiz = new Hogward('Harry', 'Potter', '50'); console.log(harryWiz.getInfo()); //Harry Potter aged 50 let hermoineWiz = new Hogward('Hermoine', 'Granger', '45'); console.log(hermoineWiz.getInfo()); //Hermoine Granger aged 45
I have learned many things from this article. It is beneficial for me. Thank you!
Nice example for beginners.. I m a beginner so this is very helpful for me ... so plz give this type of beginners example..
This is a great introduction to variables in JavaScript! As a beginner to JavaScript, I found this guide very helpful in understanding the basics of variables and how they are used in JavaScript.
Thanks for sharing the information, it is very helpful, I hope to get more such beautiful blogs from you.
You have shared great information with me i appreciate your work!
Build various types of web applications,command-line application,etc....
Introduction: Angular (What is Angular?)Angular was formerly introdu...
Leave a Reply
Your email address will not be published. Required fields are marked *