Ultimate Frontend Interview Preparation
Interview Questions & Answers
Q: Tell me about yourself
A: I am a Frontend Developer with expertise in HTML, CSS, JavaScript, React, and UI/UX design. I
focus on building responsive, user-friendly, and performance-optimized web applications.
Q: What is Shopify?
A: Shopify is a cloud-based eCommerce platform that allows businesses to create and manage
online stores with ease.
Q: What is the difference between a class and an object?
A: A class is a blueprint or template, while an object is an instance of that class with specific
properties and values.
Q: What are the four fundamental OOP principles?
A: - **Encapsulation**: Hiding internal details of objects.
- **Inheritance**: Reusing properties and methods from a parent class.
- **Polymorphism**: Using a common interface for different data types.
- **Abstraction**: Exposing only relevant features while hiding implementation details.
Q: What is Lazy Loading?
A: Lazy loading delays loading of non-critical resources (like images and scripts) until they are
needed, improving performance.
Q: What are JavaScript Closures?
A: Closures are functions that retain access to their parent scope even after the parent function has
executed.
Q: What is Debouncing and Throttling?
A: - **Debouncing**: Delays function execution until a certain time has passed since the last call.
- **Throttling**: Ensures a function executes at most once in a given time period.
Q: What is Event Delegation?
A: Event delegation allows you to attach a single event listener to a parent element to handle events
on multiple child elements efficiently.
Q: How do you optimize website performance?
A: - Minify CSS & JavaScript
- Enable Gzip/Brotli compression
- Use lazy loading for images
- Optimize images using WebP
- Reduce HTTP requests
Q: What is React Virtual DOM?
A: A lightweight representation of the actual DOM that improves performance by updating only
changed elements.
Q: How do you prevent unnecessary re-renders in React?
A: - Use **React.memo()**
- Use **useCallback()** to memoize functions
- Use **useMemo()** for expensive calculations
Q: What is Prop Drilling in React and how do you avoid it?
A: Prop drilling occurs when props are passed down multiple levels. You can avoid it using
**Context API** or **Redux**.
Q: What is the difference between useEffect() and useLayoutEffect()?
A: - **useEffect()** runs asynchronously after rendering.
- **useLayoutEffect()** runs synchronously after all DOM mutations.
Q: What is the difference between controlled and uncontrolled components?
A: - **Controlled components** manage state via React.
- **Uncontrolled components** store state inside the DOM using refs.
Q: How do you handle API calls in React?
A: - Using **fetch()** or **Axios**
- Managing state with **useState()**
- Handling side effects with **useEffect()**
Q: What is Redux and why use it?
A: Redux is a state management library that helps manage global state across a React application,
making state predictable and manageable.
Q: What are some common JavaScript security vulnerabilities?
A: - **XSS (Cross-Site Scripting)**: Injecting malicious scripts.
- **CSRF (Cross-Site Request Forgery)**: Unauthorized API requests.
- **Clickjacking**: Tricking users into clicking hidden UI elements.
Q: How do you improve website accessibility?
A: - Use **semantic HTML** (e.g., `<button>` instead of `<div>`).
- Add **ARIA attributes** for better screen reader support.
- Ensure proper **color contrast** and **keyboard navigation**.
Q: How do you optimize images for web performance?
A: - Use **modern formats** like WebP and AVIF.
- Implement **lazy loading** (`loading='lazy'`).
- Use **responsive images** with `<picture>` and `srcset`.
Q: What are CSS performance optimization techniques?
A: - Minimize reflows and repaints.
- Use CSS sprites.
- Optimize animations with `will-change` property.
Q: How do you implement a responsive navigation menu?
A: - Use **Flexbox or Grid** for layout.
- Implement a **hamburger menu** using CSS and JavaScript.
- Ensure accessibility with proper keyboard navigation.
Q: What are Core Web Vitals?
A: - **LCP (Largest Contentful Paint)**: Measures page load speed.
- **FID (First Input Delay)**: Measures interactivity.
- **CLS (Cumulative Layout Shift)**: Measures visual stability.
Q: How do you test a frontend application?
A: - **Unit Testing**: Jest, React Testing Library.
- **End-to-End Testing**: Cypress.
- **Performance Testing**: Lighthouse, WebPageTest.
Q: How do you handle authentication in React?
A: - Use **JWT (JSON Web Tokens)**.
- Implement **OAuth** (Google, Facebook Login).
- Use **session-based authentication** with cookies.
Q: What is WebSockets?
A: WebSockets provide full-duplex communication between a client and a server, useful for real-time
applications like chat apps and live updates.
Q: How do you prevent memory leaks in JavaScript?
A: - Unsubscribe from event listeners when no longer needed.
- Use **WeakMap** for managing references.
- Avoid unnecessary DOM manipulations.
Q: What are CSS Grid and Flexbox?
A: - **CSS Grid**: Two-dimensional layout system for complex grid-based designs.
- **Flexbox**: One-dimensional layout system for distributing items within a container.
Q: What are pseudo-classes and pseudo-elements in CSS?
A: - **Pseudo-classes** (e.g., `:hover`, `:nth-child`) apply styles based on user interaction or element
state.
- **Pseudo-elements** (e.g., `::before`, `::after`) allow styling specific parts of an element.
Q: What is the difference between '==' and '===' in JavaScript?
A: - **'=='** checks for value equality with type coercion.
- **'==='** checks for strict equality without type conversion.
Q: What are some common React design patterns?
A: - **Higher Order Components (HOC)**
- **Render Props**
- **Compound Components**
- **Hooks-based Composition**
Q: What is a Service Worker?
A: A script that runs in the background, enabling **offline support** and **caching** for progressive
web apps (PWAs).
Q: How does the event loop work in JavaScript?
A: The event loop manages asynchronous tasks by processing the **call stack**, **callback
queue**, and **microtask queue**.
Q: What is the difference between localStorage, sessionStorage, and cookies?
A: - **localStorage**: Persistent storage with no expiration.
- **sessionStorage**: Temporary storage that clears when the session ends.
- **Cookies**: Small data stored with expiration for server-client communication.
