Frontend Developer Intern
100+ Frontend Developer Intern Interview Questions and Answers
Q51. What is the Redux Toolkit?
Redux Toolkit is an official, opinionated, batteries-included toolset for efficient Redux development.
Official toolset for Redux
Opinionated and batteries-included
Helps with common Redux tasks like store setup, reducer logic, and actions
Q52. Why is React Query used?
React Query is used for managing server state and caching data in React applications.
Provides a powerful and flexible way to fetch, cache, and update data from APIs
Automatically handles caching, background refetching, and stale data management
Improves performance by reducing unnecessary network requests
Simplifies data fetching and updating logic in React components
Q53. what is react js and how to use redux in react js
React JS is a JavaScript library for building user interfaces, while Redux is a predictable state container for managing application state.
React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces.
Redux is a predictable state container for JavaScript apps, which helps in managing application state.
To use Redux in React JS, you need to install the Redux library, create a Redux store, define reducers to specify how the state changes in r...read more
Q54. What is Node Js and Discuss abourt your project?
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Node.js allows developers to run JavaScript on the server-side.
It provides an event-driven, non-blocking I/O model that makes it lightweight and efficient.
Node.js is commonly used for building scalable network applications, real-time applications, and APIs.
My project involved building a RESTful API using Node.js and Express framework.
Q55. Which tag is used to break the paragraph?
The tag is used to break the paragraph.
The
tag is a self-closing tag.It is used to insert a line break within a paragraph.
It does not require a closing tag.
Q56. different between grid and flex box
Grid is a 2D layout system while Flexbox is a 1D layout system.
Grid is used for complex layouts while Flexbox is used for simpler layouts.
Grid allows for precise placement of elements while Flexbox is more flexible.
Grid is better for aligning items in both rows and columns while Flexbox is better for aligning items in a single row or column.
Grid is supported in modern browsers while Flexbox has wider browser support.
Share interview questions and help millions of jobseekers 🌟
Q57. What are CSS selectors
CSS selectors are patterns used to select and style HTML elements.
Selectors can target elements by tag name, class, ID, attribute, and more.
Selectors can be combined to create complex rules.
Examples: 'p' selects all
elements, '.class' selects all elements with class 'class', '#id' selects the element with ID 'id'.
Q58. Explain about react hooks and why you use it ?
React hooks are functions that let you use state and other React features without writing a class.
Hooks are introduced in React 16.8 to allow developers to use state and other React features in functional components.
They make it easier to reuse stateful logic, separate concerns, and write cleaner code.
Examples of hooks include useState for managing state in functional components and useEffect for handling side effects.
Frontend Developer Intern Jobs
Q59. Explain call(), apply () and bind() method?
call(), apply() and bind() are methods used to manipulate the 'this' keyword in JavaScript.
call() and apply() are used to invoke a function with a specific 'this' context and arguments.
call() accepts arguments as a comma-separated list, while apply() accepts arguments as an array.
bind() returns a new function with a specific 'this' context, which can be invoked later with arguments.
bind() is useful for creating a new function with a fixed 'this' context, such as event handler...read more
Q60. The flex property defines the ability of a flex item to grow ,shrink,,,,etc
The flex property defines the ability of a flex item to grow, shrink, or stay the same size.
The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis properties.
It allows a flex item to grow or shrink to fill the available space.
Values for flex property include a unitless number for flex-grow, a unitless number for flex-shrink, and a length or percentage for flex-basis.
Example: flex: 1 1 50%;
Q61. What is HTML meta tag?
HTML meta tag is used to provide metadata about the HTML document.
Meta tags are placed in the head section of an HTML document.
They provide information such as character set, viewport settings, keywords, description, etc.
Example: <meta charset='UTF-8'>
Q62. Mention some factors that slow downs a Website.
Factors that slow down a website include large images, excessive HTTP requests, outdated plugins, and poor server performance.
Large images and videos
Excessive HTTP requests
Outdated plugins and scripts
Poor server performance
Unoptimized code
External embedded media
Too many ads or pop-ups
Q63. What is createSlice?
createSlice is a function in Redux Toolkit that simplifies the process of creating Redux slices.
createSlice is a function provided by Redux Toolkit for creating Redux slices with less boilerplate code.
It allows developers to define a slice of the Redux state, including initial state, reducers, and action creators.
createSlice automatically generates action types and action creators based on the defined reducers.
It is commonly used in React applications to manage state using Re...read more
Q64. What Is ReactJs?
ReactJs is a JavaScript library for building user interfaces.
ReactJs is developed and maintained by Facebook.
It uses a component-based architecture for building reusable UI components.
ReactJs uses a virtual DOM for efficient rendering of components.
It allows developers to create interactive and dynamic web applications.
ReactJs can be used with other libraries and frameworks like Redux for state management.
Q65. What is Reducer?
Reducer is a function in Redux that specifies how the application's state changes in response to actions.
Reducer functions take the current state and an action as arguments, and return the new state.
Reducers are pure functions, meaning they do not modify the current state, but return a new state object.
Redux uses reducers to manage the state of the application in a predictable way.
Q66. Find same type of element in array!
Find same type of element in array of strings.
Use a loop to iterate through the array.
Compare each element with the rest of the elements using nested loops.
Return the first matching element.
Q67. difference between let and var?
let and var are both used to declare variables in JavaScript, but they have some key differences.
let is block-scoped, while var is function-scoped
let variables are not hoisted, while var variables are hoisted
let variables can be reassigned, while var variables can be redeclared
let variables have temporal dead zone, while var variables do not
Q68. How can you improve the website's frontend.
To improve the website's frontend, I would focus on optimizing performance, enhancing user experience, and ensuring responsiveness.
Optimize images and videos to reduce loading times
Implement lazy loading for faster initial page load
Enhance UI/UX design for better user engagement
Utilize responsive design to ensure compatibility across devices
Implement accessibility features for users with disabilities
Q69. What is html more about css and react too
HTML is the structure of a webpage, CSS is for styling, and React is a JavaScript library for building user interfaces.
HTML is used for creating the structure of a webpage by using elements like <div>, <p>, <h1>, etc.
CSS is used for styling the webpage by changing colors, fonts, layout, etc. using selectors and properties.
React is a JavaScript library for building user interfaces, allowing for reusable components and efficient updates.
Q70. What is SPA and how is react SPA?
SPA stands for Single Page Application. React is a popular JavaScript library for building SPAs.
SPA is a web application that loads a single HTML page and dynamically updates the page as the user interacts with it.
React is a JavaScript library for building user interfaces, including SPAs.
React uses a virtual DOM to efficiently update the UI without reloading the entire page.
React Router is commonly used with React to handle routing in SPAs.
Q71. Diff between controlled and uncontrolled components!
Controlled components are controlled by React state, while uncontrolled components manage their own state internally.
Controlled components are controlled by React state
Uncontrolled components manage their own state internally
Controlled components are typically used for forms with dynamic input fields
Uncontrolled components are useful for simple forms with static input fields
Q72. What is box model?
The box model is a concept in CSS that describes how elements are rendered on a web page.
The box model consists of four components: content, padding, border, and margin.
The content refers to the actual content of the element, such as text or images.
The padding is the space between the content and the border.
The border is a line that surrounds the content and padding.
The margin is the space outside the border, separating the element from other elements.
The box model allows dev...read more
Q73. Tell eveything you know about node js.
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Node.js allows developers to run JavaScript on the server-side.
It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
Node.js has a large and active community with a vast number of open-source packages available through npm.
It is commonly used for building scalable network applications, real-time applications, and APIs.
Some popular frameworks built on Node.js include Expres...read more
Q74. Why JavaScript is being used?
JavaScript is used for creating interactive and dynamic web pages.
JavaScript allows for client-side scripting, reducing server load and improving user experience.
It is versatile and can be used for both front-end and back-end development.
JavaScript frameworks like React and Angular make it easier to build complex web applications.
It is constantly evolving with new features and updates.
JavaScript is supported by all major browsers and has a large developer community.
Q75. Write a program for sum of n numbers through recursion.
Program to calculate sum of n numbers using recursion
Define a recursive function that takes an array of numbers and an index as parameters
Base case: if index is equal to the length of the array, return 0
Recursive case: return the current number plus the result of the function with index + 1
Call the function with the array of numbers and index 0 to start the recursion
Q76. Difference in CSS Selectors like class, id
Classes can be used multiple times, IDs are unique. Classes are denoted by a dot, IDs by a hash.
Classes can be used multiple times in a document, IDs can only be used once
Classes are denoted by a dot (.), IDs are denoted by a hash (#)
Example: .class1 { color: red; } #id1 { font-size: 16px; }
Q77. What is oops what is class
OOPs stands for Object-Oriented Programming. A class is a blueprint for creating objects in OOP.
OOPs is a programming paradigm that uses objects and classes to design and build applications.
A class is a template or blueprint for creating objects in OOP.
Classes define the properties (attributes) and behaviors (methods) of objects.
Objects are instances of classes, representing real-world entities.
Encapsulation, inheritance, and polymorphism are key principles of OOPs.
Q78. difference between useState and useEffect in react
useState is used to manage state in functional components, while useEffect is used to perform side effects in functional components.
useState is used to declare state variables in functional components.
useEffect is used to perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.
useState does not trigger re-renders, while useEffect can be used to trigger re-renders based on dependencies.
Q79. polyfill for map and reduce
Polyfill for map and reduce functions in JavaScript.
Create a function that takes an array and a callback function as arguments.
Loop through the array and apply the callback function to each element.
Return a new array with the modified elements.
For reduce, create a function that takes an array, a callback function, and an initial value as arguments.
Loop through the array and apply the callback function to each element and the accumulator.
Return the final value of the accumulat...read more
Q80. ==compare values with type coerion=== is that
Yes, the question is asking about comparing values with type coercion in JavaScript.
In JavaScript, the == operator compares values with type coercion, meaning it will convert the operands to the same type before making the comparison.
For example, 1 == '1' will return true because the string '1' is converted to a number before comparison.
However, 1 === '1' will return false because the strict equality operator (===) does not perform type coercion.
Q81. Why you want to join xircls?
I want to join xircls because of their innovative projects and collaborative team environment.
Exciting projects that push boundaries
Collaborative team environment
Opportunity for growth and learning
Q82. Which is props in React?
Props in React are used to pass data from a parent component to a child component.
Props are read-only and cannot be modified by the child component.
Props are passed down the component tree.
Props can be any type of data, such as strings, numbers, arrays, or objects.
Example:
Q83. What are hooks in React?
Hooks in React are functions that let you use state and other React features without writing a class.
Hooks were introduced in React 16.8 to allow developers to use state and other React features in functional components.
Some commonly used hooks are useState, useEffect, useContext, and useReducer.
Hooks are used to manage state, perform side effects, and access context in functional components.
Example: const [count, setCount] = useState(0);
Q84. Explain about searching algorithms
Searching algorithms are used to find a specific item or value in a collection of data.
Linear search checks each item in the collection until the target value is found.
Binary search divides the collection in half and checks if the target value is in the lower or upper half.
Hash tables use a hash function to map the target value to an index in an array.
Depth-first search and breadth-first search are used to traverse graphs and trees to find a specific node or path.
Q85. Implement a game with vanilla js
Implement a game using vanilla js
Use HTML, CSS, and JavaScript to create the game
Implement game logic such as player movement, scoring, and win conditions
Utilize event listeners and DOM manipulation for interactivity
Q86. Implement a login page with vanilla js
Implementing a login page using vanilla JavaScript
Create HTML form with input fields for username and password
Use JavaScript to validate user input and handle form submission
Implement logic to check if username and password are correct
Display appropriate messages for successful or failed login attempts
Q87. Difference between java and c++
Java is an object-oriented programming language while C++ is a general-purpose programming language.
Java is platform-independent while C++ is platform-dependent.
Java has automatic garbage collection while C++ requires manual memory management.
Java has a simpler syntax compared to C++.
Java has built-in support for multithreading while C++ requires external libraries.
C++ allows for low-level memory manipulation while Java does not.
Q88. What are Angular Pipes?
Angular Pipes are used to transform data in Angular templates.
Angular Pipes are used to format data before displaying it in the view.
They can be used to transform strings, numbers, dates, and other types of data.
Common built-in pipes include DatePipe, UpperCasePipe, LowerCasePipe, and CurrencyPipe.
Custom pipes can also be created to suit specific formatting needs.
Q89. Explain Lifecycle components in React?
Lifecycle components in React are methods that are automatically called at specific points in a component's life cycle.
Lifecycle methods include componentDidMount, componentDidUpdate, componentWillUnmount, etc.
componentDidMount is called after the component is rendered for the first time.
componentDidUpdate is called after the component's state or props change.
componentWillUnmount is called before the component is removed from the DOM.
Q90. The angle between hands of the clock
The angle between the hands of a clock can be calculated using the formula |30H - 11/2M| where H is the hour and M is the minute.
Calculate the angle using the formula |30H - 11/2M|
Consider the smaller angle between the hands
For example, at 3:15, the angle would be |30*3 - 11/2*15| = 7.5 degrees
Q91. what is sql and its uses.
SQL is a programming language used for managing and manipulating relational databases.
SQL stands for Structured Query Language
It is used to retrieve and manipulate data in relational databases
Common SQL commands include SELECT, INSERT, UPDATE, DELETE
Examples of SQL database systems include MySQL, PostgreSQL, Oracle
Q92. Dom manipulation in js
DOM manipulation in JavaScript involves accessing and modifying elements on a webpage.
Use document.getElementById() to access an element by its id
Use document.querySelector() to access an element using CSS selectors
Use element.innerHTML to change the content of an element
Use element.style to change the styling of an element
Q93. What is IIFE in Javascript
IIFE stands for Immediately Invoked Function Expression. It is a JavaScript function that is executed as soon as it is defined.
IIFE is a way to create a self-contained scope in JavaScript.
It helps in avoiding naming conflicts and polluting the global namespace.
IIFE is defined and invoked at the same time using parentheses.
It is commonly used to encapsulate code and create modules in JavaScript.
Q94. Please tell me about the PWAs?
PWAs are web applications that use modern web capabilities to provide a user experience similar to that of mobile apps.
PWAs can work offline or on low-quality networks
They can be installed on a user's device like a native app
PWAs are responsive and provide a seamless user experience
They are built using web technologies like HTML, CSS, and JavaScript
Examples of PWAs include Twitter Lite, Pinterest, and Starbucks
Q95. How many tag in html
There are around 140 HTML tags available for use in web development.
There are basic tags like <html>, <head>, <body>, <title>, <p>, <div>, <span>, <img>, <a>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <form>, <input>, <button>, <label>, <select>, <option>, <textarea>, <br>, <hr>, <strong>, <em>, <h1> to <h6>, <blockquote>, <cite>, <code>, <pre>, <abbr>, <address>, <b>, <i>, <small>, <sub>, <sup>, <del>, <ins>, <kbd>, <samp>, <var>, <mark>, <time>, <q>, <dfn>, <u>, <s>, <st...read more
Q96. What is set in js
Set in JavaScript is a collection of unique values, similar to an array but with no duplicate elements.
Sets are used to store unique values of any type
Elements in a set can be added, removed, and checked for existence
Example: let mySet = new Set([1, 2, 3, 4, 5])
Q97. What is event bubbling
Event bubbling is the process where an event triggered on a child element is propagated up to its parent elements.
Events triggered on child elements will also trigger the same event on parent elements
Event bubbling allows for delegation of event handling to a parent element
Can be controlled using event.stopPropagation() method
Q98. What is react dom?
React DOM is a package that provides DOM-specific methods that can be used to render React components.
React DOM is used to render React components in the DOM.
It provides methods like ReactDOM.render() to render components.
React DOM takes care of updating the DOM to match the React components.
Q99. Convert roman to int number
Convert roman to int number
Create a dictionary of roman numerals and their integer values
Iterate through the roman numeral string and add corresponding integer values
Subtract twice the value of previous numeral if it is smaller than current numeral
Q100. Reverse an array in JS ?
Use the reverse() method to reverse an array in JavaScript.
Use the reverse() method on the array to reverse its elements in place.
Example: const arr = ['apple', 'banana', 'cherry']; arr.reverse(); // ['cherry', 'banana', 'apple']
Interview Questions of Similar Designations
Top Interview Questions for Frontend Developer Intern Related Skills
Interview experiences of popular companies
Calculate your in-hand salary
Confused about how your in-hand salary is calculated? Enter your annual salary (CTC) and get your in-hand salary
Reviews
Interviews
Salaries
Users/Month