Interview Preparation — Object Oriented JavaScript-2

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

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.

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.

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.

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.

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

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

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger