JavaScript Interview Coding Questions

During my recent interviews for a Senior Frontend Developer role, I was faced with a range of challenging coding questions. These questions tested my knowledge across various areas of frontend development, from problem-solving to algorithmic thinking. Below is a collection of the questions I encountered, which I believe can serve as a great resource for anyone preparing for similar interviews.

1**. Vendor Phone Directory**

Build a simple vendor phone directory that allows users to add vendor details and view them in a table format.

Features to Implement:
- Form validation for required fields.
- Ensure all required fields are filled in before submission.
- Prevent submission if inputs are empty or invalid (e.g., invalid phone numbers or missing vendor names).
- Add vendor details to a table upon successful form submission.
- Display user-friendly error messages for missing or invalid input fields.
- Clear errors when input is corrected.

2. Generate and Sort Subsequences

Given a string, generate all possible non-empty subsequences, sort them in lexicographical order, and return the result.

Input: "abc"
Output: ["a", "ab", "abc", "ac", "b", "bc", "c"]

3. Find Consecutive Triplets with Unique Characters

Write a function that finds the number of consecutive triplets in the given string s where all three characters are unique.

Input: "abcabc"
Output: 4

4. Replace Digits with Pipes

Write a function that replaces each digit in the given string s with that many occurrences of the character '|'.

Input: "1a2b3"
Output: "|a||b|||"

5. Diagonal Zigzag Traversal of a Matrix

Write a function that performs a diagonal zigzag traversal of a matrix in JavaScript.

Input:
matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
Output: [1, 2, 4, 7, 5, 3, 6, 8, 9]

6. Maximum Profit from Stock

Write a JavaScript function to find the maximum profit an investor can make by buying and selling a stock exactly once.

7. Find Common Elements Between Two Arrays

Write a JavaScript function to find the common elements between two given arrays. The function should return an array containing the common elements.

Input: [1, 2, 6, 2], [4, 1, 2, 2]
Output: [2, 2]

8. React Todos App

Create a React-friendly App.js that:
- Fetches all todos from https://jsonplaceholder.typicode.com/todos and logs their titles.
- Includes a function to delete a todo by ID and logs the result.

9. Accordion Component

Implement a simple accordion where:
- All item titles are always visible.
- The first item starts expanded.
- Clicking an item title toggles its state.
- If the 'Allow multiple open' checkbox is checked, multiple items can be expanded.
- If unchecked, expanding a new item collapses the previously open item.

10. Maximum Sum of Non-Adjacent Elements

Given an array of positive numbers, find the maximum sum of a subsequence such that no two elements are adjacent in the array.

11. LRU Cache in JavaScript

Implement a Least Recently Used (LRU) Cache in JavaScript.

12. Binary Tree in JavaScript

Implement a binary tree in JavaScript with basic operations like insertion, traversal, and deletion.

13. Compute Average of an Array of Numbers

Write a function to compute the average of an array of floating-point numbers. Return 0 if the input is not an array.

14. Fence Painting Problem

Given an array of plank heights, find the minimum number of brush strokes needed to paint the fence. (Include JavaScript code and explanation).

Example Input: [1, 2, 6, 2]
Expected Output: 2

15. String Transformation

Create a function that transforms a string like 'abbbccdddeeee' into '1a3b2c3d4e'.
Also explain time and space complexity.

16. Implement a Once Function

Implement a once function that takes another function and returns a new function that can be called only once.

17. Promise with Timeout

Create a function promiseWithTimeout(promise, timeout) that resolves a promise if it completes in time, otherwise rejects.

18. Flatten a Deeply Nested Array

Implement a function that flattens a deeply nested array into a single-level array.

19. Currying Function

Create a curried function curry(fn) so that curry(join)(1)(2)(3) returns '1_2_3'.

20. Sequential Execution of Async Functions

Implement a function that executes an array of async functions sequentially.

21. Parallel Execution of Async Functions

Implement parallel execution of async functions.

22. Error Handling in Sequence Function

Implement an error-handling version of the sequence function using only callbacks.

23. Promise.race Behavior

Demonstrate the behavior of Promise.race with two promises using setTimeout.

24. Hackerrank Alloy Challenge

Calculate the maximum number of alloy units a company can produce given stock, cost, and budget.

25. Server-Side Search for Todos

Fetch todos from an API and implement server-side search instead of client-side filtering.

26. React Timer App

Create a timer app with start/stop functionality and conditional button visibility in React.

27. React Context API

Use React Context API to toggle favorite programming language from a list.

28. Weather Dashboard

Build a React weather dashboard that displays weather information for various cities.

29. React Tic-Tac-Toe Game

Build a React-based Tic-Tac-Toe game.

30. Energy Dashboard (Joy of Energy GitHub - frontend-joyofenergy-reactJS.)

-Implement an Energy Dashboard app with React.

Implement dynamic time range selection for the Energy Dashboard.

How would you debounce updates to avoid frequent re-renders in React?

What happens if readings in your energy dashboard are undefined or empty?

How would you use useMemo to optimize chart rendering in a React application?

Implement feature cards to display cost, consumption, and carbon footprint calculations in JavaScript.

31. Fountain Coverage in a 1D Garden

Given an array representing fountain coverage in a 1D garden, write a function in JavaScript to determine the minimum number of fountains needed to cover the garden.

32. Build a Product List App in React

Build a React app that:
- Fetches products from FakeStoreAPI
- Displays a product list
- Includes cart functionality
- Has a product detail page

33. Reduce Array by Taking Absolute Differences

Write a function that repeatedly reduces an array by taking absolute differences of adjacent elements until one number remains.

34. Insert Dashes Between Odd Digits

Write a JavaScript function to insert dashes (`-`) between each pair of odd digits in a number string.

35. Tile Display with Uppercase Letters

Create a React app that:
- Displays a tile (button) for each uppercase letter (A–Z)
- Appends clicked letters to a string
- Replaces three consecutive identical letters with an underscore (`_`)

#SolveCodingProblems, #MasterJavaScript, #React #AGuidetoFrontendCodingQuestions #JavaScriptInterview #WebDevelopmentTips #ProgrammingChallenges #TechInterviewQuestions #CodingQuestions #google #rippling #apollo #microsoft #productbased #microsoft #amazon #flipkart #thoughtworks #zocdoc #goDaddy #PragmaticPlay #Oracle #ServiceNow #Myntra #Groww #machinecoding #frontenddeveloper #seniorfrontend #webdeveloper