Interview Preparation — Object Oriented JavaScript-2

Image for post
Image for post
Photo by True Agency on Unsplash

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

Question 67- Explain Object.assign() Method?
Answer- The Object.assign() Method is used to copy one or more source objects to a target object.

In the below code, we are taking two object “o2” and “o3” and copying to “o1”. Notice that the Object “o3” is also changed.

If you want to merge Objects, we pass an empty object in source. As objects contains unique keys, only one “a”, “b” and “c” will be there.

If we consider the example in previous question(Question 66) and use Object.assign instead of Object.setPrototypeOf , we will notice that the “bat” walk() is overwritten by “mammal”.

let bat = {
fly() {
return 'Flying!';
},
walk() {
return 'Bat is walking';
}
}
Object.assign(bat, mammal);console.log(bat.walk()); //walking!

One of the use of Object.assign is in reducers in react-redux project. In reducers we cannot mutate the state, so we can take clone it using below.

Question 68- Explain Function mixins in JavaScript?
Answer- In the terms of programming, Mixins are these pieces of code that you can mix with other objects to extend their functionality.

By using mixins, you can compose objects with a desired functionality. This is very different from using inheritance, which is much rigid and doesn’t work most of the time when you want to create dynamic ever-changing models.
For example, suppose there is a person who learns “jsSkill” first and become “jsDeveloper”. Then he learns “reactSkills” and become “reactDeveloper”. Then he learns “backendSkill” and become “fullStackDeveloper”.
This can be very easily done with mixins, which uses Object.assign to combine Objects or use the latest Object Spreads.

const reactSkills = {
knowsReact() {
return true;
}
};
const backendSkill = {
knowsNodeJS() {
return true;
}
};
// Compose Objects
const jsDeveloper = Object.assign({}, jsSkill);
const reactDeveloper = Object.assign({}, jsSkill, reactSkills);
const fullStackDeveloper = {...jsSkill, ...reactSkills, ...backendSkill};
console.log(jsDeveloper.knowsJS()); //true
console.log(reactDeveloper.knowsReact()); //true
console.log(fullStackDeveloper.knowsNodeJS()); //true

To understand Function mixins, we have to understand factory functions first. In JavaScript, there are two ways to create objects, one by using either “Function constructor/classes” or “factory functions”. When you use regular functions to build objects, they are called factory functions.

// New Object
let redCar = new Car('red');
// Factory Function
let Car = function(color) {
return Object.assign({}, {
color: color
});
};

// New Object
let redCar = Car('red');

For creating Function mixins , we will use factory function with closures. Having an inner variable inside the factory function will maintain the state inside a closure. The state will be stored inside every function that is using the variable.

Using a factory function with closures you can build function mixins. Each mixin would take an Object as a parameter and returns a new object that would take passed object and extend it with mixin’s functionality.
Here is an example of building an object called nabs using two mixins humanFactory and coderFactory. nabs has characteristics of a human so he has an ability to walk, and can code also.

// returns a new object
return Object.assign({}, obj, {
code() {
coding = true;
return this;
}, isCoding() {
return `${this.name} is ${(coding ? '' : 'not')} coding`;
}
});
};
// human factory function
const humanFactory = function(obj) {
let walking = false;
return Object.assign({}, obj, {
walk() {
walking = true;
return this;
}, isWalking() {
return `${this.name} is ${(walking ? '' : 'not')} walking`;
}
});
};
const nabenduBiswas = {
name: 'Nabendu Biswas'
};
// compose an object
const nabs = humanFactory(coderFactory(nabenduBiswas));
// set the state
nabs.code().walk();
console.log(nabs.isWalking()); // prints: Nabendu Biswas is walking
console.log(nabs.isCoding()); // prints: Nabendu Biswas is coding

Question 69- Explain Static methods in JavaScript?
Answer- Static methods are methods declared inside a class which belongs to the class, whereas the normal methods inside a class are instance methods which belongs to the instance of the class.

Static methods doesn’t use “this”, they are basically used as utility functions. As in the below example, we create static method inside class by adding static keyword in-front of it. Here, in the example we are using static method to compare two instances of class.

const maruti800 = new Car('silver', 350000);
const santro = new Car('red', 500000);
console.log(maruti800.getColor()); //silver
console.log(santro.getColor()); //red
console.log(Car.comparePrice(santro, maruti800)); //150000

One of the recent use of static method is the new lifecycle method static getDerivedStateFromProps() introduced in React 16.

Question 70- Explain JavaScript Decorators?
Answer- In the simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it.
Decorators have become popular thanks to their use in Angular 2+(like @NgModule). In Angular, decorators are available thanks to TypeScript, but in JavaScript they’re currently a stage 2 proposal, meaning they should be part of a future update to the language.

Let’s first look at a example of decorator below. It have two decorators — wheels and doors. Notice the special “@” to use it in the class Car. The @wheels decorator is used to show the hard coded noOfWheels as 4. The @doors decorator is passing a variable.

let doors = function(number) {
return function(target) {
target.noOfDoors = number;
}
}
@wheels
@doors(2)
class Car {
}console.log(`Wheels - ${Car.noOfWheels}`); //Wheels - 4
console.log(`Doors - ${Car.noOfDoors}`); //Doors - 2

Let’s look at the full example now. We can see a real-life use of decorators. Here we have a readOnly decorator, which is used to make the function getColor readonly. In the jsfiddle below, we are over-writing, getColor outside the class. If we remove the @readOnly from getColor, the console log ‘I will over-ride’ will print.

The jsfiddle

Question 71- Explain Polymorphism in JavaScript?
Answer- Polymorphism is an OOP concept and it literally means “many” “forms”. In traditional OOP languages it is implemented using function overloading but in JavaScript it achieved by using the same function in inheritance.

Consider the example in Question 64. 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

This concludes the part-11 of the series and last part of Object Oriented JavaScript questions. You can find part-12 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