ฝึกสัมภาษณ์ Frontend

A closure is created when a function keeps access to variables from its outer scope even after the outer function returns. It enables data privacy and functional patterns.

Hoisting moves variable and function declarations to the top of their scope before execution. `let` and `const` are hoisted but not initialized, so they are not accessible before their declaration.

The loose equality operator == converts operands to a common type, while === requires the same type and value. Strict equality avoids surprising coercions.

A Promise represents a value that may be available now, later, or never, and supports .then, .catch, and .finally. It is not a loop, event, or animation.

async/await is syntactic sugar over Promises that lets developers write asynchronous code more readably. It does not create workers, block the loop by design, or convert CSS.

Event delegation uses bubbling to handle events from many children with one parent listener. It improves performance and works for dynamically added elements.

The value of `this` depends on how a function is called: method call, function call, arrow function, or explicit binding. It is not always global or a DOM element.

A pure function always returns the same result for the same arguments and does not modify external state. It is easier to test and reason about.

Immutable data is not modified after creation; updates create new values instead. This reduces bugs and helps predictable UI updates.

.map() returns a new array with each element transformed. .filter() keeps matching elements, .reduce() accumulates a value, and .find() returns the first match.

.filter() returns a new array with elements that pass a condition. .map() transforms, .push() adds an item, and .sort() orders elements.

.reduce() applies a reducer function to accumulate a single result. .join() creates a string, .slice() copies a portion, and .concat() combines arrays.

A Set stores unique values and ignores duplicates. It is not sorted by default, not a key-value object, and not a tree.

localStorage stores key-value data in the browser and persists across sessions. It is not server-side, a CSS property, or a React hook.

Semantic HTML uses meaningful elements that describe structure and content, improving accessibility and SEO. Divs and spans are generic and should be used when no semantic element fits.

<main> is a landmark for the primary content of a page. <section> groups related content, and div and span are generic containers.

Specificity determines which CSS rule applies when selectors conflict. IDs have higher specificity than classes, and classes have higher specificity than elements.

The box model order is content, padding, border, and margin. The border sits between padding and margin; outline is drawn outside the border.

Flexbox handles one-dimensional layout along a main axis, while CSS Grid handles two-dimensional row and column layout. It is not for print or databases.

CSS Grid creates two-dimensional layouts by defining rows and columns together. Flexbox is better for one-dimensional layouts, and grid is not for text or timing.

rem is relative to the root html font size, while em is relative to the parent font size. px is absolute and vh is relative to viewport height.

vw equals 1% of viewport width, and vh equals 1% of viewport height. rem is root-relative and ch is character width.

Media queries apply CSS conditionally, usually based on screen size, orientation, or capabilities. They do not connect databases, load fonts, or handle events.

position: fixed places an element relative to the viewport so it stays in place while scrolling. Absolute positions relative to an ancestor, and static/relative follow normal flow.

Pseudo-classes select states or positions, such as :hover, :focus, and :first-child. They are not generated classes, variables, or attributes.

box-sizing: border-box makes width and height include content, padding, and border, which simplifies sizing. It does not remove borders, center, or create grids.

A React component is a reusable function or class that renders UI. It is not a CSS class, event, or database table.

Props are read-only inputs passed from parent to child components. State is managed inside a component, and props are not DOM nodes or globals.

State is component-owned data that can change and trigger re-renders. Props are passed in from parents; state is not a cache or stylesheet.

Hooks such as useState and useEffect let function components use React features. They are not animations, APIs, or selectors.

useState returns a state value and its setter. useEffect runs side effects, useRef holds mutable references, and useReducer manages complex state with reducers.

useEffect runs side effects such as data fetching or subscriptions after render. useState manages values, useMemo memoizes computations, and useContext reads context.

React keeps a virtual DOM in memory, diffs changes, and updates the real DOM efficiently. It is not the real DOM, a template, or a CSS layer.

Keys give list items stable identities so React can reconcile changes efficiently. They are not for styling, events, or storage.

A controlled input derives its value from state and updates state on change. Uncontrolled inputs manage their own value in the DOM.

Reconciliation is how React compares the previous and next virtual DOM and applies minimal real DOM updates. It is not database merging, CSS compiling, or bundling.

useMemo caches the result of a computation until dependencies change. useRef creates mutable refs, useEffect runs effects, and useState manages state.

The Document Object Model represents HTML as a tree of nodes that scripts can read and modify. It is not a database, preprocessor, or protocol.

document.getElementById() returns the element with a matching id. querySelectorAll returns multiple matches, createElement creates nodes, and fetch makes network requests.

addEventListener() registers a handler for an event. setTimeout delays code, appendChild adds nodes, and getAttribute reads attributes.

Bubbling means an event on a target also triggers handlers on its ancestors. The capture phase travels from the root down to the target.

The event loop manages the call stack, task queue, and microtask queue so asynchronous callbacks run at the right time. It is not DOM, CSS, or network logic.

Microtasks, including promise callbacks, run after the current task and before the next task. They are not workers, long functions, or cookies.

requestAnimationFrame schedules a callback before the next repaint for smooth animations. It is not for network requests, debouncing, or measuring.

Cookies are small pieces of data that browsers store and send to servers with requests, often for sessions and tracking. They are not variables, units, or hooks.

stopPropagation prevents the event from continuing to bubble or capture. preventDefault stops the default action such as form submission or navigation.

Debouncing waits for a quiet period before calling a function, useful for search inputs. Throttling limits calls to once per interval, which is different.

Throttling ensures a function runs at most once per interval, useful for scroll or resize handlers. Debouncing waits for a pause instead.

Lazy loading defers images, scripts, or routes until needed, reducing initial load. It is not about network speed or API caching.

Core Web Vitals measure loading, interactivity, and visual stability with metrics such as LCP, INP, and CLS. They are not database, network, or ad metrics.

Cumulative Layout Shift (CLS) measures unexpected layout shifts. LCP measures loading, INP measures interactivity, and TTFB measures server response.

Largest Contentful Paint (LCP) measures when the main content becomes visible. CLS measures layout stability, and INP/FID measure interactivity.

ARIA attributes communicate roles, states, and properties to assistive technology. They are not a framework, library, or extension.

Cross-site scripting injects malicious scripts into trusted pages, often through unescaped user input. It is not CSS, caching, or a React error.

CSP is a security header that restricts scripts, styles, and other resources to reduce XSS risk. It is not a cookie, database, or CSS rule.

CORS lets servers declare which origins may access their resources through browser headers. It is not CSS, a framework, or a DOM method.

.map(), .filter(), and .reduce() are JavaScript array methods. .append() is a DOM method, not an array method.

useState, useEffect, and useMemo are React hooks. useDOM is not a built-in React hook.

Flexbox is best for one-dimensional layouts. CSS Grid is designed for two-dimensional row and column layouts, so the statement is false.

rem is root-relative, vw is viewport width, vh is viewport height, and percent is relative to the parent.