Javascript Interview Questions and Answers

let x = 111;
Here ‘x’ has data type of Number
x = “Intellipaat”;
Here ‘x’ has data type of String

let sum = 555;
let share = 55.55;

let bigNumber = 8938123748264892374749279272187847874899n;

let company = “Intellipaat”;

let boolValue = false;

let myValue;

let noValue = null;

let uniqueValue = Symbol(“unique”);

let company = { name: “Intellipaat”, employees: 200 };

const iAmConstant = 2000;

iAmConstant = 5000;

const xyz = {
times: 4
}

xyz = {
message:”Say Hello”,
times: 5
}

xyz.message = “Say Hello”;
xyz.times = 5;

function statement() {
console.log("Hello, I am a function declaration!");
}
statement();

let expression = function(num1, num2) {
let sum = num1 + num2;
return sum;
}

let add = (num1, num2) => num1 + num2;

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

setTimeout(function() {
console.log(“This is anonymous function!”);
}, 1000);

let add = (num1, num2) => {
if(num2 != 0){
return num1+num2;
}
}
let add = (num1, num2) => {
if(num2 != 0){
return num1+num2;
}
else return “Cannot be divided by zero”;
}
let add = (num1, num2) => {
if(num2 != 0){
return num1+num2;
}
}

const arr = [1, [2, [3, [4, [5]]]]];
console.log(arr.flat(Infinity));

 filter() are higher-order functions.

const num = [1, 2, 3, 4, 5];

Let squares = num.map(x => x** 2);

console.log(squares);  

//Normal function

function add(a,b){

return a+b

}

//Arrow function

const add = (a, b) => a + b;

let arr = [1,2,3] //number array

let arr2 = [“a”,”b”,”c”]// string array

JavaScript Interview Questions for Experienced

20. What are JavaScript modules?

JavaScript modules are used in order to divide the JavaScript code into certain components. They are applied in order to load several variables, functions, or objects in a file and to send several variables, functions, or objects in another file. The keywords import and export are used to read the files and export write into other files respectively.

Example:

// In file1.js

export const var1= () => "Hi user";




// In file2.js

import { var1} from './file1';

console.log(var2());

21. What is an event bubbling in JavaScript?

In JavaScript event bubbling is the phenomenon where an event, for instance, the click event starts at the element and then moves up through the entire parents DOM nodes. For example, when you click a button inside a div, the event is inaugurated on the button and then bubbles through the div and then through any of its parents contingent on the event’s propagation model, up to the root. This enables one to work with events on parent of which one cannot add a listener to each child. This propagation can be halted by event.stopPropagation() which means that the event does not migrate to the parent element.

22. What is memoization in JavaScript?

Memoization in JavaScript refers to a technique of optimizing function by storing the values of function calls and instead of executing the function, the result is returned if the parameters match that of the previous calls. This can stop the calculation work from being spread across repeat calls of the function and make it more efficient,t especially when the function uses the same argument values many times.

Example:

const cache = {};

function add(num) {

  if (num in cache) {

    return cache[num]; // Return cached result

  }

  cache[num] = num + 10; // Store result in cache

  return cache[num];

}

console.log(add(5)); // Calculates and stores 15

console.log(add(5)); // Returns cached 15

23. What is event delegation in JavaScript?

Event delegation is a technique of JavaScript in which a parent element listens to the defined events of the child elements using event bubbling. This also assists in minimizing circumstances when several event listeners are written in the code.

24. What is debouncing?

Ans. Debouncing is a programming technique used to improve the performance of web applications by limiting the rate at which a function is executed. This is especially useful for event-driven actions like resizing the window, searching as you type, or scrolling, where rapid firing of events can negatively impact performance.

Example:

function debounce(func, delay) {

    let timer; 

    return function (...args) {

        const context = this; 

        clearTimeout(timer); 

        timer = setTimeout(() => {

            func.apply(context, args);

        }, delay);

    };

}

25. What is callback hell?

Ans. Callback hell occurs in JavaScript when numerous nested callbacks create a complex, deeply indented code structure, commonly known as the “pyramid of doom.” This makes the code hard to read, debug, and maintain, ultimately resulting in reduced code quality and challenges with scalability.

Example:

getData(function(data) {

    processData(data, function(processedData) {

        saveData(processedData, function(savedData) {

            sendConfirmation(savedData, function(response) {

                console.log("Operation completed: " + response);

            });

        });

    });

});

26. What is the easiest way to add an element to the beginning of an array in JavaScript?

To add an element to the beginning of an array, the easiest way is to use the method ‘array.unshift()’.

Example –

const myArray = [1,2,3,4,5];
myArray.unshift(10);
console.log(myArray);

Output –

[10,1,2,3,4,5]

Bonus: To remove an element at the beginning of an array use method ‘array.shift()’.

27. What is the use of Object.freeze?

Object.freeze is used if we want to freeze or fix the values of an object so that it cannot be changed or modified.

let frozenObject = { company: “Intellipaat”, employees: 200 }
Object.freeze(frozenObject);
frozenObject.company = “Google”; // This won’t work

28. What are Template Literals in JavaScript?

Template Literals denoted with “(backticks) were introduced in ES6. By using Template Literals we can easily concatenate strings. All we have to do is put the expression inside ‘${}’. This will help get rid of using the ‘+’ operator.

Example –

const name = ‘Intellipaat’;
const = 200;
console.log(`I am working with ${name}, and it has ${employeeCount}+ employees at the moment.`);

Output –

I am working with Intellipaat, and it has 200+ employees at the moment.

29. What is ‘this’ object in JavaScript?

In JavaScript ‘this’ stores the current context or reference of the current object from where it is called.

Example –

const obj = {
name: "Intellipaat",
print: function () {
console.log(this.name);
}
};
obj.print();

Output –

Intellipaat

30. Explain the difference between null and undefined.

If a variable has been intentionally assigned a value of NULL, it means it must store a value of null, which means no value.

In JavaScript ‘undefined’ is the default type of a variable. It remains undefined until we assign it a value.

Bonus: If we compare null and undefined using ‘==’, it will give the output as true.

console.log(null == undefined);

Output-

true

However, if we compare using ‘===’, it will give the output as false.

console.log(null === undefined);

Output –

false

31. What do you understand about Mutable and Immutable in the context of JavaScript?

In JavaScript, we have different data types, out of which some are mutable and some are immutable.

Mutable means that the value of such variables can be changed directly after their creation. Example – Arrays and Objects.

Immutable means their value cannot be changed after their creation. Examples – numbers, and strings.

32. What are Spread Operators in JavaScript?

Spread Operators (. . .) in JavaScript are used to “spread” the elements of an array or in JavaScript. By using Spread Operators we can copy output array/object values, merge them, pass these values to a function efficiently, etc. Let’s understand these concepts with some examples.

Example 1-

const arr = [1, 2, 3];
console.log(...arr);

Output-

1 2 3

Example 2-

const numbers = [1, 2, 3];
function add(a, b, c) {
return a + b + c;
}
console.log(add(...numbers));

Output-

6
Example 3-

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
console.log(merged);

Output-

{ a: 1, b: 2 }

33. What do you understand about Array destructuring in JavaScript?

Destructuring was introduced in JS ES6. It is used to unpack the values from the given array and assign them to unique variables.

Example –

const keywords= ["var", "let", "const"];
const [first, second, third] = keywords;
console.log(first);
console.log(second);
console.log(third);

Output-

“var”
“let”
“const”

Note: Destructuring can be used in a similar way with Objects as well.

 

34. What do you understand by Lexical Scoping?

Lexical Scoping in JavaScript means a function can use values declared in its parent’s scope but its parent cannot do the same. Lexical Scope implies the block of code in which a function or variable is declared.

Variables declared using the ‘var’ keyword are function-scoped which means their lexical scope lies within the function they are declared in.

Example:

function testVar() {
if (true) {
var x = 10; // This variable is “Function” and that is its “Lexical” scope
}
console.log(x); // 10 (accessible outside the block)
}
testVar();

Whereas variables declared with ‘let’ or ‘const’ keywords are block-scoped. This means their lexical scope lies within a block, like, inside if, for, or while blocks.

function testLet() {
if (true) {
let y = 20; // This variable is “Block” scoped and that is its “Lexical” scope
}
console.log(y); // ReferenceError: y is not defined (as it cannot be accessed outside its lexical scope.
}
testLet();

35. How to convert an array into an object and vice-versa?

• To convert an array into an object we can use a method named ‘fromEntries()’.

Example –

const entries = [
["name", "Intellipaat"], ["employees", 200]];
const newObject = Object.fromEntries(entries);
console.log(newObject);

Output-

{ name: ‘Intellipaat’, employees: 200 }

• To convert an Object to an Array we can use a method named ‘entries()’.

Example –

const user = {
name: "Intellipaat",
employees: 200
};
const newArray = Object.entries(user);
console.log(newArray);

Output-

