50+ Advanced JavaScript Interview Questions for 2025 2026

Hungry for more advanced and tricky JavaScript Interview questions and answers to transform yourself from a Junior JavaScript Developer into a Senior JavaScript Guru before your next tech interview? Search no more! Come along and explore top hardest JavaScript Interview Questions and Answers including ES6, ES2015 for experienced web developer and get your next six-figure job offer.

Key Summary

Q1: Explain equality in JavaScript

JavaScript has both strict and type–converting comparisons:

var a = "42"; var b = 42; a == b; // true a === b; // false

Some simple equalityrules:

? Source: FullStack.Cafe

Q2: Provide some examples of non-bulean value coercion to a boolean one

The question is when a non-boolean value is coerced to a boolean, does it become true or false, respectively?

"" (empty string) 0, -0, NaN (invalid number) null, undefined false

The specific list of “falsy” values in JavaScript is as follows:

Any value that’s not on this “falsy” list is “truthy.” Here are some examples of those:

"hello" 42 true [ ], [ 1, "2", 3 ] (arrays) { }, { a: 42 } (objects) function foo() { .. } (functions)

? Source: FullStack.Cafe

Q3: What is IIFEs (Immediately Invoked Function Expressions)?

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes immediately after it’s created:

(function IIFE(){ console.log( "Hello!" ); })(); // "Hello!"

This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.

? Source: stackoverflow.com

Q4: When should I use Arrow functions in ES6?

I’m now using the following rule of thumb for functions in ES6 and beyond:

Why use arrow functions almost everywhere?

Read More:

The Path Forward for Apps – InApps Technology 2022

? Source: stackoverflow.com

Q5: What are the differences between ES6 class and ES5 function constructors?

Let’s first look at example of each:

// ES5 Function Constructor function Person(name) { this.name = name; } // ES6 Class class Person { constructor(name) { this.name = name; } }

For simple constructors, they look pretty similar.

The main difference in the constructor comes when using inheritance. If we want to create a Student class that subclasses Person and add a studentId field, this is what we have to do in addition to the above.

// ES5 Function Constructor function Student(name, studentId) { // Call constructor of superclass to initialize superclass-derived members. Person.call(this, name); // Initialize subclass's own members. this.studentId = studentId; } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; // ES6 Class class Student extends Person { constructor(name, studentId) { super(name); this.studentId = studentId; } }

It’s much more verbose to use inheritance in ES5 and the ES6 version is easier to understand and remember.

? Source: github.com/yangshun

Q6: Explain Function.prototype.bind.

Taken word-for-word from MDN:

In my experience, it is most useful for binding the value of this in methods of classes that you want to pass into other functions. This is frequently done in React components.

? Source: github.com/yangshun

Q7: What’s a typical use case for anonymous functions?

They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope.

