Interview Preparation — Object Oriented JavaScript-1

Welcome to part-10 of the series and the first part in Object Oriented JavaScript questions. You can find part-9 here.

In this part we will learn Object Oriented JavaScript the old way, which is a bit more complex because of it’s syntax. The latest ES6 classes are nothing but synthetic sugar, which uses these concepts only below the hood. But it is one of the important topics of interviews where they ask for OOPs knowledge.

Question 60- What are Constructor functions in JavaScript?
Answer- Constructor functions are special functions used to create instance of it. It is the JavaScript equivalent of Classes in other programming languages like C++ and Java.

Let’s start with creating a simple function using object to create employee objects.

var emp1 = createEmpObj("Parag", "Khandar", "M", "Project Manager");

Now consider the line var newObj = {}; and return newObj; They will be same in every function which we create. So, JS gave us a special type of function known as Constructor function to create them.

We will refactor the above to use Constructor function. Look at the below code.

var emp2 = new CreateEmpObj("Shikha", "Biswas", "F", "Developer");

We are adding the keyword new to create the object. It basically takes care of the creation and returning of the newObj. But gives this a new name this.
Note, that we don’t need to put those two line in our code and automatically put by JS engine.

Question 61- How to make variables private in Constructor functions in JavaScript?
Answer- Let us first consider the below code for normal Constructor function. Here we can directly access the variable “color” by redCar.color. Now, this might be not desirable at many places and in Traditional languages solved by the having “private” variables in class and then having “Getters” and “Setters” to access them.

let redCar = new Car('red');console.log(redCar.color); //red

Now, we implement the same in JavaScript using Closures. We have two closure functions setColor and getColor which are basically “setters” and “getters”. Now, the variable _color is private and cannot be accessed outside the function by blueCar._color and we can access it only by blueCar.getColor()

let blueCar = new PrivateCar();
blueCar.setColor('blue');
console.log(blueCar._color); //undefined
console.log(blueCar.getColor()); //blue

You can find the JSFiddle for the above here.

Question 62- What are Prototypes and how do we use them in JavaScript?
Answer- In JavaScript as you know everything is a Object. So whenever we create an function, there is a one object which is created. but actually there is another object which is created which is known as the Prototype object.
Now to access the Prototype object we have a reference on the function object also known as prototype.

Image for post
Image for post
The Prototype

When we create an instance of the function with the new keyword interesting things happens. It create something known as __proto__. This is created by the JavaScript engine for every function call using the new keyword.

Image for post
Image for post
new Keyword effects

Now, lets look how to create an function using prototype and the benefit of it. The below code have two function haveFun and drinkCoffee. The function haveFun is an normal function inside the Constructor function. The function drinkCoffee is created outside and added to the Prototype Object using it’s reference prototype.

Employee.prototype.drinkCoffee = function() {
console.log('coffee break')
}
let emp1 = new Employee('Nabendu');
let emp2 = new Employee('Shikha');
console.log(emp1.haveFun()); //Play badminton
console.log(emp1.drinkCoffee()); //coffee break

Both the function seems to be doing the same thing, then what’s the benefit. The benefit of declaring function using prototype is that it’s created once in the Prototype object. So, now whenever we create a new instance of the Constructor function the function is not created again. As in the below screenshot, you can see that emp1 and emp2 both have name and haveFun. But the drinkCoffee is inside the __proto__, which is a reference to Prototype object.

Image for post
Image for post
Benefit of Prototype

For more details on Objects & Prototypes, go through my post here.

Question 63- Explain Object.create() in JavaScript?
Answer- Every object is created from the global Object in JavaScript. If we look at it in console, it have many properties and create been one of it.

Image for post
Image for post
global Object in JavaScript

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.

Consider the below example, where we can create a new object from the existing object and can also add new properties to it or modify an existing property.

Now, let see a practical use of Object.create in Inheritance. In below example we have an Employee function, which have two functions in it’s Prototype. Then we have another function SalesEmployee and then set it’s Prototype to Employee’s Prototype.
SalesEmployee.prototype = Object.create(Employee.prototype);

Employee.prototype =  {
setName(_name) {
this.name = _name
},
getName() {
return this.name;
}
}
const SalesEmployee = function () {

}
SalesEmployee.prototype = Object.create(Employee.prototype);let emp1 = new SalesEmployee();console.dir(emp1);
console.log(emp1 instanceof SalesEmployee); //true
console.log(emp1 instanceof Employee); //true
console.log(emp1 instanceof Object); //true
emp1.setName('Shikha');
console.log(emp1.getName()); //Shikha

We then create an instance of the SalesEmployee as emp1 variable. It have all functions of Employee function and can also use it.

Image for post
Image for post
Output of above

Question 64- Explain Prototype chain in JavaScript using Object.create() ?
Answer- Prototype chain can be explained through below example. Here we have three functions Car, ToyCar and ToyTransformer. Each have there own version of print().

We are inheriting from Car to ToyCar by setting ToyCar’s prototype to be Car’s prototype and then inhering from ToyCar to ToyTransformer by setting ToyTransformer’s prototype to be ToyCar’s prototype.

Then we have three instances of Car, ToyCar and ToyTransformer. On calling the print(), we get the respective console log.

