JavaScript interview question

javascript.md

What is functional programming?

Functional programming produces programs by composing mathematical functions and avoids shared state & mutable data

What is the difference between classical inheritance and prototypal inheritance?

Class Inheritance: instances inherit from classes (like a blueprint — a description of the class), and create sub-class relationships: hierarchical class taxonomies. Instances are typically instantiated via constructor functions with the new keyword. Class inheritance may or may not use the class keyword from ES6.

Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or Object.create() Instances may be composed from many different objects, allowing for easy selective inheritance.

What does “favor object composition over class inheritance” mean?

It means that code reuse should be achieved by assembling smaller units of functionality into new objects instead of inheriting from classes and creating object taxonomies.

In other words, use can-do, has-a, or uses-a relationships instead of is-a relationships.

What is hoisting in JavaScript?

Hoisting is the act of putting variable, function declarations to the top of the scope not matter where they are declared.

The code still works because the declaration is moved to the top of the scope

hello();
function hello(){
	console.log("Hello");
}

Only the declaration is hoisted and not the assignment (only works with var keyword)

console.log(value); //returns undefined
var  value;
value  =  10;

What is currying ?

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c) in other words, it turns a function with n paramters to a function with a single parameter but n calls

What are pure functions?

Pure functions are functions that meet the below conditions

1. They should not produce any side effects
2. For the same input they should produce the same output
3. They should not modify data outside their scope

What are higher order functions?

A higher order function is function which does atleast one of the below two things. It is generally used to empower a function

1. It accepts a function as its parameter
2. it return a function as its return value

What will be the value of []===[] and why?

false because, both of the array literals point towards different location in memory, the equality operator only checks the reference in this case.

They below example will produce true because both the variables are pointing to the same object

const a = [];
const b = a;
console.log(a === b)

What do you understand by Virtual DOM? Explain its working.

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.

1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
2. Then the difference between the previous DOM representation and the new one is calculated.
3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

Predict The Output 1

const salary = "$5000";
(function () {
  console.log(salary);
  var salary = "$6000";
  console.log(salary);
})();

Output - undefined, "$6000"

What is babel?

Babel is a JavaScript compiler Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

What is webpack?

Webpack is a module bundler which is primarily built for JavaScript but it can also be used to transform front-end static assets

What is the difference between controlled and uncontrolled components ?

Controlled components do not maintain their own state, they instead recieve props from their parent and send a callback to the parent to update its state when required. Whereas uncontrolled components maintain their own state independently of the parent

What are promises and give an example?

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 300);
});

myPromise
  .then((x) => {
    console.log(x);
  })
  .catch((y) => {
    console.log(y);
  });

Write a polyfill for promise.all()

Promise.all = function(promises) {
  let results = [];
  return new Promise((resolve, reject) => {
    promises.forEach((p, index) => {
      p.then((result) => {
        results.push(result);
        if (index === promises.length - 1) {
          resolve(results);
        }
      }).catch((err) => reject(err));
    });
  });
};