Web Development Interview Questions and Answers

​

1. Reverse a String in JavaScript

   • Problem: Write a function that reverses a given string.

   • Example:

   function reverseString(str) { return str.split("").reverse().join(""); } console.log(reverseString("hello")); // Output: "olleh"

2. Find the Largest Number in an Array

   • Problem: Write a function that finds the largest number in an array.

   • Example:

   function findMax(arr) { return Math.max(...arr); } console.log(findMax([10, 5, 8, 20])); // Output: 20

3. Remove Duplicates from an Array

   • Problem: Write a function that removes duplicate values from an array.

   • Example:

   function removeDuplicates(arr) { return [...new Set(arr)]; } console.log(removeDuplicates([1, 2, 2, 3, 4, 4])); // Output: [1, 2, 3, 4]

4. Check if a String is a Palindrome

   • Problem: Check if a string is the same when read forwards and backwards.

   • Example:

   function isPalindrome(str) { return str === str.split("").reverse().join(""); } console.log(isPalindrome("racecar")); // Output: true

5. Find the Factorial of a Number

   • Problem: Write a function that calculates the factorial of a number.

   • Example:

   function factorial(n) { return n === 0 ? 1 : n * factorial(n - 1); } console.log(factorial(5)); // Output: 120

6. Fibonacci Sequence (Recursive)

   • Problem: Write a recursive function to find the nth Fibonacci number.

   • Example:

   function fibonacci(n) { return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2); } console.log(fibonacci(6)); // Output: 8

7. Find Prime Numbers in a Given Range

   • Problem: Write a function that checks whether a number is prime.

   • Example:

   function isPrime(n) { if (n < 2) return false; for (let i = 2; i < n; i++) { if (n % i === 0) return false; } return true; } console.log(isPrime(11)); // Output: true

8. Merge Two Sorted Arrays

   • Problem: Merge two sorted arrays into one sorted array.

   • Example:

   function mergeArrays(arr1, arr2) { return [...arr1, ...arr2].sort((a, b) => a - b); } console.log(mergeArrays([1, 3, 5], [2, 4, 6])); // Output: [1, 2, 3, 4, 5, 6]

9. Find the Missing Number in an Array

   • Problem: Find the missing number in a sequence of numbers.

   • Example:

   function findMissingNumber(arr, n) { let total = (n * (n + 1)) / 2; return total - arr.reduce((sum, num) => sum + num, 0); } console.log(findMissingNumber([1, 2, 3, 5], 5)); // Output: 4

10. Find the Intersection of Two Arrays

• Problem: Find the common elements between two arrays.

• Example:

   function intersection(arr1, arr2) { return arr1.filter(num => arr2.includes(num)); } console.log(intersection([1, 2, 3], [2, 3, 4])); // Output: [2, 3]

​

1. Q: What are the advantages and disadvantages of using server-side rendering (SSR) vs. client-side rendering (CSR)?

A:

• Server-Side Rendering (SSR):

  • Advantages:

    • Faster initial page load (content is ready when the page loads).

    • Better for SEO because search engines can easily crawl the fully rendered page.

  • Disadvantages:

    • Higher server load as the server renders the page for each request.

    • Slower interaction after the initial page load compared to CSR.

• Client-Side Rendering (CSR):

  • Advantages:

    • Faster subsequent page loads after the initial one, thanks to cached resources.

    • Offloads rendering to the client, reducing server load.

  • Disadvantages:

    • Slower initial page load (since the JavaScript must be downloaded and executed).

    • Worse SEO unless using techniques like pre-rendering or server-side rendering for specific pages.

2. Q: What is the purpose of Webpack in modern web development?

A: Webpack is a module bundler for JavaScript applications. It takes modules with dependencies and generates static assets representing those modules. Its primary purpose is:

• Bundling: Combines various files (JavaScript, CSS, images, etc.) into one or more bundles to improve load times.

• Code Splitting: Enables splitting the code into smaller files, which can be loaded on demand (lazy loading).

• Optimizing: Minifies and optimizes assets for better performance (e.g., image optimization, CSS/JS minification).

• Development: Provides a fast development server with hot-reloading.

3. Q: Explain the difference between REST and GraphQL. When would you use each?

A:

• REST:

  • Architecture: Based on resources and uses HTTP methods (GET, POST, PUT, DELETE).

  • Pros: Simple, standardized, good for CRUD operations, widely supported.

  • Cons: Over-fetching or under-fetching data is common (i.e., returning more data than needed or less).

