top

Search

JavaScript Tutorial

Objects are the most important concept in JavaScript because in JS everything is an Object.Object DefinitionsThere 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.Creating a JavaScript ObjectThere 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"};Javascript Object PropertiesIn Object, we store values as a “Key-value” pair. The key is also called property or property name.Accessing Properties- h3You 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 asperson['occ'] . var person = {firstName:"Harry", lastName:"Potter", age:50, occ:"Wizard"}; console.log(person.firstName + ' is a ' + person['occ']); //Harry is a Wizardfor…in loop- h3The 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 //WizardAdding New PropertiesYou 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.Deleting PropertiesThe delete keyword can be used to delete a key-value pair from an Object. We can delete by both dot notation or bracket notationvar person = {firstName:"Harry", lastName:"Potter", age:50, occ:"Wizard"}; delete person.age; delete person['occ']; console.log(person); //{ firstName: "Harry", lastName: "Potter" }Object Methods in JavascriptIn 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() likevar 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 PotterJavascript Object ConstructorObject 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 functionWhen a function is called with “new” keyword, it is known as constructor function. And the value of “this” refers to the newly created instance.Object PrototypesIn 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.prototypeLet 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 45We 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
logo

JavaScript Tutorial

Objects

Objects are the most important concept in JavaScript because in JS everything is an Object.

Object Definitions

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.

Storage structure for JavaScript

Creating a JavaScript Object

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"};

Javascript Object Properties

In Object, we store values as a “Key-value” pair. The key is also called property or property name.

Accessing Properties- h3

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

Adding New Properties

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.

Deleting Properties

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" }

Object Methods in Javascript

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

Javascript Object Constructor

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.

Object Prototypes

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.prototypeJavaScript Code

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”.

prototype in JavaScript

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

JavaScript Code

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

JavaScript Code

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

Aditya

The tutorial provides the more information JavaScript this provides the end to end information about JS and also they provides the more detailed concepts of loops, functions, objects, arrays this will use us to buld the effective web site. Thanks for the team good job.

Suggested Tutorials

Node JS Tutorial

Build various types of web applications,command-line application,etc.
Node JS Tutorial

Build various types of web applications,command-line application,etc....

Read More

Angular JS Tutorial

Introduction: Angular  (What is Angular?)Angular was formerly introduced by Google corporation in 2012 and was considered to be one of the most promising among JavaScript frameworks. It was written completely in JavaScript to separate an application’s logic from DOM manipulation, aiming at dynamic page updates. Angular introduced many powerful features enabling the developer to effortlessly create rich and single-page applications.Topics CoveredThis Angular tutorial will span over eight modules, each module covering numerous individual aspects that you need to gain complete information about Angular. This set of modules serves as an Angular tutorial for beginners along with experienced IT professionals.Here are the topics that will be covered in the Angular tutorial:Get started with Angular.Learn the basics of Angular.Know what Angular Directives.Get an idea of Component Inputs and Outputs of Angular.Know about Forms in Angular.About Services in Angular.Pipes in Angular.HTTP, Routing and Building in Angular.Who can benefit from this tutorial?This Angular tutorial will be helpful to IT professionals such as:Software Developers, Web Application Programmers and IT Professionals Software Architects and Testing Professionals Career aspirants in web development
Angular JS Tutorial

Introduction: Angular  (What is Angular?)Angular was formerly introdu...

Read More