Scribd
Upload
38 views4 pages

Ultimate Frontend Interview Prep

The document provides a comprehensive guide for frontend interview preparation, covering key topics such as JavaScript, React, and web performance optimization. It includes common interview questions along with detailed answers on concepts like OOP principles, API handling, and security vulnerabilities. Additionally, it discusses tools and techniques for testing, accessibility, and state management in React applications.

Uploaded by

SAWERA CH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views4 pages

Ultimate Frontend Interview Prep

The document provides a comprehensive guide for frontend interview preparation, covering key topics such as JavaScript, React, and web performance optimization. It includes common interview questions along with detailed answers on concepts like OOP principles, API handling, and security vulnerabilities. Additionally, it discusses tools and techniques for testing, accessibility, and state management in React applications.

Uploaded by

SAWERA CH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You might also like