Javascript Interview Questions

1. What is JavaScript?
Answer: JavaScript is a high-level, interpreted programming language
that is primarily used to create interactive and dynamic content on
web pages. It is an essential part of web development, alongside
HTML and CSS.
2. What are the different data types in JavaScript?
Answer: JavaScript supports several data types, including:
Primitive types: string, number, boolean, null, undefined, symbol, and
bigint
Objects: Object, Array, Function, Date, RegExp, and more.
3. What is the difference between let, const, and var?
Answer:
var: Function-scoped or globally-scoped if declared outside a
function, can be re-declared and updated.
let: Block-scoped, can be updated but not re-declared within the same
scope.
const: Block-scoped, cannot be updated or re-declared. However, the
properties of objects declared with const can be modified.
4. What is a closure in JavaScript?
Answer: A closure is a function that retains access to its lexical scope,
even when the function is executed outside that scope. This allows a
function to "remember" the environment in which it was created.
5. Explain event delegation in JavaScript.
Answer: Event delegation is a technique where a single event listener
is added to a parent element to manage events for its child elements.
This is efficient as it reduces the number of event listeners and utilizes
event bubbling.
 6. What is the difference between == and === in JavaScript?
Answer: == (loose equality) checks for equality after performing type
conversion if necessary, while === (strict equality) checks for
equality without type conversion, meaning both value and type must
be the same.
7. What is the purpose of the this keyword in JavaScript?
Answer: The this keyword refers to the object it belongs to. Its value
depends on the context in which it is used, such as within a method, a
function, or in global scope.
8. What are promises in JavaScript?
Answer: Promises are objects that represent the eventual completion
(or failure) of an asynchronous operation and its resulting value. A
promise can be in one of three states: pending, fulfilled, or rejected.
9. What is an arrow function and how is it different from a
regular function?
Answer: Arrow functions provide a shorter syntax for writing
functions and do not have their own this binding. Instead, this is
lexically inherited from the surrounding scope.
// Regular function
function add(a, b) {
return a + b;
}

// Arrow function
const add = (a, b) => a + b;
10. What are the different ways to create an object in
JavaScript?
Answer: Objects can be created in several ways:
Using object literals:
const obj = { key: 'value' };
Using the new keyword with a constructor function:
function Person(name) {
this.name = name;
}
const person1 = new Person('John');
Using Object.create() method:
const proto = { key: 'value' };
const obj = Object.create(proto);
11. What is asynchronous programming and how does
JavaScript handle it?
Answer: Asynchronous programming allows the program to perform
tasks without blocking the main thread. JavaScript handles
asynchronous operations using callbacks, promises, and async/await
syntax.
12. What is the event loop in JavaScript?
Answer: The event loop is a mechanism that allows JavaScript to
perform non-blocking I/O operations, despite being single-threaded. It
continuously checks the call stack and the task queue to execute code,
collect events, and execute queued tasks.
13. What is the difference between call, apply, and bind?
Answer:
call: Invokes a function with a specified this value and arguments
provided individually.
apply: Invokes a function with a specified this value and arguments
provided as an array.
bind: Creates a new function that, when called, has its this value set to
a specified value, with a given sequence of arguments preceding any
provided when the new function is called.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'Alice' };

greet.call(person, 'Hello', '!'); // Hello, Alice!

greet.apply(person, ['Hi', '.']); // Hi, Alice.
const greetPerson = greet.bind(person, 'Hey');
greetPerson('?'); // Hey, Alice?
14. Explain hoisting in JavaScript.
Answer: Hoisting is a JavaScript mechanism where variables and
function declarations are moved to the top of their containing scope
during the compilation phase. This means variables declared with var
and functions can be used before their actual declaration in the code.
15. What is the difference between synchronous and
asynchronous functions?
Answer: Synchronous functions are executed sequentially, blocking
the execution of subsequent code until they finish. Asynchronous
functions allow the program to continue executing subsequent code
while they complete in the background, typically using callbacks,
promises, or async/await for handling the result.
16. What is event loop? What is precedence of event loop?
The event loop is a fundamental concept in JavaScript that allows for
asynchronous programming by managing
the execution of code, collecting and processing events, and executing
queued sub-tasks. It's a part of the
JavaScript runtime environment and is crucial for handling operations
that might take some time to complete,
such as I/O operations, without blocking the main thread.
17. How the Event Loop Works
Call Stack: This is where the JavaScript engine keeps track of
function calls. When a function is invoked, it's added
to the call stack. When the function completes, it's removed
from the stack.

Web APIs: These are browser-provided APIs that handle operations

