JavaScript & WebSocket – Properly Framed

Interview Questions with Answers

1) Can you explain how asynchronous programming works in

JavaScript, including the Event Loop and how it differs from
synchronous execution?
Asynchronous programming in JavaScript allows long-running operations (such as API calls, datab
queries, or timers) to execute without blocking the main thread.

JavaScript is single-threaded, meaning it has one call stack. When synchronous code runs, each
blocks the next until it finishes.

In asynchronous execution: - The call stack executes synchronous code first. - Async operatio
setTimeout or fetch) are delegated to Web APIs. - Once completed, callbacks are pushed into
queue (or microtask queue for Promises). - The Event Loop continuously checks whether the c
empty. - If empty, it pushes queued callbacks into the stack.

Difference: - Synchronous → Blocking execution. - Asynchronous → Non-blocking execution using

Loop.

2) How do Promises solve callback hell, and what are the internal
states of a Promise?
Promises improve readability and structure compared to nested callbacks (callback hell).

A Promise has three states: - Pending - Fulfilled - Rejected

Promises allow chaining using .then() and centralized error handling using .catch().

Internally, when a Promise resolves, its callback is placed in the microtask queue, which has hi
than the callback queue.

1
3) How does async/await improve code readability over Promises,
and what happens internally when using async functions?
async/await is syntactic sugar built on top of Promises.

Benefits: - Makes asynchronous code look synchronous. - Easier error handling with try/catch. - A
chaining.

Internally: - An async function always returns a Promise. - await pauses execution inside the as
until the Promise resolves. - It does not block the main thread; it only pauses that function’s execution.

4) How does [Link] work internally, and how is it

different from forEach in terms of return value and immutability?
map(): - Iterates through the array. - Applies a transformation to each element. - Returns a ne
not mutate the original array.

forEach(): - Iterates through the array. - Does not return anything. - Commonly used for side effects.

Key Difference: map is used for transformation. forEach is used for execution.

5) Can you explain how filter works and when you would use it in
a real-world application?
filter(): - Iterates through an array. - Returns a new array containing elements that satisfy a co
not modify the original array.

Real-world usage: - Filtering active users. - Selecting completed tasks. - Extracting items b
permissions.

6) Can you explain reduce with a real-world example and how it

differs from map and filter?
reduce(): - Processes each element. - Accumulates a single result. - Returns one final value.

Syntax: [Link]((accumulator, currentValue) => {}, initialValue)

Real-world examples: - Calculating total price of cart. - Counting frequency of items. - Transform
into an object.

2
Difference: - map → transforms each element. - filter → selects elements. - reduce → aggrega
value.

7) How does an arrow function handle this binding differently

from normal functions, especially inside objects or classes?
Arrow functions do not have their own this. They inherit this from the surrounding lexical scope.

Normal functions: - Have their own this. - Value depends on how the function is called.

Arrow functions: - this is fixed at creation time. - Cannot be used as constructors. - Do not
object.

This makes arrow functions useful for callbacks but not ideal for object methods.

8) Can you explain how the WebSocket handshake works and how
it differs from a normal HTTP request?
WebSocket starts with an HTTP handshake.

Steps: 1. Client sends HTTP request with Upgrade: websocket header. 2. Server responds
101 Switching Protocols. 3. Connection upgrades from HTTP to WebSocket. 4. A persistent fu
duplex connection is established.

Difference from HTTP: - HTTP → Request-response model. - WebSocket → Persistent tw

communication.

9) What are the different WebSocket ready states, and what do

they represent?
WebSocket has four ready states:

0 – CONNECTING → Connection not yet established. 1 – OPEN → Connection established

ready. 2 – CLOSING → Connection is closing. 3 – CLOSED → Connection closed or failed.

These states help manage connection lifecycle.

3
10) When would you prefer WebSocket over HTTP polling or
Server-Sent Events (SSE)?
Use WebSocket when: - Real-time bidirectional communication is needed. - Low latency is req
Continuous updates are frequent.

Examples: - Chat applications - Multiplayer games - Stock market dashboards

Comparison: - HTTP Polling → Client repeatedly requests updates. - SSE → Server to client only.
→ Two-way persistent communication.

11) What are the default ports for WebSocket protocols and why?
• ws:// uses port 80 (same as HTTP).
• wss:// uses port 443 (same as HTTPS).

This ensures compatibility with standard web infrastructure and firewalls.