JavaScript Interview Question

What is the difference between == and === in JavaScript?

- `==` (Double Equals): This is the loose equality operator. It checks for equality **after
converting the operands** to the same type (type coercion). For example, `5 == '5'`
would return `true` because the string `'5'` is converted to the number `5`.

- `===` (Triple Equals): This is the strict equality operator. It checks for equality
**without type conversion**. Both the value and the type must be the same. For
example, `5 === '5'` would return `false` because the types (number and string) are
different.

In short:
- `==` checks only for value equality (with type conversion).
- `===` checks for both value and type equality (without type conversion).
Explain the concept of closures in JavaScript.
In JavaScript, a closure is created when a nested function accesses variables from its
outer (enclosing) function, even after the outer function has finished executing.
How Closures Work:
• Lexical Scoping:
JavaScript uses lexical scoping, which means that a function's scope is determined by
where it is defined in the code. A nested function has access to variables in its own
scope, as well as the scopes of its enclosing functions.
• Function Creation:
Every time a function is created, a closure is also created. The closure encapsulates
the function and its surrounding lexical environment.
• Access to Outer Variables:
Even after the outer function has finished executing, the nested function retains access
to the variables in its outer scope through the closure.
How does event delegation work in JavaScript?
Event delegation in JavaScript is a technique where you attach a single event listener to
a parent element, instead of attaching separate listeners to each child element. This
listener then handles events that bubble up from its descendant elements.
How it works:
• Event Bubbling:
When an event occurs on a child element, it "bubbles up" the DOM tree, meaning it
triggers the same event on its parent, grandparent, and so on until it reaches the root of
the document.
• Attaching the Listener:
You attach the event listener to a parent element that contains the elements you're
interested in.
• Target Identification:
Inside the event handler, you can use the event.target property to determine which
specific element triggered the event. This allows you to handle the event differently
based on the target element.
What is the Document Object Model (DOM), and how do you manipulate it?
The Document Object Model (DOM) is a programming interface that represents an
HTML document as a tree-like structure of objects, allowing developers to access and
manipulate the content, structure, and style of a web page using JavaScript, essentially
letting you change elements on a webpage dynamically without reloading the entire
page; you manipulate the DOM by using JavaScript methods to select specific
elements within the document and then modify their properties or attributes.
Key points about the DOM:
• Structure:
The DOM represents a web page as a hierarchy of nodes, where each node represents
an element (like a <div>, <p>, or <img>), attribute, or text content within the document.
• Accessing elements:
To manipulate the DOM, you use JavaScript methods to "query" the document and
select specific elements based on their ID, class name, tag name, or other criteria.
• Manipulation methods:
Once you've selected an element, you can use various DOM methods to change its
content (like text), add new elements, remove existing elements, modify attributes, and
even add event listeners to react to user interactions.
Explain how the this keyword works in JavaScript.
In JavaScript, the this keyword refers to the object that is currently executing the
code. Its value is determined by how the function is called.
Here's a breakdown of how this works in different scenarios:
1. Global Context:
• When used outside of any function, this refers to the global object (which
is window in browsers).
JavaScript
console.log(this); // Outputs: window
2. Function Context:
• In a regular function, this refers to the global object.
JavaScript
function sayHello() {
console.log(this); // Outputs: window
}
sayHello();
3. Object Method:
• When a function is called as a method of an object, this refers to the object that
the method is called on.
JavaScript
const person = {
name: "Alice",
greet: function() {
console.log("Hello, " + this.name);
}
};

person.greet(); // Outputs: Hello, Alice

