Question 1

What is a closure in JavaScript and why are closures useful? Can you give an example of a practical use case?

Accepted Answer

## What is a Closure?

A **closure** is a function that has access to variables from its outer (enclosing) function's scope, even after the outer function has finished executing. This happens because JavaScript functions "remember" the environment in which they were created.

## How Closures Work

```javascript
function createCounter() {
  let count = 0;  // This variable is "enclosed" by the inner function

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(count

Question 2

What are generics in TypeScript and why would you use them? Provide an example.

Accepted Answer

## What are Generics?

**Generics** in TypeScript allow you to create reusable components that work with a variety of types while maintaining type safety. Instead of using `any` (which loses type information), generics preserve the relationship between input and output types.

## Basic Syntax

```typescript
// Generic function
function identity<T>(value: T): T {
  return value;
}

// Usage - TypeScript infers the type
const num = identity(42);        // type: number
const str = identity("hello");   // type: string
```

## Why Use Generics?

### 1. Type Safety with Flexibilit

Question 3

How does the useEffect hook work in React? What is the purpose of the dependency array, and what happens when you pass an empty array versus no array at all?

Accepted Answer

## Understanding useEffect

The `useEffect` hook lets you perform side effects in functional components. It combines the functionality of `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` from class components into a single API.

## Basic Syntax

```javascript
useEffect(() => {
  // Side effect code here

  return () => {
    // Cleanup function (optional)
  };
}, [dependencies]);
```

## The Dependency Array

The second argument controls when the effect runs:

### 1. No Array — Runs After Every Render

```javascript
useEffect(() => {
  console.log('

Question 4

What is React.memo and when should you use it? How does it differ from useMemo and useCallback?

Accepted Answer

## React.memo `React.memo` is a higher-order component that memoizes the rendered output of a component. It prevents re-renders when the props have not changed. ```javascript const MyComponent = React.memo(function MyComponent({ name, onClick }) { console.log('Rendering MyComponent'); return ; }); ``` If `name` and `onClick` remain the same between renders, the component will not re-render. ## useMemo `useMemo` memoizes a computed value. It recalculates only when its dependencies change. ```javascript function ExpensiveList({

Question 5

What are the core principles of REST, and how do HTTP methods map to CRUD operations? What makes an API truly RESTful?

Accepted Answer

## REST Principles

REST (Representational State Transfer) is an architectural style for designing networked applications. A truly RESTful API follows these six guiding principles:

### 1. Client-Server Architecture

The client and server are separate entities. The client handles the user interface, while the server manages data storage. This separation allows each to evolve independently.

### 2. Statelessness

Each request from the client must contain all the information needed to process it. The server does not store any client context between requests.

```
# Bad: Server remem

Question 6

Compare REST and GraphQL. What are the main differences, and when would you choose one over the other?

Accepted Answer

## REST Overview

REST uses multiple endpoints, each returning a fixed data structure. The server decides what data to return.

```
GET /users/123
GET /users/123/posts
GET /posts/456/comments
```

Each endpoint returns a predefined response shape.

## GraphQL Overview

GraphQL uses a single endpoint where the client specifies exactly what data it needs.

```graphql
query {
  user(id: "123") {
    name
    email
    posts {
      title
      comments {
        text
      }
    }
  }
}
```

The client gets exactly the requested fields—nothing more, nothing less.

Question 7

What is the difference between horizontal scaling and vertical scaling? When would you choose one over the other in a full-stack application?

Accepted Answer

## Overview

Scaling is essential for handling increased traffic and workload in web applications. There are two primary approaches, each with distinct trade-offs.

## Vertical Scaling (Scale Up)

Vertical scaling means adding more resources to your existing server, such as more CPU, RAM, or storage capacity.

**Advantages:**
- Simpler to implement. No code changes required.
- Single point of management. Easier to maintain.
- Works well for applications with session state or complex database transactions.

**Disadvantages:**
- Hardware limits exist. You can only add so much to on

Question 8

Explain the concept of caching in web applications. What are the different levels where caching can be implemented, and what are some common caching strategies?

Accepted Answer

## What is Caching?

Caching is a technique for storing frequently accessed data in a fast-access layer, reducing the need to fetch it from slower sources like databases or external APIs. It significantly improves response times and reduces server load.

## Caching Levels in a Full-Stack Application

### 1. Browser Cache (Client-Side)

The browser stores static assets locally using HTTP cache headers.

- **Cache-Control:** Defines how long resources should be cached.
- **ETag:** Validates if the cached version is still fresh.
- **Expires:** Sets an absolute expiration date.

Best

Question 9

What is lazy loading, and how does it improve web application performance? Can you give examples of where you would implement it in a full-stack application?

Accepted Answer

## What is Lazy Loading?

Lazy loading is a design pattern that delays the loading of resources until they are actually needed. Instead of loading everything upfront when the page first loads, resources are fetched on demand, typically when they enter the viewport or when a user interacts with a specific feature.

## How It Improves Performance

**Faster Initial Page Load:**
By loading only essential content first, the initial page renders much faster. Users see meaningful content sooner, improving perceived performance.

**Reduced Bandwidth Usage:**
Users only download resources the

Question 10

What are the main differences between client-side rendering and server-side rendering? What are the performance implications of each approach?

Accepted Answer

## Client-Side Rendering (CSR)

With CSR, the server sends a minimal HTML shell with JavaScript bundles. The browser downloads, parses, and executes JavaScript to render the content.

### How It Works

1. Browser requests the page.
2. Server returns a nearly empty HTML file with script tags.
3. Browser downloads JavaScript bundles.
4. JavaScript executes and fetches data from APIs.
5. Content is rendered in the browser.

### Performance Characteristics

**Advantages:**
- Rich, interactive user experience after initial load.
- Smooth navigation between pages. No full page reload

Full-Stack Developer

Topics

JavaScript/TypeScript

React/Vue/Angular

API Design (REST/GraphQL)

System Design

Performance Optimization

Mock Interview

Quick Stats