Advanced JavaScript Interview Questions

With JavaScript users can declare variables using three keywords: let, var as well as const. The words var let and const can be a bit confusing. We will go over all three variables using examples. The difference between the variables var, let as well as const is described below in different ways.

• Reassign the value
• Re-declaration of the variable
• Scope
• Hoisting

NOTE: If you would like to learn more about the differences between Let, Var, and Const, you should visit this site.

They both return a new array.

1. Map

The map function returns the same number of elements as present in the original array but the value of elements will be transformed in some way.

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = items.map((item) => {
    return item*item;
})
console.log(result);
// [ 1, 4, 9, 16, 25, 36, 49, 64, 81, 100 ]

2. Filter

On the other hand, the filter function can return fewer or more elements than the original array but the value of the original elements will not change.

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = items.filter((item) => {
    return item > 5;
})
console.log(result);
// [ 6, 7, 8, 9, 10 ]

It gives an syntax error like SyntaxError: Identifier 'x' has already been declared.

A function passed as an argument to another function is called a callback function and this technique allows a function to call another function. A callback function gets executed after the execution of another function gets finished.

Example

function isOdd(number) {
  return number % 2 != 0;
}
function filter(numbers, fn) {
  let results = [];
  for (const number of numbers) {
    if (fn(number)) {
      results.push(number);
    }
  }
  return results;
}
let numbers = [1, 2, 4, 7, 3, 5, 6];
console.log(filter(numbers, isOdd));

Answer // [ 1, 7, 3, 5 ]

The benefit of using this feature is that you can wait for the result of a previous method call and then execute another method call.

{ x: 5 }

The main differences between arrow function and normal function are based on some parameters like.

• Syntax
• No duplicates of identified parameters.
• "this" keyword is used to describe the use.
• Utilizing a keyword that is new.
• Arguments that are binding.

Syntax of normal functions

// Function declaration
function printHello(name) {
   return `Hey ${name}`;
}

NOTE: If you want to read more about Regular vs Arrow functions then you can visit here.

// Function expression
const printHello = function(name) {
  return `Hey ${name}`;
}

Syntax of arrow functions

const printHello = (name) => `Hey ${name}`;

An object that shows the eventual completion or failure of asynchronous options along with its resultant value is called a promise in JavaScript. The possible three states of a promise are pending, fulfilled, or rejected. It allows handling multiple asynchronous operations in JavaScript.

We have a list of JavaScript Multiple Choice Questions. It's really helpful to crack your interviews easily.

A Promise has 3 states:

• Pending: initial state, neither fulfilled nor rejected.
• Fulfilled: meaning that the operation was completed successfully.
• Rejected: meaning that the operation failed.

How to create Promises?

let getDataFromAPI = function(params) {
    return new Promise((resolve, reject) => {
        const data = {
            name: "Umesh",
            phone: "9971083635"
        }
        if(data) {
            resolve(data); // get data from API
        } else {
            reject('get error from API Call');
        }
    });
}
getDataFromAPI().then( async function (result) {
    console.log(result);
}).catch(err => {
    console.log(err);
});

How to call multiple promise (with dependency) methods?

callApi().then(function(result) {
    return callApi2() ;
}).then(function(result2) {
    return callApi3();
}).then(function(result3) {
    // do work
}).catch(function(error) {
    //handle any error that may occur before this point 
});

OR

Promise.all([callApi, callApi2, callApi3]).then((values) => {
  console.log(values);
});

OR

Promise.allSettled([callApi, callApi2, callApi3]).then((values) => {
  console.log(values);
});

Example 1

const string = "JavaScript Interview Questions";
const substring = "Questions";
console.log(string.includes(substring)); Answer // true

Example 2

const string = "JavaScript Interview Questions";
const substring = "questions";
console.log(string.includes(substring)); Answer // false

When a JavaScript developer tries to execute multiple asynchronous operations then sometimes issues arise and it is termed callback hell. 

Note: If you are a frontend developer with React.JS then these Top 20 React Questions will help you to crack your interviews easily.

How to escape from a callback hell?

JavaScript gives an easy way of avoiding callback hell. This is performed by event queue and promises.

• Promises
• Async/Await

Example of Callback Hell

getDataFromFunction1(function(x){
    getDataFromFunction2(x, function(y){
        getDataFromFunction3(y, function(z){
            ...
        });
    });
});

It is an advanced technique of working with functions that can accept multiple arguments. It will transform this function into a series of functions, where every function will accept one argument:

Non-curried version //
const sum = (a, b, c)=>{
    return a+ b + c
}
console.log(sum(2, 3, 5)) // 10

Curried version //
const sumCurry =(a) => {
    return (b)=>{
        return (c)=>{
            return a+b+c
        }
    }
}
console.log(sumCurry(2)(3)(5)) // 10