What are JavaScript Promises, and how do you use them?
A Promise in JavaScript is an object that represents the eventual completion (or failure)
of an asynchronous operation and its resulting value. Promises are used to handle
asynchronous operations, like API calls or reading a file, in a more structured way,
avoiding the "callback hell" problem.
States of a Promise:
1. Pending: The initial state; the operation is still in progress.
2. Fulfilled: The operation completed successfully, and the promise has a value
(resolved).
3. Rejected: The operation failed, and the promise has a reason (error).
How does asynchronous programming work in JavaScript? Can you explain using
async/await?
In JavaScript, asynchronous programming allows code to execute multiple tasks
seemingly simultaneously by not blocking the main thread while waiting for long-
running operations to finish, and "async/await" is a syntax that makes writing
asynchronous code look more like synchronous code, where you use
the await keyword to pause execution within an async function until a promise
resolves, effectively waiting for the result before moving on to the next line.
Key points about async/await:
• async keyword:
When you declare a function as async, it automatically returns a promise, signifying
that the function might take some time to complete and won't immediately return a
value.
• await keyword:
Inside an async function, you can use the await keyword before a promise-returning
operation, which tells JavaScript to pause execution at that point until the promise
settles (resolves or rejects) and then retrieve the resolved value.
What are arrow functions, and how do they differ from regular functions?
Arrow functions are a concise way of writing functions in JavaScript, introduced in ES6,
that differ from regular functions primarily by having a simpler syntax, automatically
inheriting the "this" context from the surrounding scope, and not being able to be used
as constructors due to their unique "this" binding behavior; making them particularly
useful for small, anonymous functions and callback functions.
Key differences between arrow functions and regular functions:
• Syntax:
Arrow functions use the "fat arrow" (=>) symbol to define the function, while regular
functions use the "function" keyword.
• "this" binding:
In regular functions, "this" is determined dynamically based on how the function is
called, whereas in arrow functions, "this" always refers to the "this" of the enclosing
scope.
• Constructor usage:
Regular functions can be used as constructors with the "new" keyword, while arrow
functions cannot.
• Implicit return:
When an arrow function only has a single expression as its body, the return statement
is often omitted.
Explain the difference between var, let, and const.
In JavaScript, the main differences between var, let, and const are their scope and
mutability:
• var
This variable has function or global scope, and can be reassigned. It's been around
since the beginning of JavaScript and is more flexible than let and const. However,
because it can be reassigned, it can lead to bugs if the variable is used in multiple parts
of the code.
• let
This variable has block scope and can be reassigned. It was introduced in ES6 as a
replacement for var and offers a more predictable scoping mechanism.
• const
This variable has block scope and is a constant variable that cannot be reassigned after
it is defined. It's good practice to use const when the value of a variable won't change.
What is hoisting in javascript ?
Hoisting is a JavaScript mechanism where variable and function declarations are
moved to the top of their containing scope during the compilation phase, before code
execution. This means you can use a variable or function before it's declared in your
code.
Important points about hoisting:
• Only declarations are hoisted, not initializations. This means that while the
variable or function name is moved to the top, the assignment is not.
• Function declarations are hoisted completely. This means you can call a function
before it's defined in your code.
• Variables declared with var are hoisted and initialized with undefined.
• Variables declared with let and const are hoisted, but they are not
initialized. Attempting to access them before their declaration results in
a ReferenceError.
What are some of the new features introduced in ES6?
ES6 (ECMAScript 2015) introduced several new features that made JavaScript more
powerful, cleaner, and easier to work with. Here are some of the key features:
1. let and const (Block-scoped variables)
• let: Declares block-scoped variables, meaning they are only accessible within
the block (e.g., within {}).
• const: Declares block-scoped constants, meaning the value cannot be
reassigned.
let x = 10; // Can be reassigned
const y = 20; // Cannot be reassigned
2. Arrow Functions
• A shorter syntax for writing functions and automatically binds this to the
surrounding context.
const add = (a, b) => a + b; // Equivalent to: function add(a, b) { return a + b; }
3. Template Literals
• A way to create strings using backticks (``) and embed variables or expressions
using ${}.
let name = 'Aman';
let message = `Hello, ${name}! Welcome to ES6.`; // Output: Hello, Aman! Welcome
to ES6.
4. Default Parameters
• Allows function parameters to have default values if no value is passed.
function greet(name = 'Guest') {
console.log(`Hello, ${name}`);
}
greet(); // Output: Hello, Guest
5. Destructuring Assignment
• Allows unpacking values from arrays or properties from objects into variables.
Example (Array Destructuring):
const [a, b] = [1, 2]; // a = 1, b = 2
Example (Object Destructuring):
const person = { name: 'Aman', age: 23 };
const { name, age } = person; // name = 'Aman', age = 23
6. Rest and Spread Operators
• Spread (...): Expands an array or object into its elements or properties.
• Rest (...): Collects remaining elements or properties into an array or object.
Example (Spread):
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // Output: [1, 2, 3, 4, 5]
Example (Rest):
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
sum(1, 2, 3); // Output: 6
Explain the concept of destructuring in JavaScript.
Destructuring in JavaScript is a way to extract values from arrays or objects and assign
them to variables in a concise and readable way. It's a powerful feature introduced in
ES6 that can greatly improve your code's readability and maintainability.
Here's a breakdown of the concept:
Array Destructuring.
const numbers = [1, 2, 3];
const [first, second, third] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
In this example, we're extracting the values from the numbers array and assigning them
to individual variables first, second, and third. Object Destructuring.
const person = { name: "Alice", age: 30 };
const { name, age } = person;

console.log(name); // Alice
console.log(age); // 30
Here, we're extracting the name and age properties from the person object and
assigning them to variables with the same names.
Key Benefits of Destructuring:
• Readability:
Destructuring improves code readability by making it clear which values you're
extracting from a data structure.
• Conciseness:
It reduces the need for repetitive code that accesses properties or elements
individually.
• Flexibility:
You can easily extract specific values, rename variables, and handle nested structures.
Advanced Destructuring Techniques:
 • Default Values: You can provide default values for variables in case the property
or element doesn't exist.
JavaScript
const { name = "Unknown", age } = person;
• Rest Operator: The rest operator (...) can be used to gather the remaining
elements or properties into an array or object.
JavaScript
const [first, ...rest] = numbers;
console.log(rest); // [2, 3]
• Nested Destructuring: You can destructure nested objects and arrays.
JavaScript
const user = { id: 1, address: { city: "New York" } };
const { id, address: { city } } = user;
What is the difference between map() and forEach() in JavaScript?
map() and forEach() are both methods in JavaScript used to iterate over arrays, but they
have key differences:
Return Value:
• map():
Returns a new array with the results of applying the provided function to each element
of the original array.
• forEach():
Doesn't return a value (returns undefined). It simply executes the provided function for
each element in the array.
Use Cases:
• map():
Use map() when you want to transform the elements of an array and create a new array
from the transformed values.
• forEach():
Use forEach() when you want to perform an action on each element of an array without
creating a new array.
const numbers = [1, 2, 3, 4];

// map() creates a new array with doubled values

const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8]

// forEach() simply logs each value

numbers.forEach(number => console.log(number)); // 1 2 3 4
Chaining:
• map():
Can be chained with other array methods like filter() or reduce() since it returns an
array.
• forEach():
Cannot be chained with other array methods since it doesn't return a value.
What are default parameters in ES6?
In ES6, default parameters allow you to set default values for function parameters. This
means that if no argument or undefined is passed when the function is called, the
parameter will take on the default value specified.

In this example:
 • If greet() is called without an argument, the parameter name defaults to 'Guest'.
• If an argument (like 'Aman') is provided, it overrides the default value.
Benefits:
1. Simplifies code: No need to write additional logic to check if a parameter is
undefined.
2. Improves readability: Function signatures are clearer and easier to maintain.
Important Notes:
• The default value is applied only when the argument is missing or explicitly
undefined.
• null or other falsy values do not trigger the default parameter.

Explain the concept of arrays and objects in JavaScript

Arrays in JavaScript:
An array is a special type of object that is used to store multiple values in a single
variable. Arrays are ordered collections, meaning each value is associated with a
numbered index starting from 0. Arrays can hold values of different data types (strings,
numbers, objects, etc.) and are commonly used when you need to manage lists of
items.
How to create an array:
1. Using square brackets []:
Using the Array constructor

Accessing and modifying array elements:

• You can access array elements using their index.
• You can modify elements by directly assigning new values.

Common Array Methods:

• push(): Adds an element to the end of the array.
• pop(): Removes the last element.
• shift(): Removes the first element.
• unshift(): Adds an element to the beginning of the array.
• forEach(): Iterates over each element in the array.
• map(): Creates a new array by transforming each element.
Objects in JavaScript:
An object is a collection of key-value pairs where each key (also called a property) is
associated with a value. Objects are used to represent real-world entities like a person,
car, or user, where each entity has properties that describe it.
How to create an object:
Using curly braces {}:

Using the Object constructor:

Accessing and modifying object properties:

• You can access properties using dot notation or bracket notation.
• You can modify properties by directly assigning new values.
Common Object Methods:
• Object.keys(): Returns an array of the object’s keys.
• Object.values(): Returns an array of the object’s values.
• Object.assign(): Copies values from one or more source objects to a target
object.
• hasOwnProperty(): Checks if an object has a specific property.

Arrays vs. Objects:

• Arrays: Use ordered, numbered indices and are best for managing lists of data.
 • Objects: Use key-value pairs and are best for managing structured data with
named properties.
In summary:
• Arrays: Lists of values (ordered by index).
• Objects: Collections of key-value pairs (unordered, named properties).
What is the difference between a stack and a queue?
1. Stack:
• Definition: A stack is a data structure that follows the Last In, First Out (LIFO)
principle. This means the last element added to the stack is the first one to be
removed.
• Operations:
o Push: Adds an element to the top of the stack.
o Pop: Removes the element from the top of the stack.
o Peek: Returns the top element without removing it.
• Use Case: Stacks are useful in scenarios like function call management (call
stack), undo/redo operations in editors, and balancing symbols (parentheses).

2. Queue:
• Definition: A queue is a data structure that follows the First In, First Out (FIFO)
principle. This means the first element added to the queue is the first one to be
removed.
• Operations:
o Enqueue: Adds an element to the back of the queue.
o Dequeue: Removes the element from the front of the queue.
 o Peek: Returns the front element without removing it.
• Use Case: Queues are useful in situations like task scheduling, managing print
jobs, and handling asynchronous requests (like server requests).

Difference Between Synchronous and Asynchronous JavaScript:

JavaScript can execute both synchronously and asynchronously, depending on the
nature of the tasks. Understanding this distinction is essential for dealing with
operations like API requests, file handling, or time-consuming processes.
1. Synchronous JavaScript:
• Definition: In synchronous JavaScript, tasks are executed one after another in a
single sequence or thread. Each task must complete before the next task starts.
This means if one task takes time (e.g., a network request or file reading), the
entire script will wait until it finishes.
• Blocking: Synchronous operations are blocking, meaning that the code following
the current task has to wait until the task completes.
Issues with Synchronous JavaScript:
• If a task takes a long time (e.g., a network request or a large calculation), it will
block the rest of the code from running.
• For example, if fetching data from a server takes 5 seconds, the entire page or
application may freeze until the request completes.
2. Asynchronous JavaScript:
• Definition: In asynchronous JavaScript, tasks can start and run in the background
without blocking the main thread. This allows the program to continue executing
other tasks while waiting for the asynchronous task to complete.
• Non-blocking: Asynchronous operations are non-blocking, meaning that other
tasks can proceed while waiting for the asynchronous operation to finish (e.g., file
reading, API requests, timers).
• Callback functions, Promises, and async/await are often used to handle
asynchronous operations in JavaScript.
Here, Task 3 executes before Task 2 because setTimeout runs asynchronously.
JavaScript does not wait for Task 2 to complete before moving on to Task 3.
How Asynchronous JavaScript Works:
JavaScript is single-threaded, but asynchronous tasks are handled by the event loop,
which allows the program to manage long-running operations without blocking other
tasks. Here's how it works:
1. Main Thread: Executes code line by line.
2. Web APIs/Async Operations: Some operations, like setTimeout or API calls, are
delegated to the browser’s Web APIs.
3. Event Loop: Once an asynchronous operation completes, the event loop ensures
the callback or Promise resolution is handled after the main thread is free.
Key Techniques for Asynchronous JavaScript:
Callbacks: Functions that are passed as arguments to other functions and executed
once an asynchronous operation completes.

Promises: Objects that represent a value that may be available now, later, or never. It
helps in managing asynchronous tasks more cleanly than callbacks.
Async/Await: Syntactic sugar built on Promises that allows writing asynchronous code
that looks and behaves like synchronous code.
Explain the concept of event bubbling and event capturing.
When an event occurs on an element in the DOM (like a click), it doesn't just trigger that
element's event handler. Instead, the event flows through the DOM in two phases:
event capturing and event bubbling. Understanding these two phases helps in
managing how events are handled, especially when multiple elements are involved.
1. Event Bubbling:
• Definition: In event bubbling, when an event occurs on an element, it first triggers
the event handler of the target element (the element where the event occurred),
then it "bubbles up" to the ancestor elements (like its parent, grandparent, etc.)
until it reaches the topmost element (document).
• Phase: Bubbling is the default phase in JavaScript. The event starts at the target
element and bubbles upward through the DOM hierarchy.
• Example: If a click event happens on a button inside a div, the event first triggers
on the button, then bubbles up to the div, and eventually to the document.
Example of Event Bubbling:
2. Event Capturing (Event Trickling):
• Definition: In event capturing (also known as trickling), the event is first captured
by the outermost ancestor and then propagates down to the target element.
• Phase: Event capturing happens before event bubbling. The event is captured
starting from the outermost parent down to the target element.
• Usage: Capturing phase is less commonly used but can be important when you
want to intercept events before they reach the target element.
Example of Event Capturing:
To listen in the capturing phase, you pass a third argument (true) to the
addEventListener method.
The event is first captured by the parent div and then proceeds to the child button.
Event Flow:
The event flow in JavaScript happens in three phases:
1. Capturing phase: The event travels from the root (document) down to the target
element.
2. Target phase: The event reaches the target element (where it was triggered).
3. Bubbling phase: The event bubbles up from the target element back to the root
(document).

Stopping Event Propagation:

Sometimes, you may want to stop the event from bubbling or capturing further. This is
where stopPropagation() comes in. It stops the event from propagating up (bubbling) or
down (capturing) the DOM tree.
Summary:
• Event Bubbling: The event starts at the target element and bubbles up through
the DOM tree.
• Event Capturing: The event starts at the root and trickles down to the target
element.
• You can control whether an event handler fires during the bubbling or capturing
phase by using the third parameter (true for capturing) in addEventListener.
How do you prevent default behavior for events in JavaScript?
In JavaScript, you can prevent the default behavior of an event using
the event.preventDefault() method.

What is the difference between deep and shallow copies in JavaScript?

In JavaScript, understanding the difference between deep and shallow copies is crucial
when working with objects and arrays. Here's a breakdown:
Shallow Copy:
• Creates a new object or array.
• Copies references to the original elements.
• Changes to nested objects or arrays in the copy will affect the original.

Deep Copy:
• Creates a new object or array.
• Recursively copies all nested objects and arrays.
• Changes to nested objects or arrays in the copy do not affect the original.
Methods for Shallow Copy:
Spread operator (...), Object.assign(), and Array.slice().
Methods for Deep Copy:
• JSON.parse(JSON.stringify()): (can be inefficient for large objects)
• Libraries like Lodash's cloneDeep()
• Custom recursive copy functions
When to Use Which:
• Shallow copy:
When you need to create a new object or array with the same top-level structure, and
you don't mind if changes to nested objects or arrays are reflected in the original.
• Deep copy:
When you need a completely independent copy of an object or array, including all
nested structures.
Explain the concept of the event loop in JavaScript
The event loop is a fundamental concept in JavaScript that allows the language to
handle asynchronous operations despite being single-threaded. It enables JavaScript
to execute non-blocking, asynchronous tasks efficiently without freezing the main
thread, making it suitable for tasks like handling user input, fetching data from APIs,
and timers.
Key Concepts:
• Single-threaded: JavaScript executes code in a single thread, meaning it can only
do one thing at a time. However, it uses asynchronous mechanisms (like
callbacks, Promises, and async/await) to handle tasks that take time, such as
network requests.
• Non-blocking: Even though JavaScript is single-threaded, it doesn't block the
execution of other tasks while waiting for asynchronous tasks to complete. This is
where the event loop comes into play.

Components of the Event Loop:

 1. Call Stack:
o The call stack is where functions are executed in JavaScript. It operates on
a "Last In, First Out" (LIFO) principle.
o When a function is called, it is added to the call stack. Once the function
finishes execution, it is removed from the stack.
2. Web APIs/Background Tasks:
o JavaScript interacts with Web APIs provided by the browser (like
setTimeout, DOM events, fetch).
o When an asynchronous task like a timer or an API request is initiated, it's
sent to these Web APIs. Once they complete, the callback or the result of
the Promise is passed to the callback queue.
3. Callback Queue (Task Queue):
o The callback queue holds the functions (or tasks) that are ready to be
executed after an asynchronous task completes.
o Functions in the callback queue are executed only when the call stack is
empty.
4. Microtask Queue:
o This is a separate queue for tasks like resolved Promises or tasks from
MutationObserver.
o The event loop prioritizes the microtask queue over the callback queue,
meaning tasks in the microtask queue are handled before the callback
queue.
5. Event Loop:
o The event loop continuously monitors both the call stack and the callback
queue.
o If the call stack is empty, the event loop checks the callback queue for
tasks to move into the call stack for execution.
How the Event Loop Works:
1. JavaScript executes synchronous code line by line. Each function call is pushed
onto the call stack and executed.
 2. When an asynchronous operation (like an API request or a timer) is encountered,
it's handed off to the Web APIs (e.g., setTimeout, XMLHttpRequest), and
JavaScript continues executing the next line of code.
3. Once the asynchronous operation is done, its callback is moved to the callback
queue or microtask queue.
4. The event loop checks if the call stack is empty. If it is, it takes tasks from the
microtask queue (if any), then from the callback queue, and moves them to the
call stack for execution.
Example of the Event Loop:

Explanation:
1. Start is printed immediately, as the console.log('Start') is synchronous and added
to the call stack.
2. The setTimeout callback is sent to the Web APIs and will be placed in the
callback queue after 2 seconds.
 3. The Promise.resolve() is also asynchronous but its then callback goes into the
microtask queue, which has higher priority than the callback queue.
4. End is printed, as it’s the next synchronous task in the call stack.
5. The event loop checks the microtask queue (which contains the resolved
Promise) and prints Promise resolved.
6. After that, the event loop picks up the setTimeout callback from the callback
queue and prints Timer callback.
Key Points to Remember:
1. Single-threaded but asynchronous: JavaScript can handle asynchronous
operations without blocking the main thread using the event loop.
2. Priority of Microtasks: Microtasks (like Promise resolutions) are given priority over
tasks from the callback queue.
3. Non-blocking I/O: The event loop allows JavaScript to perform non-blocking
operations like file reading, HTTP requests, and timers without halting the rest of
the program.
Visual Representation of the Event Loop:
1. Call Stack: Executes the current function or task.
2. Web APIs: Handles asynchronous tasks.
3. Callback Queue: Queues up tasks (callbacks) to be executed once the call stack
is empty.
4. Microtask Queue: Queues up microtasks (e.g., resolved Promises), which are
executed before callbacks.
5. Event Loop: Continuously checks the call stack, and when it’s empty, it pulls
tasks from the callback queue or microtask queue.
Summary:
• The event loop enables JavaScript to handle asynchronous tasks efficiently in a
non-blocking manner.
• It continuously checks the call stack and moves tasks from the callback or
microtask queue into the stack once the stack is empty.
• Microtasks (e.g., Promises) are prioritized over regular callbacks (e.g.,
setTimeout).
 • By understanding the event loop, you can better predict how JavaScript executes
