Complete Frontend Interview Preparation
Interview Questions & Answers
Q: Tell me about yourself
A: I am a Frontend Developer with experience in HTML, CSS, JavaScript, React, and UI/UX design.
I focus on building responsive and user-friendly web applications.
Q: What is Shopify?
A: Shopify is an eCommerce platform that allows businesses to create online stores, manage
products, payments, and orders without needing advanced technical skills.
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 a class with actual values
assigned to its properties.
Q: What are OOP fundamentals?
A: The four OOP principles are:
1. Encapsulation - Restricting direct access to some data.
2. Inheritance - Reusing properties and methods from a parent class.
3. Polymorphism - The ability to use the same interface for different data types.
4. Abstraction - Hiding complex implementation details and showing only necessary features.
Q: What are some key JavaScript concepts used in modern websites?
A: - Closures: Functions that remember their lexical scope.
- Debouncing & Throttling: Optimizing event handling.
- Lazy Loading: Loading content only when needed.
- Event Delegation: Attaching events at a higher level to optimize performance.
- Asynchronous Programming: Using Promises, async/await to handle API calls.
Q: What is Lazy Loading?
A: Lazy loading delays loading of resources (images, scripts) until they are needed, improving
website performance.
Q: How do you optimize website performance?
A: - Minify CSS/JS files
- Use lazy loading for images
- Enable caching
- Reduce HTTP requests
- Optimize images with modern formats (WebP, AVIF)
Q: What is React Virtual DOM?
A: A lightweight representation of the real DOM that improves performance by updating only the
changed elements efficiently.
Q: How do you prevent unnecessary re-renders in React?
A: - Use React.memo() for components.
- Use useCallback() for memoizing functions.
- Use useMemo() for memoizing values.
Q: What is the difference between controlled and uncontrolled components in React?
A: Controlled components manage state via React, while uncontrolled components store state inside
the DOM itself (using refs).
Q: How do you manage state in React?
A: - Local State: useState()
- Global State: useContext() or Redux
- Server State: React Query
Q: What is the difference between synchronous and asynchronous JavaScript?
A: Synchronous JavaScript executes code line by line, while asynchronous JavaScript allows
execution to continue without waiting (e.g., async/await, Promises).
Q: What are the common security issues in frontend development?
A: - XSS (Cross-Site Scripting): Injecting malicious scripts.
- CSRF (Cross-Site Request Forgery): Unauthorized API requests.
- Clickjacking: Tricking users into clicking hidden buttons.
Solutions: Sanitize inputs, use CSP headers, and prevent iframe embedding.
Q: How do you handle CSS browser compatibility?
A: - Use Autoprefixer to add vendor prefixes.
- Test with 'Can I Use' to check support.
- Use feature detection with Modernizr.
Q: How do you test frontend applications?
A: - Unit Tests: Jest, React Testing Library
- End-to-End Tests: Cypress
- Performance Audits: Lighthouse
