AlgoDaily - Advanced Javascript Interview Questions

Home > Frontend Engineering and Javascript > Frontend Interview Questions > Advanced Javascript Interview Questions

Setting the Stage for Advanced JavaScript Mastery

JavaScript isn't just another language; it's the lifeblood of modern web development. With the rise of web development stacks like MERN (MongoDB, Express, React, Node.js), MEAN (MongoDB, Express, Angular, Node.js), and MEVN (MongoDB, Express, Vue.js, Node.js), mastering JavaScript becomes indispensable for any aspiring or seasoned web developer.

Why JavaScript Matters

If you're aiming for a senior web developer position, expect to face questions that dig deep into the intricacies of JavaScript. The language isn't just for basic client-side scripts; it's a versatile tool capable of powering front-end frameworks, back-end servers, and even databases.

What You'll Gain from This Guide

In the following sections, imagine yourself traversing the vast landscape of JavaScript's advanced features. This guide is your roadmap, pinpointing areas you should focus on to deepen your understanding and skill set.

Build your intuition. Click the correct answer from the options.

#1 - Variable Hoisting

What will be the output of this code?

JAVASCRIPT

1console.log('name is ', name);
2 
3var name;
4 
5console.log('name is ', name);
6 
7name = "Susan";
8 
9console.log('name is ', name);

Click the option that best answers the question.

Null Undefined Susan
Undefined Undefined Susan
Null Null Susan

Decoding the Enigma of Hoisting

The Concept of Hoisting

Hoisting is a feature in JavaScript that often perplexes newcomers. Simply put, hoisting allows variables and function declarations to be moved to the top of their containing scope during the compilation phase. This makes these variables and functions accessible even before the code executes.

The Inner Workings of the JavaScript Engine

The JavaScript engine performs a "pre-scan" of the code and hoists—or moves up—the declarations. This is why you can access variables even before they appear to be initialized.

JAVASCRIPT

1console.log(myVar); // Output: undefined
2var myVar = 10;

Understanding `undefined`

When a variable is hoisted, JavaScript automatically assigns it an initial value of undefined. It remains undefined until it's explicitly initialized.

JAVASCRIPT

1var name;
2console.log(name); // Output: undefined
3name = "Alice";
4console.log(name); // Output: Alice

The Catch

While hoisting allows you to use variables before their declarations, it doesn't mean they'll have the values you expect. As seen in the example above, hoisted variables start off as undefined.

xxxxxxxxxx
 
console.log('name is ', name); // Undefined
 
var name = "Susan";
 
console.log('name is ', name); // Susan

#2 - Closures

Let's test your knowledge. Click the correct answer from the options.

What will be the output of this code?

JAVASCRIPT

1var a = 10;
2
3function outerFunc(a) {
4  function inner() {
5    var b = 20;
6    console.log(a + b);
7  }
8
9  return inner;
10}
11
12var func = outerFunc(a);
13
14a = 30;
15
16func();

Click the option that best answers the question.

Demystifying Closures: The Power of Scope Chaining

What is a Closure?

A closure in JavaScript is like a function with a backpack. Inside that backpack are all the variables from the outer function that the inner function may need. In layman's terms, a closure is a function (inner function) bundled with its surrounding state (outer function), allowing the inner function to access variables from an external scope.

How Does It Work?

The crux of closures lies in JavaScript's scope chaining. When a function is defined inside another function, it forms a lexical scope. This lexical scope allows the inner function to access variables from its surrounding or outer scopes.

JAVASCRIPT

1function outerFunction(outerVariable) {
2  return function innerFunction(innerVariable) {
3    console.log(`Outer Variable: ${outerVariable}`);
4    console.log(`Inner Variable: ${innerVariable}`);
5  }
6}
7
8const closureInstance = outerFunction('outer'); // outerFunction has returned
9closureInstance('inner'); // Still can access 'outerVariable'

The Magic: Persisting State

What's magical about closures is that they remember the environment in which they were created. Even if the outer function has finished executing and its variables are out of scope, the inner function still retains access to them.