• GraphQL:

  • Architecture: Allows clients to request exactly the data they need in a single request.

  • Pros: Efficient data fetching (no over-fetching/under-fetching), better flexibility, supports real-time updates with subscriptions.

  • Cons: More complex to implement, can be overkill for simple apps.

When to use:

• REST is great for simpler, resource-based applications.

• GraphQL is ideal for complex applications with dynamic, interconnected data needs (e.g., social media platforms).

4. Q: What is a CORS error, and how do you resolve it?

A: CORS (Cross-Origin Resource Sharing) errors occur when a web application tries to make a request to a domain other than its own, and the server doesn't allow it. To resolve CORS issues:

• Backend Fix: Ensure the server sends the correct CORS headers (e.g., Access-Control-Allow-Origin).

• Proxying: Use a proxy server to bypass the CORS restriction during development (e.g., in development mode, you might proxy API requests to avoid CORS errors).

• Pre-flight Requests: Ensure that the server responds correctly to OPTIONS requests, which are sent before some types of HTTP requests (like PUT, DELETE, or with non-standard headers).

5. Q: What is a progressive web app (PWA), and what are its key benefits?

A: A Progressive Web App (PWA) is a web application that uses modern web capabilities to deliver an app-like experience. Key features and benefits include:

• Offline Access: PWAs can work offline or with poor network conditions using service workers.

• App-like Experience: PWAs can be installed on a device and run like a native app.

• Push Notifications: They can send notifications, even when the app is not open.

• Performance: PWAs are optimized for fast loading and smooth interaction.

6. Q: How does the virtual DOM in React enhance performance?

A: The virtual DOM is a lightweight in-memory representation of the actual DOM. React uses the virtual DOM to minimize direct manipulation of the real DOM, which is a costly operation. Here's how it improves performance:

• Efficient Updates: React only updates the virtual DOM first, then calculates the minimal set of changes required to update the real DOM, reducing unnecessary re-renders.

• Batching: React can batch updates to reduce the number of times the real DOM is updated, improving performance.

• Reconciliation: React uses an algorithm (Reconciliation) to compare the virtual DOM with the real DOM and apply the most efficient changes.

7. Q: Explain what WebSockets are and how they differ from HTTP.

A: WebSockets provide a full-duplex communication channel over a single, long-lived TCP connection. This allows for real-time, two-way communication between the server and client.

• Difference from HTTP:

  • HTTP: Is a request-response protocol, where the client must make requests, and the server responds.

  • WebSockets: Allow for continuous communication, where both the client and server can send data at any time without needing to establish a new connection for each message.

Use cases: Real-time applications like chat apps, live updates, online games, etc.

8. Q: What are some strategies for improving the performance of a web application?

A: Key performance optimization strategies include:

• Lazy Loading: Load content only when it’s needed (e.g., images, components).

• Code Splitting: Break up JavaScript bundles into smaller pieces, loaded as needed.

• Caching: Implement caching strategies for assets and API calls to reduce redundant requests.

• Minification and Compression: Minify JavaScript, CSS, and HTML files and use gzip compression for faster transfer.

• Image Optimization: Use responsive images and compress them to reduce load times.

9. Q: How do you prevent XSS (Cross-Site Scripting) attacks in web applications?

A: XSS attacks occur when attackers inject malicious scripts into web pages. To prevent XSS:

• Input Sanitization: Always sanitize and escape user inputs to ensure they are treated as data, not executable code.

• Use Content Security Policy (CSP): Define a CSP header to restrict where scripts can be loaded from, mitigating the risk of injected scripts.

• HttpOnly Cookies: Use HttpOnly cookies to prevent JavaScript from accessing sensitive data stored in cookies.

• Escape Dynamic Content: Avoid directly injecting untrusted data into the DOM (e.g., use libraries like React that automatically escape content).

10. Q: What is the difference between SQL and NoSQL databases, and when should each be used?

A:

• SQL (Relational) Databases:

  • Structure: Use structured data in tables with predefined schemas (e.g., MySQL, PostgreSQL).

  • Pros: Strong consistency, ACID transactions, powerful query language (SQL).

  • Use cases: Applications with structured data and complex relationships (e.g., banking systems, inventory management).

• NoSQL Databases:

  • Structure: Use flexible data models like key-value stores, document-based stores, or graph databases (e.g., MongoDB, Redis).

  • Pros: Scalability, flexibility with schema design, better suited for unstructured or semi-structured data.

  • Use cases: Applications with rapidly changing schemas, high scalability needs, and large amounts of unstructured data (e.g., social media, big data applications).

​​​