[ [‘name’, ‘Intellipaat’], [’employees’, 200] ]

Javascript interview questions for 5 years Experience

36. What are async and await keywords in JavaScript?

Async and Await keywords in JavaScript are used for working with asynchronous operations employing JavaScript promises.

Async

Async in JavaScript is used as a tag to describe an asynchronous function. The Async keyword results in a promise.

Example:

async function functionName() {

  // Function body

}

Await

Await is used in JavaScript inside the async function and its function is to wait until a promise is either resolved or rejected.

Example:

let result = await somePromise;

37. Difference between Java and JavaScript

Java:  The basics of Java are that it is an object-oriented programming language. In the years of the rise of computer science and information technologies, it was one of the most popular languages for programming. Because of its virtual machine platform and an object-oriented program language, one can compile programs virtually for any kind of platform. 

JavaScript: JavaScript is a scripting language of the client side. JavaScript is a lightweight computer language that comes into the category of scripting language which is used to develop an interactive website. It can also animate dynamically added text to HTML components.

38. What are web workers in JavaScript?

In JavaScript, Web Workers let run scripts in background threads apart from the main thread and hence contribute to carrying out heavy tasks that do not lock the interface. They enhance efficiency because certain processes – computations, data processing, image manipulation – can run concurrently. Web Workers use postMessage and onmessage to interact with the main thread but it is prohibited to touch the DOM and window.

39. What is currying in JavaScript?

Currying in JavaScript is functional programming which is technique that turns a function with multiple arguments into a sequence of functions each of which expects a single argument.
Example:

function curriedAdd(a) {

  return function(b) {

    return a + b;

  };

}

const addTwo = curriedAdd(2);

console.log(addTwo(3)); 

40. What is prototype inheritance?

Prototype inheritance in JavaScript is a technique that allows objects to inherit properties and methods from other objects. In JavaScript, every object has an internal link to its prototype, which is another object. The prototype chain is made up of these prototypes.

Example:

// constructor function

function fun(name) {

  this.name = name;

}

// Add a method to the prototype

fun.prototype.var = function() {

  return `Hello, I am ${this.name}.`;

};

// Create an object

const intelli = new fun('Intellipaat');

// Access a property and a prototype method

console.log(intelli.name);      

console.log(intelli.var());   

41. How to perform deep freezing in a nested object?

To perform deep freezing in a nested object in JavaScript, you need to recursively apply Object.freeze() to every level of the object, including its nested properties. You can check if the data is frozen at each level by using Object.isFrozen().

You can do so by implementing the following code –

Step 1 – Implementing the deepFreeze function to freeze every object recursively.

function deepFreeze(obj)
{
Object.freeze(obj); // Iterate over all properties of the object
Object.getOwnPropertyNames(obj).forEach((prop) => {
const value = obj[prop];
// If the value is an object and not null, and hasn't been frozen yet, freeze it
if ( value !== null && typeof value === "object" && !Object.isFrozen(value) )
{
deepFreeze(value); // This will recursively call deepFreeze
} });
return obj; // Returns the frozen object
}

Step 2 – Call the function deepFreeze() and check if each object is frozen or not.

const nestedObject = {
level1: {
level2: {
level3: {
key: "value",
},
},
anotherKey: "anotherValue",
},
};
const frozenObject = deepFreeze(nestedObject);
// Trying to modify properties
frozenObject.level1.level2.level3.key = "newValue"; // This will not work now
delete frozenObject.level1.level2; // This will not work now
frozenObject.newProp = "test"; // This will not work now
console.log(frozenObject);
// Check if the object is frozen
console.log(Object.isFrozen(frozenObject)); // This will print
true
console.log(Object.isFrozen(frozenObject.level1)); //This will print
true
console.log(Object.isFrozen(frozenObject.level1.level2)); // This will print
true
console.log(Object.isFrozen(frozenObject.level1.level2.level3)); // This will print true
<strong>Output-</strong>
{
level1: {
level2: {
level3: { key: "value" }
},
anotherKey: "anotherValue"
}
}
true
true
true
true

42. What is the significance of Closures in JavaScript?

Closure allows the inner function to remember the scope in which it was created even after the outer function has finished executing which includes remembering variables from the outer function’s scope

function add(x)
{
return function(y)
{
return(x+y);
};
}
var add5 = add(10);
var add10 = add(20);
console.log(add5(50));
console.log(add10(30));

Output –

60
50

Note: Here add5 and add10 are both closures as they share the same function body definition but have different lexical environments.