Scope Chaining in Action

The ability for closures to access variables from outer scopes even after those scopes have exited is possible due to JavaScript's scope chaining mechanism.

JAVASCRIPT

1function countdown(start) {
2  let counter = start;
3  return function () {
4    console.log(counter);
5    counter--;
6  };
7}
8
9const countFromFive = countdown(5);
10countFromFive(); // Output: 5
11countFromFive(); // Output: 4

xxxxxxxxxx
 
// Outer function
function adder(a) {
  // Inner function/Closure
  function add(b) {
    console.log(a + b);
  }
​
  return add;
}
​
var add5 = adder(5);
var add10 = adder(10);
​
add5(10); //15
add10(10); //20

Build your intuition. Click the correct answer from the options.

Javascript promise is defined as

Click the option that best answers the question.

A proxy object of an asynchronous operation and its resulting value
An object for error handling
A class for handling multi-threading

#3 - Promises

Javascript promise is an object that acts as a proxy for an asynchronous function that is supposed to complete at some point. Promise supports the non-blocking asynchronous operations in javascript. So, with promises, the code doesn’t block, and the promise eventually returns a value.

A promise may exist in any of the three states.

Pending: Initial state; neither fulfilled nor rejected
Fulfilled: When the operation completes successfully
Rejected: When the operation fails

Source

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\

xxxxxxxxxx
 
const IPromise = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("Hello");
    },300);
});
 
//Output : Hello World
IPromise
.then(value=>{return value + " World"})
.then(value=>{console.log(value)})
.catch(err => {console.log(err)});

Build your intuition. Is this statement true or false?

Destructuring in javascript extracts array’s values and object’s properties into variables.

JAVASCRIPT

1const myObj  = 
2{
3    name: "Harvey",
4    age: 50
5}
6 
7//Destructuring
8const {name,age} = myObj;
9 
10console.log(name); //Harvey
11console.log(age);  //50

Press true if you believe the statement is correct, or false otherwise.

#4 - Destructuring

The destructuring syntax allows you to extract an array’s elements or an object’s properties into distinct variables. This syntax is commonly used in real world applications where only a subset of values or properties is needed. One important keyword related to destructuring is the rest keyword. Check out the example below to understand the rest keyword in restructuring.

xxxxxxxxxx
 
const arr = [1,2,3,4,5,6,7,8,9,10];
 
const [a,b,c,...rest] = arr;
 
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(rest); //[4,5,6,7,8,9,10]

#5 Array methods: map, filter, and reduce

Arrays have a diverse set of methods. The three most useful one-liner functions are map, filter, and reduce. They are powerful because they get a callback function as an argument and apply it to all the array’s values. These functions transform the array in the most convenient method, without using any explicit loops. Thus, these functions help you write short and clean code.

Let's test your knowledge. Click the correct answer from the options.

What will be the output of this code?

JAVASCRIPT

1const arr = [1,2,3,4,5,6,7,8,9,10];
2 
3const mapped_arr = arr.map((e)=>e+10);
4 
5console.log(mapped_arr);

Click the option that best answers the question.

[10 2 3 4 5 6 7 8 9 10]
10
[11 12 13 14 15 16 17 18 19 20]

Mastering the JavaScript Map Function

What is the `map` Function?

The map function in JavaScript is like a factory line for arrays. Imagine an assembly line where each item (array element) goes through a transformation (callback function) and comes out as a new, refined product (new array element). The map function processes each element in the original array and returns a brand new array containing these transformed elements.

The Basic Syntax

The map function takes a callback function as an argument, and this callback function is applied to each element of the array.

JAVASCRIPT

1const numbers = [1, 2, 3, 4];
2const squaredNumbers = numbers.map(function(element) {
3  return element * element;
4});
5console.log(squaredNumbers); // Output: [1, 4, 9, 16]

How It Works

Looping Through Elements: map goes through each element in the original array.
Applying the Callback: The provided callback function is called with the current element as its argument.
Collecting Results: A new array is created with the results of the callback function.

Why Use `map`?

