Closures

A Closure is a feature whare an inner func has access to the outer func variale

function outerFunction(outerVariable){ return function innerFunction(innerVariable){ console.log('Outer Variable:' +outerVariable); console.log('inner Variable:' +innerVariable); } }

const newFunction = outerFunction('outside'); newFunction('inside');

Javascript Promises

Expain the difference between .then() and async/await in handling asynchronus operations in Javascript.

.then() is used with promises for asynchronous oprations, chaining multiple call for sequential execution.

async/await makes asyncronous code look synchronous and syntactic sugar over promises, improving readability and error handling.

React Life cycle methods

React components have several lifecycle methods: constructor(), render(), componentDidMount(), shouldComponentUpdate(), componentDidUpdate(), and componentWillUnmount() . To fetch data , use componentDidMount() for class components or useEffect() hook in functional components to perform side effects, inclouing data fetching after the initial render.

CROS is a security feature that restricts web applications from making request to a domain different from the one which served the web page . to handle it , configure the server to incluse CORS headers like Access-Control-Allow-Origin in the response, specifying which domains are allowed to access the resources.

Front-end Performance Optimization

Optimization strategies include minimizing and compressing assets ( CSS, Javascript, images) implementing lazy loading for images and components, using CDN for static assets, optimizing CSS selectors, and leveraging browser caching.

Single Page Application (SPA) SEO challenges

SPAs ofren struggle with SEO as content is Dynamically loaded, making it hard for search engine crawleers to index. Solutions include server-side rendering (SSR) using the history API to update URLs for different views and leveraging pre-rendering services or static site generators.

Event Delegation in Javascript

Describe the concepts and its practical uses.

Event delegation is a technique where instead of adding an event listener to each similar child element, you add a single event listener to a parent element. It leverages the event bubbling phase to catch events form child elements. Advantages include reduced memory usage (fewer event listeners) and dynamically handling events from elements added after the initial page load.

CSS Box Model

Outline the components of the box model and their impact on element spacing.

The CSS box model consists of four areas: content, padding, border and margin. These layers affect the total size and spacing of an element on the page. Understanding this model is crucial for precise layout control, as it determines how elements are sized and how control, as it determines how elements are sized and how they interact with each other document flow.

To ensure web accessibility , follow WCAG guidelines and use semantic HTML elements for structure , ARIA roles for enhanced semantics, ensure keyboard navigability, provide alt text for imanges, and ensure contrast ratios are sufficient for readability. Testing with screen readers and using accessibility audit tools can help identify and address issues.

React Hooks

useState is suitable for simple static logic, proving a variable and function to update it. useReducer is better for complex stat logic that involves multiple sub-values or when the next state depends on the previous one , as it lets you manage local state of complex components with a reducer function.

Tree Shaking in Webpack

Tree shaking is a process used in modern build tools like webpack to eliminate unused code from the final bundle. It improves performance by redusing the size of the JavaScript files that browsers need to load, parse and execute , leading to faster page load times.

Web Performance Metrics Critical web peformance metrics include first Contentful Paint (FCP) Large Contentfull Paint (LCP) time to interactive (TTI) Speed index, Cumulative layout shift (CLS) and First Input Delay (FID) . These metrics help understand the loading experience, interactivity and visual stability of a page.

Security in frontend Applications

To protect a front-end application, implement content security policy (CSP) sanitize use input to prevent XSS attacks , use HTTTPs for secure comminication, store sensitive data securely , and keep denendencies up to date to avoid vulnerabilities

Server-Side Rendering Vs. Client Side Rendering

CSR renders pages directly in the browser using Javascript, leading to faster subsequent page loads and a smoother user experience. SSR generates HTML on the sever and sends it to the client, improving initial load times and SEO. Use CSR for dynamic , app-like experiences and SSR for static sites or when SEO is a prioity.

Frontend Testing Strategies

Effective Front-end testing strategies include unit testing with Jest, integration testing with React Testing Library and end-toend testing with Cypress or selenium. Each testing type targes different aspects of the application from individual function and components to integrated workflows and the full user experience.

Implementing Dark Mode

To implement dark mode , use css custom properties (variables) for color schemes and media queries ( prefets-color-scheme) to detect system theme preferences. Provide a toggle option for users to switch manually . storing their preference locally to persist across sessions.

Front-end Interview Questions