like setTimeout, DOM events, HTTP requests
(via XMLHttpRequest or Fetch), and more. When these operations
are completed, they send their callbacks to
the task queue.
Task Queue (or Callback Queue): This queue contains callbacks for
events like user interactions, timers, or
network responses. These tasks are processed after the current
execution context (call stack) is empty.
Microtask Queue: This is a special queue for microtasks, which
include promises and MutationObserver
callbacks. Microtasks are given higher priority over tasks in the task
queue.
Event Loop: The event loop continuously checks the call stack to see
if it's empty. If the call stack is empty, it
looks at the microtask queue first and processes all microtasks before
moving to the task queue. This ensures
that promises and other microtasks are handled as soon as possible.
18. Among setTimeout() and promise() which one will take
precedence?
In JavaScript, when comparing setTimeout() and Promise (or more
specifically, the .then() or .catch() methods of
a promise), promises take precedence over setTimeout() due to the
way the event loop handles microtasks and macrotasks.
Explanation
Promises: When a promise resolves, its .then() and .catch() handlers
are placed in the microtask queue.
Microtasks are given higher priority and are executed before any tasks
in the macrotask queue.
setTimeout(): The callback function passed to setTimeout() is placed
in the macrotask queue (also known as the
task queue). Tasks in this queue are processed only after all the
microtasks have been completed.
Event Loop Order of Operations
Execute all code in the current call stack.
Process all the tasks in the microtask queue.
Process the next task from the macrotask queue.
Example
Consider the following code snippet to demonstrate the precedence:
console.log('Start');
setTimeout(() => {
console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
console.log('Promise');
});
console.log('End');
Execution Flow:
Call Stack: Execute console.log('Start') which logs
"Start".

Call Stack: Execute setTimeout which schedules the callback in the

macrotask queue.
Call Stack: Execute Promise.resolve().then(...) which schedules the
.then() callback in the microtask queue.
Call Stack: Execute console.log('End') which logs
"End".
After the call stack is empty:
Microtasks: Process the promise's .then() callback which logs
"Promise".
Macrotasks: Process the setTimeout callback which logs
"setTimeout".
So, the output will be:
Start
End
Promise
setTimeout
Summary
Promises and their .then() handlers are placed in the microtask queue
and are executed before the tasks in the
macrotask queue.
setTimeout() callbacks are placed in the macrotask queue and are
executed after all microtasks have been
processed.
Therefore, promises take precedence over setTimeout() in the event
loop.
19. Where do you mostly use rest operator?
The rest operator (...) in JavaScript is used to handle function
arguments, array elements, and object properties
in a flexible way. Here are the primary scenarios where the rest
operator is commonly used:
1. Function Parameters
The rest operator allows you to represent an indefinite number of
arguments as an array. This is especially useful
when creating functions that accept a variable number of arguments.
Example:
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22
2. Destructuring Arrays
The rest operator can be used in array destructuring to capture the
remaining elements into a new array.
Example:
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
3. Destructuring Objects
Similarly, the rest operator can be used in object destructuring to
collect the remaining properties into a new
object.

Example:
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(rest); // { c: 3, d: 4 }
4. Function Arguments
When dealing with function arguments, especially in functions where
you don't know how many arguments will
be passed, the rest operator can help you manage them efficiently.
Example:
function logArguments(...args) {
args.forEach(arg => console.log(arg));
}
logArguments('one', 'two', 'three');
// one
// two
// three
Summary
The rest operator is versatile and simplifies handling variable numbers
of parameters and properties in functions,
arrays, and objects. Its main uses are:
Function Parameters: Capturing all arguments passed to a function.
Array Destructuring: Collecting remaining elements in an array.
Object Destructuring: Collecting remaining properties in an object.
Managing Function Arguments: Simplifying the handling of a
variable number of arguments.
Using the rest operator makes code more concise and readable,
especially when dealing with collections of data
or dynamic parameters.
20. What is shallow copy and deep copy?
In JavaScript, the concepts of shallow copy and deep copy refer to the
ways in which objects or arrays are
duplicated. The key difference lies in how these copies handle nested
objects or arrays.
Shallow Copy
A shallow copy of an object or array is a new object or array that has
copies of the references to the original
object or array's elements. If the original object contains other
objects or arrays as its properties, the shallow
copy will have references to those same objects or arrays, not
duplicates.
Deep Copy
A deep copy of an object or array is a new object or array that is an
entirely independent copy of the original.
This means that all levels of nested objects or arrays are also copied,
resulting in a completely separate object or
array that shares no references with the original.
Methods for Creating Copies
Shallow Copy Methods:
Object.assign():
let shallowCopy = Object.assign({}, originalObject);
Spread Operator (...):

let shallowCopy = { ...originalObject };

let shallowCopyArray = [...originalArray];
Array.prototype.slice():

let shallowCopyArray = originalArray.slice();

Deep Copy Methods:
Manual Recursion:
Write a custom function to recursively copy nested objects or arrays.
This method is the most flexible and can
handle special cases, but it is more complex to implement.

function deepCopy(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (Array.isArray(obj)) {
return obj.map(item => deepCopy(item));
}
const copy = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = deepCopy(obj[key]);
}
}
return copy;
}
JSON.parse(JSON.stringify()):
This method is simpler and works well for plain objects and arrays
but has limitations. It cannot handle functions,
undefined, Infinity, NaN, and other non-serializable data.

let deepCopy = JSON.parse(JSON.stringify(originalObject));

Summary
Shallow Copy: Creates a new object or array with copies of the
original's references. Changes to nested objects
or arrays will affect both the original and the copy.
Deep Copy: Creates a new object or array that is entirely independent
of the original, including all nested objects
or arrays. Changes to the deep copy will not affect the original.
Understanding the difference between shallow and deep copies is
crucial for managing data in JavaScript,
especially when dealing with complex objects and nested structures.