JavaScript and React.js Common Interview Questions

Module 1: Fundamentals of Programming & Aptitude

Basic Questions:

1. What are variables, and why are they important in programming?
2. Explain the difference between while and for loops.
3. What is a subarray? Provide an example.
4. Define time complexity and explain Big-O notation.
5. What is a constant, and how does it differ from a variable?
6. Explain the difference between pass-by-value and pass-by-reference with examples.
7. How do you calculate the time complexity of a loop?

Scenario-Based Questions:

1. How would you optimize a nested loop if you encounter performance issues?
2. Describe a situation where you would choose recursion over iteration.
3. Given a sorted array, how would you efficiently find if a number exists in it?
4. If you need to process a large array with millions of elements, how would you minimize memory usage?
5. Given a number, determine if it's a prime number without using a library function.
6. You need to design an algorithm to find the second-largest element in an array. How would you approach this?

Coding Challenges:

1. Write a program to find the maximum sum of a subarray using the Kadane’s algorithm.
2. Given two numbers, write a function to swap their values without using a third variable.
3. Implement a function to calculate the factorial of a number using both recursion and iteration.
4. Write a program to check if a given string is a palindrome.
5. Implement a function to rotate an array to the right by k positions.
6. Write a function to find the missing number in a given array of integers from 1 to n.

Module 2: Elementary Data Structures & Algorithms

** Basic Questions:**

1. What is the difference between an Array and an ArrayList?
2. Explain how a StringBuilder improves performance over regular string concatenation.
3. What are the advantages of using a switch statement over if-else?
4. What is the difference between an Array and a Linked List?
5. Explain the concept of sorting. Name a few common sorting algorithms.
6. What are the advantages of using a StringBuffer over String in Java?

** Scenario-Based Questions:**

1. Given a list of names, how would you sort them alphabetically using your own algorithm?
2. If you have a large text file, how would you efficiently count the occurrences of each word?
3. Discuss how to handle memory when dealing with dynamically growing ArrayLists.
4. How would you remove duplicate elements from an unsorted array?
5. Given two sorted arrays, write a function to merge them into a single sorted array.
6. If you are given a sorted array rotated at an unknown pivot, how would you find an element efficiently?

Coding Challenges:

1. Write a program to reverse a string without using in-built functions.
2. Implement bubble sort to sort an array of integers.
3. Given a paragraph, write a function to find the most frequently occurring word.
4. Implement a function to check if two strings are anagrams of each other.
5. Write a program to find the first non-repeating character in a string.
6. Develop a function to implement insertion sort on an array of integers.

Module 3: Intro to HTML & CSS

Basic Questions:

1. What is the difference between block-level and inline elements in HTML?
2. Explain the Box Model in CSS.
3. What is the purpose of using Bootstrap in web development?
4. What are semantic HTML elements, and why are they important?
5. How does the position property work in CSS? Explain static, relative, absolute, and fixed.
6. What is the difference between id and class in HTML/CSS?

Scenario-Based Questions:

1. How would you design a responsive layout for a webpage?
2. Given a form with several inputs, how would you style it for usability and accessibility?
3. Discuss how you would debug a CSS rule that is not applying as expected.
4. How would you create a responsive navigation bar using HTML and CSS?
5. Describe a method to vertically and horizontally center a div within a parent element.
6. You need to style a table so that alternate rows have different colors. How would you do this in CSS?

Coding Challenges:

1. Create a simple webpage with a navigation bar, content section, and footer using HTML and CSS.
2. Build a form with input validation using HTML attributes and CSS styles.
   1. Design a responsive grid layout using Flexbox or CSS Grid.
3. Create a webpage with a contact form that uses proper HTML5 validation.
4. Design a simple blog page with a header, content section, and footer using HTML and CSS.
5. Build a responsive grid layout with three columns that stack vertically on small screens.

Module 4: Basic Javascript

Basic Questions:

1. What are the differences between var, let, and const in JavaScript?
2. Explain how JavaScript handles asynchronous operations.
3. What is the Document Object Model (DOM)?
4. What are JavaScript data types? Provide examples of each.
5. Explain the concept of event bubbling and how to prevent it.
6. What is the difference between undefined and null in JavaScript? Scenario-Based Questions:
7. How would you handle a situation where a button click triggers multiple events?
8. Discuss how you would fetch data from an API and display it on a webpage.
9. Explain how you would manage errors in asynchronous code.
10. How would you implement a function to validate a password that meets specific criteria (length, special characters, etc.)?
11. Discuss how you would handle a scenario where an API call fails.
12. How would you create a dropdown menu that opens and closes on click using JavaScript?

Coding Challenges:

1. Write a program to count the number of vowels in a given string.
2. Implement a function to flatten a nested array of integers.
3. Build a simple to-do list application with add and delete functionality.
4. Write a function to remove all duplicates from an array of integers.
5. Create a simple stopwatch application using JavaScript.
6. Implement a function to find the longest word in a given sentence.