asynchronous code, which is crucial for writing efficient, non-blocking
applications.
What is the purpose of the strict mode in JavaScript?
Strict mode in JavaScript is a way to opt into a more restricted variant of the language. It
helps you write cleaner and more secure code by:
Catching Errors:
• Eliminates silent errors:
Strict mode converts some silent errors into thrown errors, making them easier to
identify and fix. For example, assigning a value to a non-writable property or using
undeclared variables will throw an error in strict mode.
• Prevents accidental globals:
In normal JavaScript, mistyping a variable name can create a new global variable. Strict
mode prevents this, helping you avoid accidental global pollution.
Improving Security:
• Disallows certain features:
Strict mode prohibits some potentially dangerous features that can lead to security
vulnerabilities. For example, it disallows the with statement and the eval function in
certain contexts.
• Enforces stricter syntax:
Strict mode enforces stricter syntax rules, making it harder to write code that could be
exploited.
Optimizing Performance:
• Enables optimizations: Strict mode can sometimes make your code run faster
because it allows JavaScript engines to make more optimizations.
How to Use Strict Mode:
• Function Scope: To enable strict mode for a specific function, add the following
line at the beginning of the function body:
How do you manage memory in JavaScript?
JavaScript manages memory automatically through a process called garbage
collection. This means developers don't need to manually allocate or deallocate
memory like in languages like C++. Here's a breakdown of how it works:
Memory Allocation:
• When you create variables, objects, or functions in JavaScript, the engine
automatically allocates the necessary memory in the heap.
Garbage Collection:
• The JavaScript engine periodically runs a garbage collector to identify and
reclaim memory that is no longer reachable.
• The most common garbage collection algorithm used in JavaScript is the mark-
and-sweep algorithm:
o Mark Phase: The garbage collector identifies all reachable objects by
traversing the object graph starting from the root (global object).
o Sweep Phase: The garbage collector reclaims memory from objects that
were not marked as reachable.
What Developers Can Do:
• Minimize Global Variables:
Global variables remain in memory throughout the lifetime of the application. Use
them sparingly.
• Avoid Memory Leaks:
Memory leaks occur when objects are no longer needed but are still reachable by the
garbage collector. Common causes include:
o Unintentional Global Variables: Avoid accidentally creating global
variables.
o Circular References: When two or more objects reference each other,
creating a cycle, they cannot be garbage collected.
o Detached DOM Nodes: If you remove a DOM element, ensure to remove
any event listeners attached to it.
• Use Tools:
o Chrome DevTools: The Memory panel in Chrome DevTools allows you to
take memory snapshots and analyze memory usage.
o Node.js Heap Snapshots: Node.js provides similar functionality for
analyzing memory usage in server-side applications.
What are generators in JavaScript, and how do they work?
Generators in JavaScript are functions that can be paused and resumed, allowing you
to produce a sequence of values on demand. They're a powerful tool for working with
iterators and handling asynchronous operations.
How they work:
• Syntax: Generator functions are defined using the function* syntax and use
the yield keyword to pause execution and return a value.

Generator Objects: Calling a generator function doesn't execute the function

immediately. Instead, it returns a generator object, which is an iterator.
Iterating over the Generator: You can iterate over the generator object using
the next() method. Each call to next() resumes the generator function until the
next yield statement is reached.

Benefits of Generators:
• Lazy Evaluation: Generators only produce values when they're requested, making
them memory-efficient for large data sets.
• Improved Control Flow: They allow you to write asynchronous code that looks
synchronous, making it easier to read and understand.
• Iterators Made Easy: Generators provide a simple way to create custom iterators.
Common Use Cases:
• Infinite Sequences:
You can create generators that produce an infinite sequence of values, like Fibonacci
numbers.
• Asynchronous Operations:
Generators can be used to simplify asynchronous code, especially when combined
with promises or the async/await syntax.
• Data Processing Pipelines:
They can be used to create data processing pipelines where each step can be paused
and resumed as needed.

Explain the concept of Promise.all() and Promise.race().

Promise.all() and Promise.race() are JavaScript methods that work with promises,
which are used to handle asynchronous operations:
• Promise.all
Waits for all promises in an iterable to settle, and returns a single promise with an array
of results. It's useful when all promises need to be successful before proceeding. If any
promise is rejected, the entire Promise.all() is rejected.
• Promise.race
Returns the state of the first promise to resolve or reject in an iterable. It's useful when
you want to respond to the first promise to complete, regardless of whether it succeeds
or fails. This can be used for scenarios like timeout mechanisms.

Explain the concept of currying in JavaScript. Can you provide an example

Currying is a functional programming technique in JavaScript where a function with
multiple arguments is transformed into a sequence of functions, each taking a single
argument. Instead of calling a function with all the arguments at once, currying allows
you to call the function in stages by passing one argument at a time.
The key idea is that the curried function returns a new function for each argument, until
all arguments have been provided, and then the original function is executed with all
the collected arguments.
Example
Here's an example of currying:
Benefits of Currying
1. Partial Application: You can fix a few arguments and reuse the function with
different values later.

1. Improved Readability and Reusability: It allows functions to be reused with

different argument sets, promoting cleaner and more modular code.
Currying is especially useful in situations where you may not have all the arguments
available at once and want to create reusable, partially-applied functions.
How does JavaScript handle scope and hoisting
In JavaScript, scope and hoisting are key concepts that influence how variables and
functions are accessed and used within code. Understanding these concepts is crucial
for writing efficient and bug-free code.
1. Scope
Scope refers to the accessibility of variables and functions in different parts of the
code. JavaScript uses two types of scope:
 • Global Scope: Variables declared outside of any function or block have global
scope, meaning they can be accessed from anywhere in the program.

Local Scope: Variables declared inside a function (using var, let, or const) are local to
that function and cannot be accessed outside of it.
Block Scope: ES6 introduced block-scoped variables using let and const. Variables
defined with let or const are scoped to the block in which they are declared (e.g., within
{ }).

2. Hoisting
Hoisting is JavaScript's default behavior of moving declarations to the top of their
containing scope before the code is executed. This applies to both variables and
functions, but it works differently for each.
Hoisting Variables
• Variables declared using var are hoisted to the top of their scope but not
initialized until the line of code where they are assigned a value.
 The first console.log prints undefined because the declaration of hoistedVar is
hoisted, but the initialization happens at the line where the assignment occurs. This is
known as undefined hoisting.
Variables declared with let and const are also hoisted, but they are placed in a
"temporal dead zone" (TDZ), which means they cannot be accessed before the line of
initialization.

