100+ Frontend Developer Intern Interview Questions and Answers

This question is about finding the weight of the last stone after repeatedly smashing the two heaviest stones together.

• Sort the array of stone weights in descending order.

• Repeatedly smash the two heaviest stones until there is at most 1 stone left.

• If there is 1 stone left, return its weight. Otherwise, return 0.

Creating a responsive template using pure CSS without any library or framework.

• Start with a mobile-first approach

• Use media queries to adjust layout for different screen sizes

• Utilize flexbox and/or grid for layout and positioning

• Test on multiple devices and browsers

Yes, we can send the state from a child component to a parent component in React.

• Use callback functions to pass data from child to parent

• Parent component can pass a function as a prop to child component

• Child component can call this function with the data to update parent's state

Yes, custom hooks are reusable functions in React that allow you to extract component logic into separate functions.

• Custom hooks are created by prefixing the function name with 'use' and can be used to share logic between components.

• They can be used to manage state, side effects, and other features in functional components.

• For example, a custom hook can be created to fetch data from an API and handle loading and error states.

• Custom hooks can also be used to encapsulate comple...read more

React Query is a library for managing server state in React applications.

• React Query is used for fetching, caching, synchronizing and updating server state in React applications.

• It provides hooks like useQuery and useMutation to interact with server data.

• React Query helps in handling loading, error and stale data states efficiently.

• Example: const { data, isLoading, isError } = useQuery('todos', fetchTodos)

Higher order functions are functions that can take other functions as arguments or return functions as their results.

• Higher order functions can be used to create more flexible and reusable code.

• They enable functional programming paradigms.

• Examples of higher order functions include map, filter, and reduce in JavaScript.

A todo list application using localstorage.

• Use HTML, CSS, and JavaScript to create the user interface.

• Use the localstorage API to store and retrieve todo items.

• Implement features like adding, editing, and deleting todo items.

• Display the list of todo items and their status.

• Allow users to mark todo items as completed or incomplete.

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope.

• Hoisting applies to both variable and function declarations.

• Variable declarations are hoisted but not their initializations.

• Function declarations are fully hoisted, including their definitions.

• Hoisting can lead to unexpected behavior if not understood properly.

I have implemented APIs in my code using various methods such as AJAX, fetch, and axios.

• Used AJAX to make asynchronous requests to the server and retrieve data

• Used fetch API to make HTTP requests and handle responses

• Used axios library to handle HTTP requests and responses

• Implemented RESTful APIs to interact with the server

• Used API documentation to understand the endpoints and parameters

Promises in JavaScript are objects that represent the eventual completion or failure of an asynchronous operation.

• Promises are used to handle asynchronous operations such as fetching data from a server or reading a file.

• They simplify the process of writing asynchronous code by providing a more structured approach.

• Promises have three states: pending, fulfilled, or rejected.

• They can be chained together using methods like .then() and .catch().

• Promises help avoid callback hell an...read more

Design a signin page using HTML and CSS only

• Create a form element with input fields for username and password

• Style the form using CSS to make it visually appealing

• Add a submit button for users to sign in

• Consider adding error messages or validation for user input

• Use CSS to make the page responsive for different screen sizes

Memoization is a technique in JavaScript to cache the results of expensive function calls for future use.

• Memoization improves performance by avoiding redundant calculations

• It is commonly used in recursive functions or functions with expensive computations

• The cached results are stored in a data structure like an object or a map

• Memoization can be implemented manually or using libraries like Lodash or Memoizee

Temporal Dead Zone is a behavior in JavaScript where variables are not accessible before they are declared.

• Temporal Dead Zone occurs when accessing variables before they are declared

• Variables in the Temporal Dead Zone cannot be accessed or assigned

• The Temporal Dead Zone is a result of JavaScript's hoisting behavior

• Example: accessing a variable before it is declared will throw a ReferenceError

CSS can be changed through JavaScript by accessing the style property of an element and modifying its CSS properties.

• Access the element using document.querySelector() or document.getElementById()

• Use element.style.propertyName to modify the CSS property

• Alternatively, add or remove CSS classes using element.classList.add() and element.classList.remove()

• Use CSS variables to dynamically change multiple properties at once

Arrow functions are a concise way to write functions in JavaScript.

• Arrow functions have a shorter syntax compared to regular functions.

• They do not have their own 'this' value.

• They do not have the 'arguments' object.

• They cannot be used as constructors with the 'new' keyword.

• They are commonly used in functional programming and with array methods like 'map' and 'filter'.

React JS is a popular JavaScript library for building user interfaces.

• Component-based architecture

• Virtual DOM for efficient updates

• JSX syntax for writing components

• One-way data binding

• Reusable components

• React Native for mobile app development

UseEffect and UseState are React hooks used for managing state and side effects in functional components.

• UseEffect is used to perform side effects in functional components, similar to componentDidMount and componentDidUpdate in class components.

• UseState is used to manage state in functional components, allowing for re-rendering when the state changes.

• Example: const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; });

JavaScript has 7 different data types including number, string, boolean, null, undefined, object, and symbol.

• Number: represents numeric values

• String: represents textual values

• Boolean: represents true/false values

• Null: represents intentional absence of any object value

• Undefined: represents an uninitialized value

• Object: represents a collection of properties

• Symbol: represents a unique identifier

Find the first and last occurrence of a given number in a sorted array.

• Use binary search to find the first occurrence of the number.

• Use binary search again to find the last occurrence of the number.

• Return the indices of the first and last occurrence.

CSS Grid is a layout system that allows for easy creation of complex and responsive web designs.

• CSS Grid allows for the creation of complex layouts with rows and columns

• It provides a more flexible and efficient way to design web layouts compared to traditional methods

• It allows for responsive design without the need for media queries

• It can be used in combination with other CSS layout systems like Flexbox

• Example: Using CSS Grid to create a responsive image gallery

Virtual DOM is a lightweight copy of the actual DOM that allows efficient updates and rendering in JavaScript frameworks.

• Virtual DOM is a concept used in JavaScript frameworks like React.

• It is a lightweight copy of the actual DOM tree.

• Changes made to the virtual DOM are compared with the actual DOM to determine the minimal updates needed.

• This helps in efficient rendering and improves performance.

• Virtual DOM allows developers to write code as if the entire page is rendered on ...read more

map, reduce, and filter are higher-order functions in JavaScript used to manipulate arrays.

• map: creates a new array by applying a function to each element of the original array

• reduce: applies a function to an accumulator and each element in the array, reducing it to a single value

• filter: creates a new array with all elements that pass a test implemented by a provided function

Access in Redux can be defined by creating actions and reducers to manage state changes.

• Define action types to represent different types of access (e.g. READ, WRITE, DELETE)

• Create action creators to dispatch actions for defining access

• Write reducers to update the state based on the dispatched actions

• Use selectors to access the defined access in components

Hybrid mode refers to a combination of remote and in-office work, common in early stage startups.

• Hybrid mode allows for flexibility in work location, combining the benefits of remote work with in-person collaboration.

• Working in early stage startups can be exciting and fast-paced, with opportunities to take on diverse responsibilities and make a significant impact.

• It is important to be adaptable and willing to wear multiple hats in a startup environment.

• Communication skills ar...read more

Inheritance allows a class to inherit properties and methods from another class, while polymorphism allows objects to be treated as instances of their parent class. Encapsulation restricts access to certain components of an object.

• Inheritance: Child classes can inherit properties and methods from parent classes.

• Polymorphism: Objects can be treated as instances of their parent class.

• Encapsulation: Restricts access to certain components of an object.

Adding small features like responsive design, clear navigation, consistent branding, and interactive elements can make a website look more professional.

• Implement responsive design to ensure the website looks good on all devices

• Ensure clear and intuitive navigation for easy user experience

• Maintain consistent branding elements such as colors, fonts, and logos

• Incorporate interactive elements like animations, hover effects, or microinteractions

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 function expression and immediately invoke it.

• It helps in creating a private scope for variables and functions.

• It is commonly used to avoid polluting the global namespace.

• IIFE can be written using different syntaxes like using parentheses, function declaration, or arrow functions.

JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files.

• JSX stands for JavaScript XML

• It is commonly used with React to define the structure and appearance of components

• JSX elements are transpiled into regular JavaScript function calls

• It allows you to write HTML-like code with JavaScript expressions embedded within curly braces

• Example:

  Hello, {name}!

The difference between == and === in JavaScript is that == compares only the values, while === compares both values and types.

• The == operator compares two variables by converting them to the same type before making the comparison.

• The === operator compares two variables without type conversion, so they must be of the same type to be considered equal.

• Example: 1 == '1' will return true, but 1 === '1' will return false.

On-page SEO refers to optimizing elements on a website to improve search engine rankings, while off-page SEO involves external factors like backlinks and social signals.

• On-page SEO includes optimizing meta tags, headings, content, and images on a website.

• Off-page SEO involves building backlinks from other websites, social media shares, and online reputation management.

• Examples of on-page SEO techniques are keyword optimization, internal linking, and mobile responsiveness.

• Exam...read more

The purpose of the FLEX property in CSS Flexbox is to define how a flex item will grow or shrink to fit the available space.

• The FLEX property is used to set the initial size of a flex item.

• It can be used to specify how much a flex item can grow or shrink relative to the other flex items.

• The FLEX property is a shorthand for the FLEX-GROW, FLEX-SHRINK, and FLEX-BASIS properties.

Design a restaurant website with menu, reservation system, and location map.

• Include high-quality images of the restaurant, food, and ambiance

• Create a user-friendly navigation menu for easy access to different sections

• Implement a reservation system with date, time, and party size options

• Integrate a location map with directions and contact information

• Ensure mobile responsiveness for easy access on different devices

Doc type in HTML specifies the version of HTML being used in the document.

• Doc type declaration is placed at the very beginning of an HTML document before the <html> tag.

• It is written as <!DOCTYPE html> for HTML5.

• The doc type declaration helps the browser to render the web page correctly.

• It is not an HTML tag but an instruction to the web browser about what version of HTML the page is written in.

useQuery is for fetching data from the server, useMutation is for making changes to the server data.

• useQuery is used for fetching data from the server, while useMutation is used for making changes to the server data.

• useQuery is read-only and does not modify data on the server, while useMutation is used for updating, creating, or deleting data on the server.

• useQuery is typically used for GET requests, while useMutation is used for POST, PUT, DELETE requests.

• Example: useQuery c...read more

Yes, I use Redux Toolkit for state management in my frontend projects.

• I use Redux Toolkit to simplify the process of managing state in my applications.

• It provides a set of tools and best practices for managing state in a predictable way.

• I find it helpful for handling complex state logic and data flow in my projects.

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