Module 5: Advanced JavaScript

** Basic Questions:**

1. What are closures in JavaScript? Provide an example.
2. Explain the concept of prototypal inheritance.
3. What is the difference between synchronous and asynchronous code?
4. What are Map and Set objects in JavaScript, and how are they different from plain objects and arrays?
5. Explain the this keyword in JavaScript. How does it behave in different contexts?
6. What is the difference between apply(), call(), and bind() methods?

Scenario-Based Questions:

1. How would you handle a scenario where multiple APIs need to be called in sequence?
2. Discuss how you would optimize a large JavaScript codebase for performance.
3. Explain how you would use localStorage or sessionStorage to manage user data.
4. How would you implement a function to throttle or debounce frequent API calls ina web application?
5. You are tasked with designing a reusable dropdown component. How would you use ES6 features to implement it?
6. Explain how you would handle data fetched from an API where one call depends on the result of another.

Coding Challenges:

1. Write a function to deep clone a JavaScript object.
2. Implement a promise-based function to simulate an API call.
3. Build a simple weather app using data from a public API.
4. Write a function that flattens a deeply nested array of integers.
5. Implement a basic pub-sub (publish-subscribe) system in JavaScript.
6. Create a function that implements a simple version of the Promise.all method.

Module 6: React & Redux

Basic Questions:

1. What is the difference between state and props in React?
2. Explain the Redux data flow.
3. How do you handle forms in React?
4. What is JSX, and how is it different from regular JavaScript?
5. Explain the lifecycle methods of a React class component.
6. How do you manage side effects in a React application?

Scenario-Based Questions:

1. How would you optimize a React application with a slow rendering component?
2. Discuss how you would implement authentication in a React-Redux app.
3. How would you manage global state in a large React application?
4. How would you optimize a React component that renders a large list of items?
5. Discuss how you would handle user authentication in a React-Redux application.
6. How would you refactor a component with excessive state and props into a more manageable structure?

Coding Challenges:

1. Build a simple counter app with increment and decrement buttons using React.
2. Implement a todo list with Redux for state management.
3. Create a React app with routing for at least three pages.
4. Create a React app to display a list of items fetched from an API.
5. Implement a counter component with increment, decrement, and reset functionality using React and Redux.
6. Build a simple movie search app that fetches results from an API based on user input.

Module 7: Backend Development in Node.js

Basic Questions:

1. What are the differences between GET and POST requests?
2. Explain middleware in Node.js. 3.What is MongoDB, and why is it commonly used in web development?
3. What is the difference between blocking and non-blocking code in Node.js?
4. Explain the concept of middleware in Express.js.
5. What is a REST API? How is it different from SOAP?

Scenario-Based Questions:

1. How would you handle errors in a REST API?
2. Discuss how you would implement pagination for a database query.
3. Explain how you would design a user authentication system with JWT.
4. How would you secure a REST API to prevent unauthorized access?
5. You need to handle file uploads in a Node.js application. How would you approach this?
6. Explain how you would design an API to fetch paginated data from a database.

Coding Challenges:

1. Build a REST API for managing a to-do list.
2. Write a Node.js script to read and write data to a MongoDB collection.
3. Implement a middleware to log request details for an Express server.
4. Build an Express API with CRUD operations for managing a list of tasks.
5. Implement a middleware to log all incoming requests with timestamps.
6. Create an API endpoint that accepts a query parameter and returns filtered data from a MongoDB collection.

Module 8: Capstone Project

Basic Questions:

1. What are the key considerations when building a full-stack application?
2. Explain how you would deploy a web application.
3. What are some common challenges in integrating frontend and backend?
4. What challenges do you anticipate when integrating frontend and backend systems?
5. How do you decide which database (SQL or NoSQL) to use for a project?
6. What tools or frameworks would you use to deploy a full-stack application?

Scenario-Based Questions:

1. How would you debug an issue where a front-end API call is returning an unexpected error?
2. Discuss how you would implement real-time notifications in a full-stack app.
3. Explain how you would scale your application to handle increased traffic.
4. How would you debug a cross-origin resource sharing (CORS) issue in your application?
5. Discuss how you would handle real-time updates in a collaborative application.
6. Explain how you would manage environment variables for different deployment stages (development, staging, production).

Coding Challenges:

1. Build a full-stack e-commerce app with product listing, cart, and checkout functionality.
2. Create a blog platform with user authentication, post creation, and commenting features.
3. Develop a task management app with features like user roles, task assignment, and progress tracking.
4. Create a blogging platform where users can create, edit, delete, and view posts. Include a backend for storing posts and a frontend for displaying them.
5. Build a basic e-commerce site with user authentication, product listing, and a shopping cart.
6. Develop a task management application with role-based access and real-time updates using WebSockets.