Immutability: map does not modify the original array; it creates a new one, adhering to the principles of immutability.
Chainable: You can chain other array methods like filter or reduce with map for more complex operations.
Readability: Using map makes the code more declarative, making it easier to understand at a glance.

Example: Capitalizing Strings

Let's say you have an array of names in lowercase, and you want to capitalize the first letter of each name.

JAVASCRIPT

1const names = ['alice', 'bob', 'charlie'];
2const capitalizedNames = names.map(name => name.charAt(0).toUpperCase() + name.slice(1));
3console.log(capitalizedNames); // Output: ['Alice', 'Bob', 'Charlie']

Mastering the map function will not only make your code more efficient but also make you a more versatile JavaScript developer.

Try this exercise. Click the correct answer from the options.

As the name suggests, Array filter filters array elements into a new array based on the condition specified in the callback function. Check out the code and try to understand what does the filter function does.

JAVASCRIPT

1const arr = [1,2,3,4,5,6,7,8,9,10];
2 
3const filtered_arr = arr.filter((e)=>e%2 == 0);
4 
5console.log(filtered_arr);

Click the option that best answers the question.

Filters out even values only
Filters out odd values only
Filters out the multiples of two only

Understanding the `filter` Function: Curating Arrays with Precision

What is the `filter` Function?

Think of JavaScript's filter function as a meticulous curator for your arrays. Imagine you have a collection of artworks, and you only want to display those that meet certain criteria—say, paintings from the Renaissance period. The filter function works similarly; it sifts through an array and returns a new array containing only the elements that meet a specific condition.

The Basic Syntax

The filter function takes a callback function as its argument. This callback function must return either true or false, determining whether the element should be included in the new array or not.

JAVASCRIPT

1const numbers = [1, 2, 3, 4, 5];
2const evenNumbers = numbers.filter(function(element) {
3  return element % 2 === 0;
4});
5console.log(evenNumbers); // Output: [2, 4]

How It Operates

Iterating Over Elements: filter loops through each element in the array.
Evaluating the Callback: For each element, the callback function is invoked.
Making the Cut: If the callback function returns true, the element is included in the new array.

Why Choose `filter`?

Non-Destructive: Like map, filter does not alter the original array; it returns a new one.
Composable: You can chain filter with other array methods like map and reduce.
Clarity: Using filter makes your intentions clear, simplifying code readability.

Example: Filtering Out Negative Numbers

Suppose you have an array of numbers, and you want to create a new array containing only the positive numbers.

JAVASCRIPT

1const numbers = [0, -1, 2, -3, 4, 5];
2const positiveNumbers = numbers.filter(num => num > 0);
3console.log(positiveNumbers); // Output: [2, 4, 5]

Try this exercise. Click the correct answer from the options.

The reduce function applies the callback function on every element passing in the return value of preceding calculations. Check out the code and guess the output.

JAVASCRIPT

1const arr = [1,2,3,4,5,6,7,8,9,10];
2 
3const reduced_arr = arr.reduce((prev,next)=> prev+next);
4 
5console.log(reduced_arr);

Click the option that best answers the question.

[55]
[9 10]
55

Reduce

The reducer function applies a callback or a reducer function as defined by the user. The callback function accepts two arguments. The first argument is for storing the return value of a preceding operation, while the second argument refers to the current value that the function refers to in the array.

#6 IIFE

Let's test your knowledge. Is this statement true or false?

IIFE stands for “Immediately Invoked Function Expression.”

Press true if you believe the statement is correct, or false otherwise.

Immediately Invoked Function Expression or IIFE is a self-executing javascript anonymous function. This function runs as soon as it is declared rather than waiting for being invoked after declaration. AN IIFE has two parts:

1. An anonymous function declaration is enclosed in a grouping operator ()
1. A () immediately after the declaration to call the function.

JAVASCRIPT

1//An IIFE
2(function greet()
3{
4    console.log("Hello World");
5})();
6 
7//OUTPUT: Hello World

One Pager Cheat Sheet