Hoisting Functions
• Function declarations are fully hoisted, meaning both the declaration and
definition are moved to the top of the scope. This allows you to call the function
before its declaration in the code.

• Function expressions (functions assigned to variables) are hoisted similarly to

variables. Only the variable declaration is hoisted, but the function is not
initialized until the assignment.
Summary
• Scope: Defines where variables and functions are accessible. JavaScript has
global, local (function), and block scope.
• Hoisting: Moves declarations (but not initializations) to the top of the scope.
Functions are fully hoisted, while variables declared with var are hoisted but
initialized as undefined. let and const variables are hoisted but are placed in the
TDZ.
Understanding how scope and hoisting work helps prevent common errors related to
variable visibility and function availability.
How do you handle errors in JavaScript using try...catch?
In JavaScript, errors can be handled using the try...catch statement, which allows you
to handle exceptions (errors) that occur during the execution of your code. By wrapping
your code in a try block, you can "catch" and handle any errors in the catch block,
preventing the script from crashing and allowing for better error management.

Components of try...catch
1. try block: Contains code that you want to execute, which may throw an error. If
an error occurs inside this block, the code execution immediately stops, and
control is passed to the catch block.
2. catch block: Handles any error thrown in the try block. It receives the error
object, which contains information about the error, including its message, name,
and stack trace.
3. finally block (optional): This block is always executed after the try and catch
blocks, regardless of whether an error was thrown or not. It’s useful for cleanup
tasks (e.g., closing a file or releasing resources).
In this example:
• The try block contains a call to a function that doesn't exist, which will throw a
ReferenceError.
• The catch block handles the error by logging a custom message and the error's
message to the console.
• The finally block executes regardless of whether an error occurred, ensuring that
any necessary cleanup or final actions take place.
How do you create and manage objects in JavaScript?
In JavaScript, objects are a fundamental data structure used to store collections of key-
value pairs. Keys are usually strings (or symbols), while values can be any data type,
including other objects, functions, or arrays. JavaScript provides multiple ways to
create and manage objects.
1. Object Literals
An object literal is the simplest and most common way to create objects in JavaScript.
Using the Object Constructor
You can also create objects using the Object constructor, although this is less
common.

3. Using a Constructor Function

Before ES6 classes were introduced, constructor functions were the primary way to
create objects that share properties and methods.

Difference Between null and undefined in JavaScript

null: Represents the intentional absence of any object value. It's a value that must be
assigned explicitly to indicate "no value" or "empty."
undefined: Represents the absence of a value or an uninitialized variable. A variable
that has been declared but not assigned a value will be undefined.

Key differences:
• undefined is the default value for uninitialized variables, while null is used to
explicitly set a variable to "no value."
• typeof null returns 'object', while typeof undefined returns 'undefined'.

How to Check if a Variable Is an Array in JavaScript

You can check if a variable is an array using Array.isArray() method.
Truthy and Falsy Values in JavaScript
In JavaScript, a value is considered truthy if it evaluates to true in a boolean context,
and falsy if it evaluates to false. These values are important in conditions (if, while,
etc.).
Falsy values in JavaScript are:
• false
• 0
• "" (empty string)
• null
• undefined
• NaN (Not-a-Number)
Any value not on this list is considered truthy.

How to Convert a String to a Number in JavaScript

There are several ways to convert a string to a number:
1. Using Number():

Using parseInt() or parseFloat():

• parseInt() is for converting to integers.
 • parseFloat() is for converting to floating-point numbers