// Set Car's prototype
Car.prototype = {
print() {
return 'This is a Car';
}
};
// ToyCar constructor
const ToyCar = function() {};
// Set ToyCar's prototype to be Car's prototype
ToyCar.prototype = Object.create(Car.prototype);
// Adding ToyCar's own print method
ToyCar.prototype.print = function(){
return 'This is a ToyCar';
}

//ToyTransformer constructor
const ToyTransformer = function() {};
// Set ToyTransformer's prototype to be ToyCar's prototype
ToyTransformer.prototype = Object.create(ToyCar.prototype);
// Adding ToyCar's own print method
ToyTransformer.prototype.print = function(){
return 'This is a ToyTransformer';
};
const toyota = new Car();
const legoCar = new ToyCar();
const bumbleBee = new ToyTransformer();
console.log(toyota.print()); //This is a Car
console.log(legoCar.print()); //This is a ToyCar
console.log(bumbleBee.print()); //This is a ToyTransformer

Now, let remove ToyTransformer’s print() method and then if we call print() on it’s instance bumbleBee, we get result from ToyCar’s print().

// Set Car's prototype
Car.prototype = {
print() {
return 'This is a Car';
}
};
// ToyCar constructor
const ToyCar = function() {};
// Set ToyCar's prototype to be Car's prototype
ToyCar.prototype = Object.create(Car.prototype);
// Adding ToyCar's own print method
ToyCar.prototype.print = function(){
return 'This is a ToyCar';
}
const ToyTransformer = function() {};// Set ToyCar's prototype to be Car's prototype
ToyTransformer.prototype = Object.create(ToyCar.prototype);
const bumbleBee = new ToyTransformer();console.log(bumbleBee.print()); //This is a ToyCar

If we further remove ToyCar’s print() method and then if we call print() on it’s instance bumbleBee, we get result from Car’s print().

// Set Car's prototype
Car.prototype = {
print() {
return 'This is a Car';
}
};
// ToyCar constructor
const ToyCar = function() {};
// Set ToyCar's prototype to be Car's prototype
ToyCar.prototype = Object.create(Car.prototype);
const ToyTransformer = function() {};// Set ToyCar's prototype to be Car's prototype
ToyTransformer.prototype = Object.create(ToyCar.prototype);
const bumbleBee = new ToyTransformer();console.log(bumbleBee.print()); //This is a Car

So, if you call an method on a Child and the method is not there, it will check in it’s Parent and if not there then will check in Parent’s parent.

Question 65- Explain how Inheritance works in constructor Functions ?
Answer- To understand inheritance using constructor function, we will see an example containing a Mammal parent function and Bat child function. Also, make the Bat’s Prototype have a reference of Mammal’s Prototype using Object.create. Bat’s Prototype will have all methods of Mammal’s Prototype

Mammal.prototype = {
walk() {
return 'walking!';
}, sleep() {
return 'sleeping';
}
};
let Bat = function(legs, isVegetarian) {
Mammal.call(this, legs);
this.isVegetarian = isVegetarian;
}

Bat.prototype = Object.create(Mammal.prototype);

Now, let’s look into “Bat” in the console. As you can see it contains “Mammal” sleep and walk function in it’s __proto__.

Image for post
Image for post
Bat in console

But we have a major problem that the statement “Bat.prototype = Object.create(Mammal.prototype);” wipes out any Bat’s Prototype function and also it’s constructor.
We didn’t declared any Bat’s Prototype function, but the constructor was wiped.

So, we solve it by below code. It is using Bat.prototype.constructor = Bat; to set the constructor back in “Bat”.
Also, we are declaring Bat’s Prototype function after “Bat.prototype = Object.create(Mammal.prototype);

Bat.prototype.constructor = Bat;Bat.prototype.fly = function() {
return 'Flying!';
}
console.dir(Bat);
Image for post
Image for post
Problem solved

Let’s now complete the code and create two instances of “Bat” as fruitBat and bugBat. Both can access functions walk, sleep and fly.

Mammal.prototype = {
walk() {
return 'walking!';
}, sleep() {
return 'sleeping';
}
};
let Bat = function(legs, isVegetarian) {
Mammal.call(this, legs);
this.isVegetarian = isVegetarian;
}
Bat.prototype = Object.create(Mammal.prototype);Bat.prototype.constructor = Bat;Bat.prototype.fly = function() {
return 'Flying!';
}
let fruitBat = new Bat(4, true);
let bugBat = new Bat(2, false);
console.log(fruitBat.walk()); // walking!
console.log(bugBat.sleep()); // sleeping
console.log(bugBat.fly()); // Flying!

Question 66- Explain Object.setPrototypeOf() Method?
Answer- The method Object.setPrototypeOf() was introduced in ES6 for top level “Object”.
This method takes one objects method and made it available to other object.

Image for post
Image for post
Object.setPrototypeOf() Method

It is also helpful in implementing Inheritance using Object literals instead of constructor functions(see Question 65).

We have two object’s in below code — mammal and bat. Then to use mammal’s method in bat we used Object.setPrototypeOf(bat, mammal); .

Also, notice that we are updating the walk() inside “bat” and also calling mammal’s walk by super.walk()

let bat = {
fly() {
return 'Flying!';
},
walk() {
return `${super.walk()} and eating`;
}
}
Object.setPrototypeOf(bat, mammal);
console.log(bat.fly()); //Flying!
console.log(bat.walk()); //walking! and eating

This concludes the part-10 of the series and first part of Object Oriented JavaScript questions. You can find part-11 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store