Making JavaScript your friend is essential for any aspiring web developers, and the guide provided will help you assess your advanced knowledge in order to land the senior developer position.
The output of this code will be Undefined Undefined Susan because of variable hoisting which causes function declarations and variable declarations to be moved to the top of the current scope, so name is declared but not initialized when the code first executes.
Javascript hoisting can make variables and functions appear declared before they are actually initialized, leading to confusion for beginners.
A closure is a function that has access to the variables in its parent's scope, even after the parent has returned.
A closure is used to keep a reference to the outer scope of outerFunc(), preserving the value of a (10) and allowing func() to log the result of a+b (30).
A closure allows an inner function to access variables in its outer function, even after the outer function has returned and its local variable have gone out of scope.
A Javascript Promise is an object serving as a proxy that allows asynchronous operations to be handled in a synchronous manner, while representing the eventual result of the operation.
Javascript promise is an object that acts as a proxy for asynchronous functions and can exist in Pending, Fulfilled, or Rejected states.
Destructuring in JavaScript allows for easy extraction of values from an object or an array and assignment of those values to variables.
Using destructuring syntax with the rest keyword allows you to extract an array's elements or object's properties into distinct variables in a real-world application.
Themap, filter, and reduce functions` enable developers to conveniently and quickly transform an array in a compact manner, without requiring explicit loops.
The map() method calls a callback function to add 10 to each element of the array arr, resulting in a new array, mapped_arr, with values of [11 12 13 14 15 16 17 18 19 20].
The map() function in Javascript loops over an array and calls a callback on each element, returning a new array.
The filter() method of the Array object returns a new array containing the elements for which the provided callback expression returns a truthy result.
Updated array is created with elements which satisfy the condition provided by callback function.
The reduce function applies a callback function (in this case, prev+next) to each item in the array, starting from an initial value (1), and returns a single value (55) which is the sum of every item in the array.
The reducer function uses a user-defined callback or reducer function to apply a return value from a previous operation to the current value of an array.
An Immediately Invoked Function Expression (IIFE) is a self-executing anonymous function wrapped in parentheses ().
An IIFE is used to execute an anonymous function immediately in order to keep variables and function declarations out of the global scope and avoid accidental interactions with other functions and variables.
A Immediately Invoked Function Expression (IIFE) is a self-executing anonymous function that is declared and called instantly with a grouping operator and () to indicate its invocation.

Setting the Stage for Advanced JavaScript Mastery

Why JavaScript Matters

What You'll Gain from This Guide

Build your intuition. Click the correct answer from the options.

#1 - Variable Hoisting

Click the option that best answers the question.

Decoding the Enigma of Hoisting

The Concept of Hoisting

The Inner Workings of the JavaScript Engine

Understanding undefined

The Catch

#2 - Closures

Let's test your knowledge. Click the correct answer from the options.

Click the option that best answers the question.

Demystifying Closures: The Power of Scope Chaining

What is a Closure?

How Does It Work?

The Magic: Persisting State

Scope Chaining in Action

Build your intuition. Click the correct answer from the options.

Click the option that best answers the question.

#3 - Promises

Source

Build your intuition. Is this statement true or false?

#4 - Destructuring

#5 Array methods: map, filter, and reduce

Let's test your knowledge. Click the correct answer from the options.

Click the option that best answers the question.

Mastering the JavaScript Map Function

What is the map Function?

The Basic Syntax

How It Works

Why Use map?

Example: Capitalizing Strings

Try this exercise. Click the correct answer from the options.

Click the option that best answers the question.

Understanding the filter Function: Curating Arrays with Precision

What is the filter Function?

The Basic Syntax

How It Operates

Why Choose filter?

Example: Filtering Out Negative Numbers

Try this exercise. Click the correct answer from the options.

Click the option that best answers the question.

Reduce

#6 IIFE

Let's test your knowledge. Is this statement true or false?

One Pager Cheat Sheet

Programming Categories

Popular Lessons

Understanding `undefined`

What is the `map` Function?

Why Use `map`?

Understanding the `filter` Function: Curating Arrays with Precision

What is the `filter` Function?

Why Choose `filter`?