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.

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