43. Higher Order Function vs Callback Function?

A Higher Order Function is one that takes another function as an argument.

Whereas a Callback function is one that is passed to another function as an argument.

Example –

const calculator = (num1,num2, operator) => operator(num1, num2);
const subs = (a,b) => return (a-b);
const add = (a,b) => return (a+b);
console.log(calculator(20,10, subs));
console.log(calculator(20,10, add));

Here, the calculator is an HOF, as it takes another function as a parameter. Whereas, ‘subs’ and ‘add’ are callback functions that are being passed to another function as a parameter.

44. What do you understand by Currying?

When a function takes one argument and returns a new function to handle new arguments, it will go on until all arguments are provided and the result is computed. This is called Currying.

Example –

currying(1)(11)(111);
function currying(num1) {
return function(num2){
return function(num3) {
console.log(num1, num2, num3);
}
}
}

45. How does the JavaScript event loop work, and what role do the call stack, task queue, and microtask queue play in it?

The answer to this question can be explained step by step in the following way –

• JavaScript executes synchronous code using a call stack (LIFO – Last In, First Out). Each function call is pushed onto the stack and popped off once it finishes executing.
• Then we have an event loop in JavaScript that continually checks the call stack and task queues to manage the execution of synchronous and asynchronous code. It ensures the call stack is empty before picking tasks from the queues.
• JavaScript has Task Queues which are of the following types:
  • Macrotask Queue (Task Queue): Holds tasks like setTimeout, setInterval, setImmediate (Node.js), and I/O operations.
  • Microtask Queue: Holds tasks like Promise.then, MutationObserver, and process.nextTick (Node.js). Microtasks have higher priority and are executed before macro tasks.

Predict the Output

46. Predict the Output of the following code.

function abc(){
	for(let i =0; i<5; i++){
		setTimeout(function () {
			console.log(i);
	}, 1000)
}}
abc();

The output of this code will be printed in intervals of 10 seconds like this –
0
1
2
3
4
Explanation: let’s block scoped. Every time the value it takes is different, so it prints a different value.

47. Predict the Output of the following code.

function abc(){
	for(var i =0; i<5; i++){
		setTimeout(function () {
			console.log(i);
	}, 1000)
}}
abc();

The output of this code will be printed in intervals of 10 seconds like this –

5
5
5
5
5

Explanation: ‘var’ is a function or global scope. Every time the value it takes is different, so by the time the loop ends the value of i=5, so it prints 5.

48. In what order will the output be printed?

function abc(){
setTimeout(function () {
console.log(“SetTimeOut”);
}, 0)
Promise.resolve(“Promise Resolved”).then(res => console.log(“Promise Resolved”);
console.log(“Hi”);
}
abc();

The sequence of output will be –

Hi
Promise Resolved
SetTimeOut

Explanation: First JavaScript executes console.log(“Hi”), because it is a synchronous code, so it gets the first priority.

Next out of promise and timer JavaScript always prioritizes microtasks like network calls over regular tasks like timeouts)

49. Predict the Output of the following code.

let company = { name: 'Intellipaat', employees: 200 }; 
let company2 = company; 
company2.name = 'Google'; 
console.log(company);
console.log(company2);

The output of the above code will be –

{ name: ‘Google’, employees: 200 }
{ name: ‘Google’, employees: 200 }

Explanation: The reason both objects are printing the same value is because both company and company2 refer to the same memory space. This is because in JavaScript objects are reference types. To solve this you can use spread operators (. . .), which will create a shallow copy of the object.

Example –

let company = { name: 'Intellipaat', employees: 200 };
let company2 = { ...company }; // Creates a shallow copy
company2.name = 'Google';
console.log(company); 
console.log(company2); 

Output –

{ name: 'Intellipaat', employees: 200 }
{ name: 'Google', employees: 200 }

50. Predict the Output of the following code.

function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const fn1 = outer();
const fn2 = outer();

fn1(); 
fn1();
fn2(); 
fn1(); 

Output-
1
2
1
3

Explanation: Each call to outer() creates a new closure with its own count variable initialized to 0. When fn1 and fn2 are created, they each retain access to their own separate count variable due to lexical scoping. As a result, calls to fn1() increment their count independently of fn2(), ensuring they do not interfere with each other.
 

Conclusion

This brings me to the end of this article. I am sure it must have been a great read and you might have stumbled into a lot of new concepts and questions. With this, I wish you all the best in your interviews. If you want to explore more and master the skills in this domain you can enroll in Intellipaat’s Website Development Courses today!