What Are Template Literals in JavaScript and How Do They Differ from Regular
Strings?
Template literals are introduced in ES6 and provide an enhanced way to work with
strings. They are enclosed in backticks (`) instead of quotes (' or "), and they allow for:
• String Interpolation: You can embed expressions directly in the string using
${expression}.
• Multi-line strings: Template literals allow you to create strings that span multiple
lines without using escape characters.
• Tagged template literals: Allow custom processing of template literals using a
function.
Differences from regular strings:
• Regular strings are enclosed in single or double quotes, while template literals
use backticks.
• Regular strings require concatenation (+) to combine variables and strings,
whereas template literals use ${} for interpolation.
Different Ways to Iterate Over an Array in JavaScript
JavaScript provides several ways to iterate over arrays, each suited for different use
cases. Here are some common methods:
How to Clone an Object in JavaScript
Cloning an object means creating a copy of the original object. There are different
methods for cloning objects, each with its pros and cons.
1. Shallow Clone Using Object Spread (...)
This creates a shallow copy of the object, meaning it only copies the immediate
properties and not nested objects.

2. Shallow Clone Using Object.assign()

This also creates a shallow copy.

3. Deep Clone Using JSON.stringify() and JSON.parse()

This method can create a deep clone (copy nested objects), but it only works for JSON-
safe objects (i.e., objects without functions, undefined, or special types like Date).

4. Deep Clone Using a Recursive Function

To fully deep clone an object, including nested objects, you can use a recursive
function
What is a First-Class Function in JavaScript?
In JavaScript, first-class functions are functions that are treated like any other variable.
This means you can:
• Assign functions to variables.
• Pass functions as arguments to other functions.
• Return functions from other functions.
How to Implement Function Overloading in JavaScript
JavaScript doesn’t support function overloading directly (where multiple functions have
the same name but different parameter types or counts, as in other languages).
However, you can simulate it by using conditional logic inside a function to check the
types or number of arguments passed.
Example:
Difference Between a Function Declaration and a Function Expression
Function Declaration: A function declared using the function keyword with a name. It is
hoisted, meaning you can call the function before it’s defined in the code.

Function Expression: A function defined as part of an expression, such as assigning it

to a variable. It is not hoisted, meaning it can only be called after it is defined.

Key differences:
• Hoisting: Function declarations are hoisted, but function expressions are not.
• Naming: Function declarations must have a name, while function expressions
can be anonymous.
How Do Arrow Functions Differ from Regular Functions in JavaScript?
Arrow functions (=>) were introduced in ES6 and have a more concise syntax than
regular functions. However, there are some important differences:
1. this Context: Arrow functions do not have their own this. They inherit this from
their surrounding scope (lexical this). Regular functions have their own this,
which is dynamic and depends on how the function is called.
o Example:
What Are Immediately Invoked Function Expressions (IIFEs), and Why Are They
Used?
An Immediately Invoked Function Expression (IIFE) is a function that is executed right
after it is defined. It is often used to create a local scope to avoid polluting the global
namespace or to isolate variables.

Why Use IIFE:

1. Avoid global variable pollution: Variables inside the IIFE are not accessible from
the global scope.
2. Data encapsulation: IIFEs allow you to create private variables and functions.

3. Module pattern: Before ES6 modules, IIFEs were commonly used to simulate
modules in JavaScript.
How to Implement a Callback Function in JavaScript
A callback function is a function that is passed as an argument to another function and
is invoked after some operation or event. Callback functions are commonly used in
asynchronous programming (e.g., handling events, making API calls, etc.).
Example of a Callback Function:

In the example above, fetchData simulates fetching data asynchronously using

setTimeout, and once the data is fetched, it invokes the processData function, which is
the callback.
Debouncing and Throttling in JavaScript
Both debouncing and throttling are techniques used to limit the rate at which a function
is invoked. These are particularly useful when dealing with events like resizing or
scrolling that may fire frequently, to improve performance and avoid unnecessary
computations.
1. Debouncing
Debouncing ensures that a function is only executed after a certain delay and resets
the delay each time the event is triggered. It's useful when you want to delay the
execution until a user stops triggering the event.
• Use case: Validating a form field after the user stops typing or resizing the
window after the user stops resizing.
Debouncing Example:
In this example, the handleResize function is only executed 300ms after the user stops
resizing the window.
2. Throttling
Throttling ensures that a function is executed at regular intervals (e.g., once every X
milliseconds), regardless of how many times the event is triggered within that time
frame.
• Use case: Handling scroll events or button clicks that may be triggered
continuously, but only want to execute the function periodically.
Throttling Example:
In this example, handleScroll will only be executed once every 500ms, even if the user
continues scrolling.
Key Differences Between Debouncing and Throttling:
• Debouncing: The function is called after a certain delay, and if the event is
triggered again, the delay restarts. It's useful when you want the function to
execute only after the event stops.
• Throttling: The function is called at regular intervals regardless of how many
times the event is triggered within that time frame. It's useful when you want to
limit the rate of function execution over time.
Example Use Cases:
• Debouncing: Search input autocomplete, window resizing.
• Throttling: Scroll events, resizing events, click events.
What Are Global Variables, and How Can They Lead to Issues in JavaScript?
Global variables are variables that are declared outside of any function or block and are
accessible throughout the entire JavaScript program, including from within functions or
blocks. In JavaScript, if you declare a variable without the var, let, or const keywords, it
automatically becomes a global variable.
Example of a Global Variable:

Issues with Global Variables:

1. Name Collisions: Since global variables are accessible from anywhere, different
parts of the program might unintentionally overwrite or clash with existing global
variables, leading to unexpected behavior.

Difficulty in Debugging: Global variables can make it difficult to track where and when
they are being modified, especially in large codebases, making debugging challenging.
Memory Usage: Global variables persist throughout the lifetime of the application
and may consume memory unnecessarily if not managed properly, potentially leading
to memory leaks.
Unintended Side Effects: Since global variables are accessible anywhere, changes to
them can cause unintended side effects across different parts of the program.
 Concurrency Issues: In environments like browsers, where multiple scripts can be
running, global variables can lead to concurrency issues, where different scripts
unintentionally modify the same global variable.
What is the Temporal Dead Zone in JavaScript?
The Temporal Dead Zone (TDZ) is a behavior in JavaScript that occurs with variables
declared using let and const. It refers to the time between the entering of a block and
the point where the variable is declared and initialized. During this period, if you try to
access the variable, you'll get a ReferenceError.
In simple terms, the TDZ exists between the start of a block and the moment a variable
is initialized. While the variable is hoisted (i.e., known to exist), it is not yet initialized,
and any attempt to access it will result in an error.
Example of Temporal Dead Zone:

In the example above, myVar is hoisted but in the Temporal Dead Zone until the let
declaration is reached. If you try to access the variable before its declaration, it throws
a ReferenceError.
Key Points:
• Variables declared with let and const are hoisted but not initialized until their
declaration.
• Accessing the variable before its initialization results in a ReferenceError.
• The TDZ prevents let and const variables from being accessed before they are
explicitly declared, ensuring safer code.
What is Lexical Scoping in JavaScript, and How Does it Differ from Dynamic
Scoping?
Lexical Scoping (Static Scoping)
In lexical scoping, the scope of a variable is determined by its position in the source
code at the time of writing, not by how the code is executed or called. In JavaScript,
functions are lexically scoped, meaning they remember the scope in which they were
defined, even if they are executed outside that scope later on.
Lexical scoping means that a function’s scope (or environment) is determined by its
physical location in the code, not by where or how it is called.
Example of Lexical Scoping:

In the example above, the function inner() has access to the variable outerVar because
it is defined inside the scope of the outer() function. Even if inner() is executed later, it
retains access to outerVar due to lexical scoping.
Dynamic Scoping
In dynamic scoping, a function's scope is determined by the context of the function
call, not by where the function is defined. Dynamic scoping is based on the call stack,
meaning it looks for variable declarations in the calling function's scope.
However, JavaScript does not support dynamic scoping. Some other languages, like
Perl, support dynamic scoping, but JavaScript relies on lexical scoping.
How do you create an array in JavaScript?
How Do You Create an Array in JavaScript?
You can create an array using square brackets [].
Example:

Difference Between an Array and an Object

• Array: Ordered list of items, accessible by index. Useful for lists and collections.
• Object: Collection of key-value pairs, accessible by key. Useful for storing data
with named properties.
Example:

How Do You Access Elements in an Array?

Use the index (position) of the item, starting from 0.
How Do You Add an Element to the Beginning of an Array? How About the End?
• Beginning: Use unshift()
• End: Use push()
Examples:

How Do You Remove an Element from the Beginning of an Array? How About the
End?
• Beginning: Use shift()
• End: Use pop()
Examples:

Difference Between push() and unshift() Methods in Arrays

• push(): Adds an element to the end of the array.
• unshift(): Adds an element to the beginning of the array.
Examples:
How Do You Find the Length of an Array?
Use the .length property.
Example:

How Do You Iterate Over an Array in JavaScript?

You can use loops like for or array methods like .forEach().
Example with .forEach():

Purpose of the map() Method in JavaScript Arrays

The map() method creates a new array with the results of calling a function on every
element of the original array.
Example:
How Does the filter() Method Work in JavaScript Arrays?
The filter() method creates a new array with all elements that pass a test provided by a
function.
Example:

Difference Between forEach() and map() Methods

• forEach(): Executes a function on each element of the array but does not create a
new array. It's used for performing side effects.
Example:

map(): Executes a function on each element of the array and creates a new array with
the results. It’s used for transforming data.
Example:
How Do You Sort an Array in JavaScript?
Use the sort() method. It sorts the elements of an array in place.
Example:

Find an Element in an Array Using the find() Method

find() returns the first element that satisfies the provided testing function.

Example:

Purpose of the reduce() Method in Arrays

reduce() applies a function to each element of the array, accumulating the result into a
single value.
Example:

Merge Two or More Arrays in JavaScript

Use the concat() method or spread syntax.
Example with concat():

Check if an Array Includes a Certain Value

Use the includes() method.
Example:

Difference Between splice() and slice() Methods

• splice(): Changes the contents of an array by removing or adding elements.
Example:

slice(): Returns a new array with a portion of the original array, without modifying the
original array.
Remove Duplicates from an Array
Use a Set or filter() with indexOf().
Example with Set:

Reverse an Array in JavaScript

Use the reverse() method.
Example:

Flatten a Nested Array in JavaScript

Use the flat() method to flatten arrays up to a specified depth.
Example:
How Do You Create an Object in JavaScript?
You can create an object using curly braces {}.
Example:

Difference Between Dot Notation and Bracket Notation

• Dot Notation: Access properties using a dot (.). Suitable for properties with
simple names.
Example:

Bracket Notation: Access properties using square brackets ([]). Useful for properties
with dynamic names or special characters

How Do You Add or Update a Property in an Object?

Use dot notation or bracket notation to add or update properties.
How Do You Delete a Property from an Object?
Use the delete keyword.
Example:

How Do You Check if an Object Has a Specific Property?

Use the in operator or hasOwnProperty() method.
Example with in operator:
How Do You Iterate Over the Properties of an Object?
You can use for...in loop or Object.keys().
Example with for...in loop:

What Is the Object.keys() Method, and How Does It Work?

Object.keys() returns an array of an object's own enumerable property names (keys).
Example:
How Do You Use Object.values() in JavaScript?
Object.values() returns an array of an object's own enumerable property values.
Example:

How Does the Object.entries() Method Work?

Object.entries() returns an array of an object's own enumerable [key, value] pairs.
Example:

What Is the Purpose of the hasOwnProperty() Method?

hasOwnProperty() checks if an object has a specific property as its own property (not
inherited from its prototype).
Example:

How Do You Clone or Copy an Object in JavaScript?

You can create a shallow copy of an object using spread syntax (...) or Object.assign().
For a deep copy, use structuredClone() or libraries like Lodash.
Shallow Copy Examples:
Difference Between Shallow Copy and Deep Copy
• Shallow Copy: Copies the top-level properties. Nested objects or arrays are
shared between the original and the copy.

Deep Copy: Creates a copy of the entire object, including nested objects or arrays.
Changes to the copy don’t affect the original.
How Do You Merge Two or More Objects in JavaScript?
Use spread syntax or Object.assign() to combine objects.
Examples:
How Do You Create a Method Inside an Object?
Define functions as properties within the object.
Example:

How Do You Handle Nested Objects in JavaScript?

Access or modify nested properties using dot or bracket notation.
Example:
What Is the this Keyword, and How Does It Work Inside an Object Method?
this refers to the object that owns the method. It allows you to access other properties
and methods of the same object.
Example:

How Do You Compare Two Objects in JavaScript to Check If They Are Equal?
Objects are compared by reference, not by value. Use deep comparison to check for
equality.
Example:

How Do You Destructure an Object in JavaScript?

Destructuring allows you to extract values from objects into variables.
Example:
How Do You Freeze an Object So That Its Properties Cannot Be Modified?
Use Object.freeze() to make an object immutable.
Example:

What Is the Purpose of Object.assign() in JavaScript?

Object.assign() copies properties from one or more source objects to a target object.
It’s used for merging objects or cloning.

How Do You Convert an Object Into an Array in JavaScript?

You can convert an object into an array using Object.keys(), Object.values(), or
Object.entries().
Examples:
• Keys (property names)
How Do You Handle Undefined Properties in Objects?
Use the in operator or optional chaining to handle undefined properties.
Examples:
• Check if property exists:
How Does JavaScript Handle Inheritance in Objects?
JavaScript uses prototype-based inheritance. Objects can inherit properties and
methods from other objects through their prototype.
Example:

What Are Getters and Setters in JavaScript Objects?

Getters and setters allow you to define special methods to get and set property values.
Example:

How Do You Use the Spread Operator with Objects?

The spread operator (...) allows you to copy or merge objects.
Examples:
How Do You Check If an Object Is Empty?
Use Object.keys() to check if the object has any properties.
Example:

What Are Prototypes in JavaScript, and How Do They Relate to Objects?

Prototypes are objects from which other objects inherit properties and methods. Each
object has a prototype object.
Example:

How Do You Create a Constructor Function to Generate Objects?

Constructor functions create objects with specific properties and methods.
Example:
How Do You Handle Circular References in Objects?
Circular references (where objects refer to each other) can cause issues with
serialization. Use JSON.stringify with a replacer function to handle them.
Example:

How Do You Serialize an Object into a JSON String and Parse It Back into an
Object?
Use JSON.stringify() to serialize and JSON.parse() to parse.
Examples: