Scribd
Upload
27 views2 pages

Complete_Frontend_Interview_Prep

The document provides a comprehensive guide for frontend interview preparation, covering key topics such as personal introduction, JavaScript concepts, React components, and website performance optimization. It includes common interview questions and answers related to frontend development, including OOP principles, security issues, and testing methods. The guide serves as a valuable resource for candidates looking to enhance their knowledge and skills in frontend development.

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
27 views2 pages

Complete_Frontend_Interview_Prep

The document provides a comprehensive guide for frontend interview preparation, covering key topics such as personal introduction, JavaScript concepts, React components, and website performance optimization. It includes common interview questions and answers related to frontend development, including OOP principles, security issues, and testing methods. The guide serves as a valuable resource for candidates looking to enhance their knowledge and skills in frontend development.

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/ 2

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

You might also like