JavaScript Frontend Interview Questions
(Collected from Student Experiences)
Interview Pattern
The interview mainly focused on:
• JavaScript coding questions
• Core JavaScript concepts
• HTML & CSS fundamentals
• Project explanation
• Basic aptitude
• Code explanation (line by line)
1. Introduction
Be prepared to answer:
• Tell me about yourself.
• Explain your educational background.
• Explain your projects.
• What was your role in the project?
• Which technologies did you use?
• What challenges did you face?
• Why did you choose this approach?
Note: Interviewers may ask project-related questions in depth.
2. JavaScript Coding Questions
Question 1: Frequency Sorting
Input
[3,4,2,1,3,4,3,4,4,2,1]
Output
1
[4,3,1,2]
Explanation
• Sort numbers by highest frequency.
• If two numbers have the same frequency, sort them in ascending order.
Question 2: Continuous Subarray Sum
let arr = [9,3,4,5,2,4,7];
let k = 11;
Find all continuous subarrays whose sum is equal to k .
Example Output:
[
[9,2],
[4,5,2]
]
(Depending on the array, return every valid continuous subarray.)
Question 3: Shift an Array
Examples:
• Left Shift
• Right Shift
• Rotate an array by K positions
Question 4: Pattern Matching in Array
Given an array, identify and return elements matching the required pattern.
2
Question 5: Replace Even Indexes
Write a function that:
• Finds the minimum value.
• Replaces every even index element with that minimum value.
Example:
Input:
[7,5,2,9,6]
Output:
[2,5,2,9,2]
Question 6: Convert Array to Object
Example
["HTML","CSS","JS"]
Convert into an object using suitable keys.
Question 7: Object Frequency
Input
[
{id:1,status:"active"},
{id:2,status:"inactive"},
{id:3,status:"active"}
]
Output
{
active:2,
3
inactive:1
}
Question 8: Sum of Repeated Elements
Input
[2,5,3,4,5,3]
Output
Explanation
Repeated values:
5
3
5 + 3 = 8
Question 9: Flatten Nested Array
Example
[1,[2,3],[4,[5,6]]]
Output
[1,2,3,4,5,6]
Question 10: Palindrome
Example
4
1221
Write a JavaScript program to check whether a number or string is a palindrome.
Question 11: Armstrong Number
Write a JavaScript program to check whether a number is an Armstrong number.
Example
153
Question 12: Array Frequency
Count frequency of every element.
Example
[1,2,2,3,3,3]
Output
{
1:1,
2:2,
3:3
}
3. JavaScript Theory Questions
Prepare the following topics with:
• Definition
• Syntax
• Real-time example
• Interview example
5
Variables
• var
• let
• const
• Differences
Hoisting
Understand:
• Variable hoisting
• Function hoisting
• Temporal Dead Zone
Data Types
• Primitive
• Non-Primitive
Functions
• Function Declaration
• Function Expression
• Arrow Function
• Anonymous Function
• Callback Function
• Higher Order Function
Closure
Explain:
• Definition
• Lexical Environment
• Real-time examples
Examples:
• Counter
• Private variable
• Event handlers
6
Promises
Explain:
• Pending
• Fulfilled
• Rejected
Methods:
• then()
• catch()
• finally()
Real-time example:
• API request
Async / Await
Explain:
• Why async?
• Why await?
• Difference between Promise chaining and async/await
Asynchronous JavaScript
Topics:
• Call Stack
• Web APIs
• Event Loop
• Callback Queue
• Microtask Queue
Recursion
Explain recursion with examples:
• Factorial
• Fibonacci
• Reverse String
7
Different Ways to Create Objects
Examples:
• Object Literal
• new Object()
• Constructor Function
• Class
• [Link]()
4. HTML Questions
• Meta Tags
• Purpose of Alt Attribute
• Block Elements
• Inline Elements
• Semantic Tags
• Forms
• Input Types
5. CSS Questions
Box Model
Explain:
• Content
• Padding
• Border
• Margin
Position
• Static
• Relative
• Absolute
• Fixed
• Sticky
8
Flexbox
Understand:
• display:flex
• justify-content
• align-items
• flex-direction
• flex-wrap
Grid
Basic concepts:
• display:grid
• grid-template-columns
• gap
Center a Div
Different approaches:
• Flexbox
• Grid
• Margin Auto
• Position + Transform
Difference Between ID and Class
Know:
• Syntax
• Use cases
• Specificity
6. Aptitude Questions
Prepare these commonly asked problems:
9
Bridge and Torch Problem
Understand the logic and minimum time approach.
River Crossing Problems
Examples:
• People crossing river
• Wolf-Goat-Cabbage
• Similar logical puzzles
Tank Filling Problem
Example:
• Tap A fills tank in 1 hour.
• Tap B fills tank in 2 hours.
• Tap C fills tank in 3 hours.
Find the time when all taps are opened together.
7. Interview Tips
Interviewers may ask you to:
• Explain every line of your code.
• Mention the time complexity.
• Mention the space complexity.
• Explain why you chose that approach.
• Discuss alternative solutions.
• Dry run the code using sample input.
• Explain every JavaScript concept with a real-world example.
Final Preparation Checklist
JavaScript
• ✅ Variables
• ✅ Hoisting
10
• ✅ Data Types
• ✅ Functions
• ✅ Closures
• ✅ Promises
• ✅ Async/Await
• ✅ Asynchronous JavaScript
• ✅ Recursion
• ✅ Objects
• ✅ Arrays
• ✅ Frequency Problems
• ✅ Palindrome
• ✅ Armstrong Number
• ✅ Flatten Array
• ✅ Sliding Window / Continuous Subarray Sum
HTML
• ✅ Meta Tags
• ✅ Alt Attribute
• ✅ Block vs Inline Elements
• ✅ Forms
• ✅ Semantic Tags
CSS
• ✅ Box Model
• ✅ Position
• ✅ Flexbox
• ✅ Grid
• ✅ Centering Elements
• ✅ ID vs Class
Aptitude
• ✅ Bridge & Torch
• ✅ River Crossing
• ✅ Tank Filling
Soft Skills
• ✅ Self Introduction
• ✅ Project Explanation
• ✅ Explain Code Line by Line
• ✅ Real-Time Examples for Every Concept
11