(function() { // Some code here. })();

As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.

setTimeout(function() { console.log('Hello world!'); }, 1000);

Arguments to functional programming constructs or Lodash (similar to callbacks).

const arr = [1, 2, 3]; const double = arr.map(function(el) { return el * 2; }); console.log(double); // [2, 4, 6]

? Source: github.com/yangshun

Q8: Explain the difference between Object.freeze() vs const

const and Object.freeze are two completely different things.

const person = { name: "Leonardo" }; let animal = { species: "snake" }; person = animal; // ERROR "person" is read-only

let person = { name: "Leonardo" }; let animal = { species: "snake" }; Object.freeze(person); person.name = "Lima"; //TypeError: Cannot assign to read only property 'name' of object console.log(person);

? Source: stackoverflow.com

Q9: What is generator in JS?

Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. Generator functions are written using the function* syntax. When called initially, generator functions do not execute any of their code, instead returning a type of iterator called a Generator. When a value is consumed by calling the generator’s next method, the Generator function executes until it encounters the yield keyword.

The function can be called as many times as desired and returns a new Generator each time, however each Generator may only be iterated once.

function* makeRangeIterator(start = 0, end = Infinity, step = 1) { let iterationCount = 0; for (let i = start; i < end; i += step) { iterationCount++; yield i; } return iterationCount; }

? Source: stackoverflow.com

Q10: When should we use generators in ES6?

To put it simple, generator has two features:

The most important feature in generators — we can get the next value in only when we really need it, not all the values at once. And in some situations it can be very convenient.

? Source: stackoverflow.com

Q11: Explain what is hoisting in Javascript

Hoisting is the concept in which Javascript, by default, moves all declarations to the top of the current scope. As such, a variable can be used before it has been declared.

Note that Javascript only hoists declarations and not initializations.

? Source: https://github.com/kennymkchan

Q12: What will be the output of the following code?

var output = (function(x) { delete x; return x; })(0); console.log(output);

Above code will output 0 as output. delete operator is used to delete a property from an object. Here x is not an object it’s local variable. delete operator doesn’t affect local variable.

? Source: github.com/ganqqwerty

Q13: What will be the output of the following code?

var Employee = { company: 'xyz' } var emp1 = Object.create(Employee); delete emp1.company console.log(emp1.company);

Above code will output xyz as output. Here emp1 object got company as prototype property. delete operator doesn’t delete prototype property.

emp1 object doesn’t have company as its own property. You can test it like:

console.log(emp1.hasOwnProperty('company')); //output : false

However, we can delete company property directly from Employee object using delete Employee.company or we can also delete from emp1 object using __proto__ property delete emp1.__proto__.company.

? Source: github.com/ganqqwerty

Q14: Explain the Prototype Design Pattern

The Prototype Pattern creates new objects, but rather than creating non-initialized objects it returns objects that are initialized with values it copied from a prototype – or sample – object. The Prototype pattern is also referred to as the Properties pattern.

An example of where the Prototype pattern is useful is the initialization of business objects with values that match the default values in the database. The prototype object holds the default values that are copied over into a newly created business object.

Classical languages rarely use the Prototype pattern, but JavaScript being a prototypal language uses this pattern in the construction of new objects and their prototypes.

Q15: What is the Temporal Dead Zone in ES6?

In ES6 let and const are hoisted (like var, class and function), but there is a period between entering scope and being declared where they cannot be accessed. This period is the temporal dead zone (TDZ).

Consider:

//console.log(aLet) // would throw ReferenceError let aLet; console.log(aLet); // undefined aLet = 10; console.log(aLet); // 10

In this example the TDZ ends when aLet is declared, rather than assigned.

? Source: github.com/ajzawawi

Q16: Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one versus the other?

To understand the differences between the two, let’s look at what each function does.

forEach

const a = [1, 2, 3]; const doubled = a.forEach((num, index) => { // Do something with num and/or index. }); // doubled = undefined

map

const a = [1, 2, 3]; const doubled = a.map(num => { return num * 2; }); // doubled = [2, 4, 6]

The main difference between .forEach and .map() is that .map() returns a new array. If you need the result, but do not wish to mutate the original array, .map() is the clear choice. If you simply need to iterate over an array, forEach is a fine choice.

? Source: github.com/yangshun

Q17: What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

Undeclared variables are created when you assign a value to an identifier that is not previously created using var, let or const. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a ReferenceError will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a try/catch block.

function foo() { x = 1; // Throws a ReferenceError in strict mode } foo(); console.log(x); // 1

A variable that is undefined is a variable that has been declared, but not assigned a value. It is of type undefined. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of undefined. To check for it, compare using the strict equality (===) operator or typeof which will give the 'undefined' string. Note that you should not be using the abstract equality operator to check, as it will also return true if the value is null.

var foo; console.log(foo); // undefined console.log(foo === undefined); // true console.log(typeof foo === 'undefined'); // true console.log(foo == null); // true. Wrong, don't use this to check! function bar() {} var baz = bar(); console.log(baz); // undefined

A variable that is null will have been explicitly assigned to the null value. It represents no value and is different from undefined in the sense that it has been explicitly assigned. To check for null, simply compare using the strict equality operator. Note that like the above, you should not be using the abstract equality operator (==) to check, as it will also return true if the value is undefined.

var foo = null; console.log(foo === null); // true console.log(typeof foo === 'object'); // true console.log(foo == undefined); // true. Wrong, don't use this to check!

As a personal habit, I never leave my variables undeclared or unassigned. I will explicitly assign null to them after declaring if I don’t intend to use it yet. If you use a linter in your workflow, it will usually also be able to check that you are not referencing undeclared variables.

Read More:

Top Sketch Plug-ins to Improve your Workflow

? Source: github.com/yangshun

Q18: Describe the Revealing Module Pattern design pattern

A variation of the module pattern is called the Revealing Module Pattern. The purpose is to maintain encapsulation and reveal certain variables and methods returned in an object literal. The direct implementation looks like this:

var Exposer = (function() { var privateVariable = 10; var privateMethod = function() { console.log('Inside a private method!'); privateVariable++; } var methodToExpose = function() { console.log('This is a method I want to expose!'); } var otherMethodIWantToExpose = function() { privateMethod(); } return { first: methodToExpose, second: otherMethodIWantToExpose }; })(); Exposer.first(); // Output: This is a method I want to expose! Exposer.second(); // Output: Inside a private method! Exposer.methodToExpose; // undefined

An obvious disadvantage of it is unable to reference the private methods

? Source: scotch.io

Q19: What’s the difference between ES6 Map and WeakMap?

They both behave differently when a object referenced by their keys/values gets deleted. Lets take the below example code:

(function() { var a = { x: 12 }; var b = { y: 12 }; map.set(a, 1); weakmap.set(b, 2); })()

The above IIFE is executed there is no way we can reference {x: 12} and {y: 12} anymore. Garbage collector goes ahead and deletes the key b pointer from “WeakMap” and also removes {y: 12} from memory. But in case of “Map”, the garbage collector doesn’t remove a pointer from “Map” and also doesn’t remove {x: 12} from memory.

WeakMap allows garbage collector to do its task but not Map. With manually written maps, the array of keys would keep references to key objects, preventing them from being garbage collected. In native WeakMaps, references to key objects are held “weakly“, which means that they do not prevent garbage collection in case there would be no other reference to the object.

? Source: stackoverflow.com

Q20: Is JavaScript a pass-by-reference or pass-by-value language?

It’s always pass by value, but for objects the value of the variable is a reference. Because of this, when you pass an object and change its members, those changes persist outside of the function. This makes it look like pass by reference. But if you actually change the value of the object variable you will see that the change does not persist, proving it’s really pass by value.

Example:

function changeStuff(a, b, c) { a = a * 10; b.item = "changed"; c = {item: "changed"}; } var num = 10; var obj1 = {item: "unchanged"}; var obj2 = {item: "unchanged"}; changeStuff(num, obj1, obj2); console.log(num); console.log(obj1.item); console.log(obj2.item);

Output:

10 changed unchanged

? Source: stackoverflow.com

Q21: How to “deep-freeze” object in JavaScript?

If you want make sure the object is deep frozen you have to create a recursive function to freeze each property which is of type object:

Without deep freeze:

let person = { name: "Leonardo", profession: { name: "developer" } }; Object.freeze(person); // make object immutable person.profession.name = "doctor"; console.log(person); //output { name: 'Leonardo', profession: { name: 'doctor' } }

With deep freeze:

function deepFreeze(object) { let propNames = Object.getOwnPropertyNames(object); for (let name of propNames) { let value = object[name]; object[name] = value && typeof value === "object" ? deepFreeze(value) : value; } return Object.freeze(object); } let person = { name: "Leonardo", profession: { name: "developer" } }; deepFreeze(person); person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

? Source: medium.com

Q22: In JavaScript, why is the “this” operator inconsistent?

The most important thing to understand is that a function object does not have a fixed this value — the value of this changes depending on how the function is called. We say that a function is invoked with some a particular this value — the this value is determined at invocation time, not definition time.

? Source: stackoverflow.com

Q23: Compare Async/Await and Generators usage to achive same functionality

? Source: stackoverflow.com

Q24. In what ways we can empty a JavaScript Array?

Below techniques can be used to get an empty array:

emptyArray = [ ];

definedArray.length = 0;

definedArray.splice(0, definedArray.length);

while(definedArray.length){ definedArray.pop(); } //pop() method

Or

while(definedArray.length){ definedArray.shift(); } //shift() method

Q25. What is the role of closures in JavaScript?

The script builds a closure in JavaScript at the time of making of a function. It is a local variable that is present in the memory even after the function finishes its execution. Besides, it has a great access to the variable in three scopes: variable in its scope, global variables, and variables in the enclosing function’s scope. However, closures are tough in JavaScript to make sure the variable privacy, that is, to build private variables. Since JavaScript has no modifiers for access, closures permit the programmer to make variables that are not directly accessible.

Q26. Write the JavaScript code to print the following output on your console window.

Array: [“DataFlair”, 2019, 1.0, true]

The code to print the below output in the console window is:

Q27. Explain the procedure of document loading.

Loading a document tells preparing it for further execution on the system. The document loads instantly on the browser when there is a running document on the system. The application (browser) permits the JavaScript engine to do dual tasks:

To load the document instantly, it is a great practice to add the