` in `next.config.ts` for each route"],"answer":0,"explanation":"The Metadata API works in server components: `export const metadata = { title, description }`, and for dynamic values `export async function generateMetadata({ params })`. Values from layout and page are merged. `next/head` is a Pages Router API.","sources":[{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"},{"title":"Next.js: generateMetadata","url":"https://nextjs.org/docs/app/api-reference/functions/generate-metadata"}],"origin":{"topic":"nextjs","level":"junior","index":13}},{"question":"At what URL is the file `public/logo.png` served?","options":["`/logo.png`","`/public/logo.png`","`/_next/static/logo.png`"],"answer":0,"explanation":"The contents of `public` are served from the site root. Favicons, robots.txt and static images go there. These files don't go through the build and don't get a hash in their name, so caching must be configured separately. `/_next/static` is the path for build-generated assets.","sources":[{"title":"Next.js: Project Structure","url":"https://nextjs.org/docs/app/getting-started/project-structure"}],"origin":{"topic":"nextjs","level":"junior","index":14}},{"question":"How do you create a `GET /api/users` API endpoint in the App Router?","options":["A file `app/api/users/route.ts` exporting a `GET` function","A file `app/api/users/page.tsx` with a default export","A file `api/users.ts` in the project root with `export default handler`"],"answer":0,"explanation":"Route Handlers use the Web `Request`/`Response` APIs: `export async function GET(request: Request) { return Response.json(users) }`. `POST`, `PUT`, `PATCH`, `DELETE` and others are supported. A folder can't contain both `route.ts` and `page.tsx`.","sources":[{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"}],"origin":{"topic":"nextjs","level":"junior","index":15}},{"question":"Which environment variables are available in browser code?","options":["Only those prefixed with `NEXT_PUBLIC_`, inlined at build time","All variables from `.env` if the file is in the project root","None: environment variables aren't available in the browser at all"],"answer":0,"explanation":"Next.js substitutes `process.env.NEXT_PUBLIC_*` into client code at build time, so changing a value requires a rebuild. Other variables are available only on the server - that way secrets (API keys, DB passwords) don't leak to the browser.","sources":[{"title":"Next.js: Environment Variables","url":"https://nextjs.org/docs/app/guides/environment-variables"}],"origin":{"topic":"nextjs","level":"junior","index":16}},{"question":"What does the `<Image>` component from `next/image` give you?","options":["Size and format selection, lazy loading, protection against CLS","Just a shorter syntax for a regular `<img>` tag","Image loading over WebSocket to speed up rendering"],"answer":0,"explanation":"`next/image` generates `srcset`, serves modern formats (WebP/AVIF), lazy-loads by default and reserves space thanks to `width`/`height` (or `fill`), preventing layout shifts. For the LCP image, use `preload` (formerly `priority`).","sources":[{"title":"Next.js: Image Optimization","url":"https://nextjs.org/docs/app/getting-started/images"},{"title":"Next.js: <Image>","url":"https://nextjs.org/docs/app/api-reference/components/image"}],"origin":{"topic":"nextjs","level":"junior","index":17}},{"question":"Why does `<Image src=\"https://cdn.example.com/a.jpg\" ... />` produce a configuration error?","options":["External domains must be allowed in `images.remotePatterns` in `next.config`","`next/image` doesn't support images from other domains at all","External images can be loaded only in PNG format"],"answer":0,"explanation":"The image optimizer runs on your server, and without restrictions it could be used as a proxy for any URL. That's why allowed sources are listed in `remotePatterns` (protocol, host, path).","sources":[{"title":"Next.js: <Image>","url":"https://nextjs.org/docs/app/api-reference/components/image"},{"title":"Next.js: Image Optimization","url":"https://nextjs.org/docs/app/getting-started/images"}],"origin":{"topic":"nextjs","level":"junior","index":18}},{"question":"What does `next/font` do?","options":["Downloads the font at build time and serves it from your domain","Loads Google Fonts via `<link>` on every page request","Converts fonts into an SVG sprite to speed up text rendering"],"answer":0,"explanation":"Fonts (Google or local) are downloaded at build time and served with your static assets: the browser doesn't contact Google, which is better for privacy and speed. Next.js also configures a fallback font with adjusted metrics to reduce CLS.","sources":[{"title":"Next.js: Font Optimization","url":"https://nextjs.org/docs/app/getting-started/fonts"},{"title":"Next.js: next/font","url":"https://nextjs.org/docs/app/api-reference/components/font"}],"origin":{"topic":"nextjs","level":"junior","index":19}},{"question":"Where do you import `useRouter` from in the App Router?","options":["`next/navigation`","`next/router`","`react-router-dom`"],"answer":0,"explanation":"In the App Router, navigation hooks - `useRouter`, `usePathname`, `useSearchParams`, `useParams` - are imported from `next/navigation` and work in client components. `next/router` is the Pages Router API. For a server-side redirect, use `redirect()`.","sources":[{"title":"Next.js: useRouter","url":"https://nextjs.org/docs/app/api-reference/functions/use-router"}],"origin":{"topic":"nextjs","level":"junior","index":20}},{"question":"How do you get the current path in a client component, e.g. to highlight the active link?","options":["`usePathname()`","`window.location.pathname` during render","`useRouter().pathname`"],"answer":0,"explanation":"`usePathname()` returns the path and updates on client-side navigation. Reading `window` during render breaks SSR and hydration. The `pathname` property on `useRouter` existed in the Pages Router; it isn't in `next/navigation`.","sources":[{"title":"Next.js: usePathname","url":"https://nextjs.org/docs/app/api-reference/functions/use-pathname"}],"origin":{"topic":"nextjs","level":"junior","index":21}},{"question":"How does SSR differ from SSG?","options":["SSR - HTML on every request, SSG - ahead of time at build","SSR renders in the user's browser, while SSG renders on the server","SSG requires a database connection, while SSR works without one"],"answer":0,"explanation":"Static Site Generation (prerendering) creates HTML at build time and serves it from a CDN - fast and cheap, but the data is \"frozen\". Server-Side Rendering produces HTML on every request - the data is fresh and personalized, but load and TTFB are higher. Rendering in the browser is CSR.","sources":[{"title":"Next.js Learn: Static and Dynamic Rendering","url":"https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering"},{"title":"Next.js: Glossary","url":"https://nextjs.org/docs/app/glossary"}],"origin":{"topic":"nextjs","level":"junior","index":22}},{"question":"What is ISR (Incremental Static Regeneration)?","options":["Background updating of static pages without a full rebuild","Gradual loading of the JS bundle as you scroll down the page","Rendering the page in parts in the browser after JS loads"],"answer":0,"explanation":"Users get a cached static page, and after the period expires (or `revalidatePath`/`revalidateTag` is called), Next.js regenerates it in the background and updates the cache. It's a compromise between the speed of SSG and the freshness of SSR.","sources":[{"title":"Next.js: Incremental Static Regeneration","url":"https://nextjs.org/docs/app/guides/incremental-static-regeneration"},{"title":"Next.js: Revalidating","url":"https://nextjs.org/docs/app/getting-started/revalidating"}],"origin":{"topic":"nextjs","level":"junior","index":23}},{"question":"When does `getServerSideProps` run in the Pages Router?","options":["On the server on every request","Once at build time","In the browser during hydration"],"answer":0,"explanation":"`getServerSideProps` is SSR in the Pages Router: the function receives the request context (cookies, query) and returns props. At build time, `getStaticProps` runs instead. In the App Router, both APIs are replaced by async server components.","sources":[{"title":"Next.js (Pages): getServerSideProps","url":"https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props"},{"title":"Next.js (Pages): getStaticProps","url":"https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props"}],"origin":{"topic":"nextjs","level":"junior","index":24}},{"question":"What does `getStaticPaths` do in the Pages Router?","options":["Returns the paths of a dynamic route to build","Returns all static files from the `public` folder","Defines redirects and rewrites for static pages"],"answer":0,"explanation":"For a `pages/posts/[id].tsx` page with `getStaticProps`, Next.js needs to know which `id`s to build ahead of time. The `fallback` option defines behavior for other paths. The App Router counterpart is `generateStaticParams`.","sources":[{"title":"Next.js (Pages): getStaticPaths","url":"https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths"},{"title":"Next.js: generateStaticParams","url":"https://nextjs.org/docs/app/api-reference/functions/generate-static-params"}],"origin":{"topic":"nextjs","level":"junior","index":25}},{"question":"What does a folder in parentheses do, e.g. `app/(marketing)/about/page.tsx`?","options":["Groups routes without affecting the URL - the page is at `/about`","Makes the route optional: both `/marketing/about` and `/about` work","Hides the route from the production build"],"answer":0,"explanation":"Route groups organize code and let a group have its own layout (e.g. separate ones for marketing and the user dashboard) without changing URLs. You can even have several root layouts in different groups.","sources":[{"title":"Next.js: Route Groups","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-groups"}],"origin":{"topic":"nextjs","level":"junior","index":26}},{"question":"Why give a folder a name with an underscore, e.g. `app/_components`?","options":["It's a private folder: it and its files are excluded from routing","The underscore makes the components in the folder client components","It tells Next.js to minify those files more aggressively"],"answer":0,"explanation":"Private folders explicitly separate helper code from routes. Strictly speaking, files without `page`/`route` aren't public anyway, but `_` protects against accidentally creating a route and makes the structure clearer.","sources":[{"title":"Next.js: Project Structure","url":"https://nextjs.org/docs/app/getting-started/project-structure"}],"origin":{"topic":"nextjs","level":"junior","index":27}},{"question":"Which route will catch `/docs/a/b/c`?","options":["`app/docs/[...slug]/page.tsx`","`app/docs/[slug]/page.tsx`","`app/docs/*/page.tsx`"],"answer":0,"explanation":"A catch-all segment `[...slug]` collects all following segments into an array. A regular `[slug]` matches exactly one segment. An optional catch-all `[[...slug]]` also matches `/docs` itself. Next.js doesn't support asterisks in folder names.","sources":[{"title":"Next.js: Dynamic Route Segments","url":"https://nextjs.org/docs/app/api-reference/file-conventions/dynamic-routes"}],"origin":{"topic":"nextjs","level":"junior","index":28}},{"question":"What do the `next build` and `next start` commands do?","options":["`build` creates the production build, `start` runs it","`build` starts the dev server, while `start` runs the project's tests","They're synonyms: `start` is the old name of `build`"],"answer":0,"explanation":"`next dev` is the development server with fast refresh. `next build` compiles the app, prerenders static routes and prints a report. `next start` runs the production server on the build output. For a static site there's `output: 'export'`.","sources":[{"title":"Next.js: Documentation","url":"https://nextjs.org/docs"},{"title":"Next.js: Self-Hosting","url":"https://nextjs.org/docs/app/guides/self-hosting"}],"origin":{"topic":"nextjs","level":"junior","index":29}},{"question":"Which bundler does Next.js 16 use by default for `next dev` and `next build`?","options":["Turbopack, without extra flags","Webpack, as in previous versions","Vite, after switching from Webpack"],"answer":0,"explanation":"Since Next.js 16, Turbopack is stable and used by default in both modes - the `--turbopack` flag is no longer needed. You can go back to Webpack with the `--webpack` flag. If the project has a custom `webpack` config, `next build` without the flag fails so that the config isn't silently ignored.","sources":[{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"},{"title":"Next.js: Turbopack","url":"https://nextjs.org/docs/app/api-reference/turbopack"}],"origin":{"topic":"nextjs","level":"junior","index":30}},{"question":"In Next.js 16, what is the file formerly called `middleware.ts` named?","options":["`proxy.ts`","`interceptor.ts`","`gateway.ts`"],"answer":0,"explanation":"The `middleware` convention is deprecated and renamed to `proxy` to emphasize its role at the network boundary (redirects, rewrites, headers). The exported function is also called `proxy`. Proxy runs in the Node.js runtime; the edge runtime isn't supported there.","sources":[{"title":"Next.js: Proxy (formerly Middleware)","url":"https://nextjs.org/docs/app/getting-started/proxy"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"junior","index":31}},{"question":"How do you redirect the user to `/login` from a server component?","options":["Call `redirect('/login')` from `next/navigation`","Call `router.push('/login')` from `useRouter`","Return `<Navigate to=\"/login\" />` from the component"],"answer":0,"explanation":"`redirect()` works in server components, Server Functions and Route Handlers. It throws a special exception, so code after it doesn't run, and you must not wrap it in `try/catch`. `useRouter` is available only in client components, and `<Navigate>` is from React Router.","sources":[{"title":"Next.js: redirect","url":"https://nextjs.org/docs/app/api-reference/functions/redirect"}],"origin":{"topic":"nextjs","level":"junior","index":32}},{"question":"How do you get the `?page=2` query parameter in a server page?","options":["From the `searchParams` prop: `const { page } = await searchParams`","Via `useSearchParams()` directly in the server page","Via `params.page` - the query goes into `params`"],"answer":0,"explanation":"The page receives `searchParams` as a promise. Reading the query makes the page dynamic, because the values are known only at request time. In client components, use `useSearchParams()`. `params` contains only the dynamic path segments.","sources":[{"title":"Next.js: page.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/page"},{"title":"Next.js: useSearchParams","url":"https://nextjs.org/docs/app/api-reference/functions/use-search-params"}],"origin":{"topic":"nextjs","level":"junior","index":33}},{"question":"How do you load data in a server component?","options":["Make the component `async` and call `await fetch()` or a DB query","Only via `useEffect` and `useState`, as in client React","Only via a Route Handler and a request to it from the client"],"answer":0,"explanation":"Server components can be async and access data directly - APIs, ORMs, the file system - without sending secrets to the browser. Calling your own Route Handler from a server component is an unnecessary network round trip. Hooks aren't available in server components.","sources":[{"title":"Next.js: Fetching Data","url":"https://nextjs.org/docs/app/getting-started/fetching-data"},{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"}],"origin":{"topic":"nextjs","level":"junior","index":34}},{"question":"Where do you import global CSS in the App Router?","options":["In the root `app/layout.tsx` via `import`","In each `page.tsx` separately via `import`","Only via a `<link>` tag in `public/index.html`"],"answer":0,"explanation":"Global styles are imported in the root layout and apply to all routes. For component styles, use CSS Modules (`*.module.css`), Tailwind or CSS-in-JS with RSC support. Next.js has no `index.html` file.","sources":[{"title":"Next.js: CSS","url":"https://nextjs.org/docs/app/getting-started/css"}],"origin":{"topic":"nextjs","level":"junior","index":35}},{"question":"Where does a `console.log` from a server component appear?","options":["In the terminal where the Next.js server is running","In the user's browser console","Nowhere: logging is disabled in server components"],"answer":0,"explanation":"A server component runs on the server (or at build time), so its logs go to the Node.js process output. In development, Next.js may mirror server logs to the browser for convenience, but the code still runs on the server.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"}],"origin":{"topic":"nextjs","level":"junior","index":36}},{"question":"What do you pass to `<Image>` for an image that stretches over the whole parent block?","options":["The `fill` prop, with `position: relative` on the parent","`width=\"100%\"` and `height=\"100%\"` as strings","Nothing: `<Image>` fills its parent by default"],"answer":0,"explanation":"When dimensions aren't known in advance, use `fill`: the image is absolutely positioned and fills the parent, which must be `relative`, `absolute` or `fixed`. `sizes` hints how wide the image will be so the browser doesn't download a file that's too large. Fitting is controlled with `object-fit`.","sources":[{"title":"Next.js: <Image>","url":"https://nextjs.org/docs/app/api-reference/components/image"}],"origin":{"topic":"nextjs","level":"junior","index":37}},{"question":"How do you lazy-load a heavy client component in Next.js?","options":["With `next/dynamic` (or `React.lazy` + `Suspense`)","With a `lazy` attribute on the component in JSX","With `import` inside `useEffect`, storing it in state"],"answer":0,"explanation":"`const Chart = dynamic(() => import('./Chart'))` moves the code into a separate chunk and lets you specify `loading`. The `ssr: false` option disables server rendering but can be used only in client components. Server components don't end up in the bundle anyway.","sources":[{"title":"Next.js: Lazy Loading","url":"https://nextjs.org/docs/app/guides/lazy-loading"}],"origin":{"topic":"nextjs","level":"junior","index":38}},{"question":"Why load third-party scripts via `next/script`?","options":["You can choose a loading strategy (`afterInteractive`, `lazyOnload`, etc.)","Only then will scripts work in the production build","`next/script` automatically rewrites the script in TypeScript"],"answer":0,"explanation":"The `<Script>` component lets you avoid blocking page load with analytics and widgets: `beforeInteractive` for critical scripts, `afterInteractive` (the default) and `lazyOnload` for secondary ones. A script loads once even when navigating between pages.","sources":[{"title":"Next.js: <Script>","url":"https://nextjs.org/docs/app/api-reference/components/script"}],"origin":{"topic":"nextjs","level":"junior","index":39}},{"question":"How do you build a Next.js app into a set of static files without a Node.js server?","options":["Set `output: 'export'` in `next.config`","Run `next start --static`","Delete the `app` folder and keep only `public`"],"answer":0,"explanation":"A static export puts HTML, CSS and JS into the `out` folder, which you can host on any static hosting. Limitations: features that need a server don't work - `cookies()`, dynamic Route Handlers, ISR, default image optimization, Server Functions.","sources":[{"title":"Next.js: Static Exports","url":"https://nextjs.org/docs/app/guides/static-exports"}],"origin":{"topic":"nextjs","level":"junior","index":40}},{"question":"What happens if `app/dashboard/` contains both `page.tsx` and `route.ts`?","options":["A build error: these files conflict over the same URL","GET requests go to `route.ts`, the rest to `page.tsx`","The page renders, and `route.ts` is ignored"],"answer":0,"explanation":"Both files claim the same URL, and Next.js reports a conflict. API routes are usually moved into a separate branch, e.g. `app/api/...`.","sources":[{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"}],"origin":{"topic":"nextjs","level":"junior","index":41}},{"question":"How does `template.tsx` differ from `layout.tsx`?","options":["A template remounts on every navigation, a layout persists","A template renders only on the server, a layout only on the client","A template is used only for email templates"],"answer":0,"explanation":"A template wraps pages like a layout but gets a unique key on each navigation: state resets and effects run again. This is useful, for example, for enter animations or logging page views. In most cases a layout is enough.","sources":[{"title":"Next.js: template.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/template"}],"origin":{"topic":"nextjs","level":"junior","index":42}},{"question":"Can you use the `useState` and `useEffect` hooks in a server component?","options":["No: server components have no state or effects","Yes, but only `useState`, not `useEffect`","Yes, if the component is declared as an `async` function"],"answer":0,"explanation":"A server component runs once to produce a result and doesn't \"live\" afterwards. State, effects and event handlers are client features. A server component can render a client component and pass it data via props.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"react.dev: Server Components","url":"https://react.dev/reference/rsc/server-components"}],"origin":{"topic":"nextjs","level":"junior","index":43}},{"question":"When does `<Link>` prefetch a route?","options":["When the link enters the viewport (in production)","Only after the link is clicked, as with normal navigation","Right when the app loads - every route of the site"],"answer":0,"explanation":"Prefetching makes navigation instant. It's disabled in dev mode, so check navigation speed on a production build. The behavior is configured with the `prefetch` prop (`false`, `true`, `'auto'`). In Next.js 16 prefetching became incremental: shared layouts are downloaded once.","sources":[{"title":"Next.js: <Link>","url":"https://nextjs.org/docs/app/api-reference/components/link"},{"title":"Next.js: Prefetching","url":"https://nextjs.org/docs/app/guides/prefetching"}],"origin":{"topic":"nextjs","level":"junior","index":44}},{"question":"Will state in a sidebar inside a shared layout survive navigation between pages?","options":["Yes: a shared layout doesn't remount during navigation","No: every navigation remounts the whole tree","Only if the sidebar is wrapped in `React.memo` or `useMemo`"],"answer":0,"explanation":"Next.js renders only the changed segments, while shared layouts stay mounted: typed text, open menus and scroll position are preserved. If you need a reset on navigation, use `template.tsx` or `key`.","sources":[{"title":"Next.js: Linking and Navigating","url":"https://nextjs.org/docs/app/getting-started/linking-and-navigating"},{"title":"Next.js: Layouts and Pages","url":"https://nextjs.org/docs/app/getting-started/layouts-and-pages"}],"origin":{"topic":"nextjs","level":"junior","index":45}},{"question":"How do you type the props of `app/blog/[slug]/page.tsx` in Next.js 16?","options":["With the global helper `PageProps<'/blog/[slug]'>`","With `NextPage<{ slug: string }>` from `next`","Typing page props isn't possible"],"answer":0,"explanation":"Next.js generates route types (during `next dev`, `next build` or `next typegen`), and the `PageProps`, `LayoutProps` and `RouteContext` helpers know the `params` shape for each path. `NextPage` is a Pages Router type.","sources":[{"title":"Next.js: page.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/page"},{"title":"Next.js: TypeScript","url":"https://nextjs.org/docs/app/api-reference/config/typescript"}],"origin":{"topic":"nextjs","level":"junior","index":46}},{"question":"What is the minimum Node.js version required for Next.js 16?","options":["20.9","16.0","18.0"],"answer":0,"explanation":"Next.js 16 requires Node.js 20.9+ (LTS); Node.js 18 support was dropped. Requirements for TypeScript (5.1+) and browsers (Chrome/Edge/Firefox 111+, Safari 16.4+) also went up.","sources":[{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"junior","index":47}},{"question":"Can you use CSS Modules in Next.js without extra configuration?","options":["Yes: `*.module.css` files are supported out of the box","No: you have to install and configure `css-loader`","Only in the Pages Router; the App Router doesn't support them"],"answer":0,"explanation":"`import styles from './Button.module.css'` and `className={styles.primary}` - class names become locally scoped. Sass (after installing the `sass` package), Tailwind and global CSS are supported too.","sources":[{"title":"Next.js: CSS","url":"https://nextjs.org/docs/app/getting-started/css"}],"origin":{"topic":"nextjs","level":"junior","index":48}},{"question":"What title does the page get with `export const metadata = { title: 'Profile' }` in the page and `title: { template: '%s | Shop', default: 'Shop' }` in the layout?","options":["`Profile | Shop`","`Shop | Profile`","`Profile` without the template"],"answer":0,"explanation":"`title.template` from the layout is applied to titles of child segments: `%s` is replaced with the page's `title`. `default` is used if a child segment doesn't set a title. This saves you from repeating the site name on every page.","sources":[{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"},{"title":"Next.js: generateMetadata","url":"https://nextjs.org/docs/app/api-reference/functions/generate-metadata"}],"origin":{"topic":"nextjs","level":"junior","index":49}},{"question":"How does a client component read the `[slug]` segment of the current URL?","code":"'use client'\nimport { useParams } from 'next/navigation'\n\nexport function ShareButton() {\n const { slug } = useParams<{ slug: string }>()\n}","options":["With the `useParams` hook from `next/navigation`","Client components can't access route params at all","By reading `window.params`"],"answer":0,"explanation":"Pages and layouts get `params` as a prop (a Promise in Next.js 16), while deeply nested client components can call `useParams()` instead of receiving params through props.","sources":[{"title":"Next.js: useParams","url":"https://nextjs.org/docs/app/api-reference/functions/use-params"}],"origin":{"topic":"nextjs","level":"junior","index":50}},{"question":"How do you generate `sitemap.xml` in the App Router?","code":"// app/sitemap.ts\nimport type { MetadataRoute } from 'next'\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n return [{ url: 'https://acme.com', lastModified: new Date() }]\n}","options":["Add `app/sitemap.ts` (or a static `sitemap.xml`) that returns the list of URLs","Install a plugin; Next.js has no built-in support","Put the URLs into `metadata.sitemap` in the root layout"],"answer":0,"explanation":"`sitemap` is a special metadata file. Next.js serves it at `/sitemap.xml`; the function can fetch URLs from a database or CMS.","sources":[{"title":"Next.js: sitemap.xml","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap"}],"origin":{"topic":"nextjs","level":"junior","index":51}},{"question":"Which file controls the `/robots.txt` response?","options":["`app/robots.ts` (or a static `app/robots.txt`)","`public/robots.json`","The `robots` key in `package.json`"],"answer":0,"explanation":"`robots.ts` returns an object of type `MetadataRoute.Robots` with `rules` and an optional `sitemap` URL, so you can vary rules per environment.","sources":[{"title":"Next.js: robots.txt","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots"}],"origin":{"topic":"nextjs","level":"junior","index":52}},{"question":"How do you set the site favicon in the App Router?","options":["Place `favicon.ico` (or `icon.png`) in the `app/` folder - Next.js adds the `<link>` tags automatically","Add `<link rel=\"icon\">` manually to every page","Set `favicon` in `next.config.ts`"],"answer":0,"explanation":"Icon files are metadata file conventions. `icon` and `apple-icon` can also be generated in code with `icon.tsx`.","sources":[{"title":"Next.js: favicon, icon, and apple-icon","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons"}],"origin":{"topic":"nextjs","level":"junior","index":53}},{"question":"How does `permanentRedirect()` differ from `redirect()`?","options":["`permanentRedirect` returns 308 (permanent), `redirect` returns 307 (temporary)","`permanentRedirect` works only in the Pages Router","`redirect` also changes the URL in search engines forever"],"answer":0,"explanation":"Use a permanent redirect when a URL has moved for good (e.g. a renamed slug), so search engines transfer ranking to the new address.","sources":[{"title":"Next.js: permanentRedirect","url":"https://nextjs.org/docs/app/api-reference/functions/permanentRedirect"},{"title":"Next.js: redirect","url":"https://nextjs.org/docs/app/api-reference/functions/redirect"}],"origin":{"topic":"nextjs","level":"junior","index":54}},{"question":"How do you redirect the old `/blog/:slug` URLs to `/news/:slug` for every request, without code in pages?","code":"// next.config.ts\nasync redirects() {\n return [{ source: '/blog/:slug', destination: '/news/:slug', permanent: true }]\n}","options":["With `redirects()` in `next.config.ts`","By creating an empty page at every old URL","With a `<meta http-equiv=\"refresh\">` tag in the root layout"],"answer":0,"explanation":"Config redirects run before the filesystem routes are matched. For many dynamic redirects (e.g. from a database), use `proxy.ts` instead.","sources":[{"title":"Next.js: redirects (next.config)","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/redirects"},{"title":"Next.js: Redirecting","url":"https://nextjs.org/docs/app/guides/redirecting"}],"origin":{"topic":"nextjs","level":"junior","index":55}},{"question":"What happened to the `next lint` command in Next.js 16?","options":["It was removed - run ESLint (or Biome) directly, e.g. `eslint .` in a package script","It became the default type checker","It now runs automatically on every save"],"answer":0,"explanation":"`next build` also no longer runs the linter. `eslint-config-next` uses the flat config format.","sources":[{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"},{"title":"Next.js: ESLint","url":"https://nextjs.org/docs/app/api-reference/config/eslint"}],"origin":{"topic":"nextjs","level":"junior","index":56}},{"question":"Can the `app/` folder live inside `src/`?","options":["Yes - `src/app` is supported; config files like `next.config.ts` and `public/` stay at the project root","No - `app/` must always be at the root","Yes, but only with the Pages Router"],"answer":0,"explanation":"The `src` folder separates application code from config files. If `app/` exists at the root too, the root one wins and `src/app` is ignored.","sources":[{"title":"Next.js: src folder","url":"https://nextjs.org/docs/app/api-reference/file-conventions/src-folder"}],"origin":{"topic":"nextjs","level":"junior","index":57}},{"question":"When should you use `router.push()` instead of `<Link>`?","options":["For navigation that happens in code, e.g. after a form saves successfully","Always - `<Link>` is deprecated","For external links to other sites"],"answer":0,"explanation":"`<Link>` renders a real `<a>`, supports prefetching and opening in a new tab. Use `useRouter` only when there is no clickable link to render.","sources":[{"title":"Next.js: useRouter","url":"https://nextjs.org/docs/app/api-reference/functions/use-router"},{"title":"Next.js: Linking and Navigating","url":"https://nextjs.org/docs/app/getting-started/linking-and-navigating"}],"origin":{"topic":"nextjs","level":"junior","index":58}},{"question":"What does the `replace` prop do on `<Link>`?","code":"<Link href=\"/step-2\" replace>Next</Link>","options":["Replaces the current history entry instead of adding a new one","Replaces the page content without changing the URL","Opens the link in the same tab instead of a new one"],"answer":0,"explanation":"With `replace`, the browser's Back button skips the replaced page - handy for wizards or tab filters that shouldn't fill the history.","sources":[{"title":"Next.js: <Link>","url":"https://nextjs.org/docs/app/api-reference/components/link"}],"origin":{"topic":"nextjs","level":"junior","index":59}},{"question":"What does `scroll={false}` on `<Link>` do?","options":["Keeps the current scroll position instead of scrolling to the top of the new page","Disables scrolling on the target page","Prevents the link from prefetching"],"answer":0,"explanation":"By default Next.js scrolls to the top of the new segment if it isn't visible. Disable it, e.g., for tabs that only change part of the page.","sources":[{"title":"Next.js: <Link>","url":"https://nextjs.org/docs/app/api-reference/components/link"}],"origin":{"topic":"nextjs","level":"junior","index":60}},{"question":"What is the `useLinkStatus` hook for?","code":"function Hint() {\n const { pending } = useLinkStatus()\n return <span className={pending ? 'spinner' : ''} />\n}","options":["Showing inline pending feedback inside a `<Link>` while its navigation completes","Checking if a URL returns 404","Counting how many times a link was clicked"],"answer":0,"explanation":"It must be used in a descendant of `<Link>`. Prefer `loading.tsx` and prefetching for instant navigations; the hook is a patch for slow transitions.","sources":[{"title":"Next.js: useLinkStatus","url":"https://nextjs.org/docs/app/api-reference/functions/use-link-status"}],"origin":{"topic":"nextjs","level":"junior","index":61}},{"question":"How do you handle `POST /api/posts` in a Route Handler?","code":"// app/api/posts/route.ts\nexport async function POST(request: Request) {\n const body = await request.json()\n return Response.json(body, { status: 201 })\n}","options":["Export an async function named `POST` from `route.ts`","Export a default function and check `request.method`","Create a file named `post.ts`"],"answer":0,"explanation":"Each HTTP method is a named export: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, `OPTIONS`. Unsupported methods get a 405 response.","sources":[{"title":"Next.js: route.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route"},{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"}],"origin":{"topic":"nextjs","level":"junior","index":62}},{"question":"Is the `alt` prop required on `next/image`?","options":["Yes - it describes the image for screen readers; use `alt=\"\"` for purely decorative images","No, Next.js generates it from the file name","Only for remote images"],"answer":0,"explanation":"`alt` is a required prop of `<Image>`. An empty string tells assistive technology to skip a decorative image.","sources":[{"title":"Next.js: <Image>","url":"https://nextjs.org/docs/app/api-reference/components/image"}],"origin":{"topic":"nextjs","level":"junior","index":63}},{"question":"Which `.env` file is meant for local secrets and should not be committed?","options":["`.env.local`","`.env`","`.env.production`"],"answer":0,"explanation":"`.env.local` overrides the defaults from `.env` and is normally in `.gitignore`. `.env` and `.env.production` hold non-secret defaults that can be committed.","sources":[{"title":"Next.js: Environment Variables","url":"https://nextjs.org/docs/app/guides/environment-variables"}],"origin":{"topic":"nextjs","level":"junior","index":64}},{"question":"Why does `export const metadata` in a `'use client'` page cause an error?","options":["Metadata exports are supported only in server components","`metadata` must be named `meta` in client files","Client pages cannot have a title"],"answer":0,"explanation":"Keep the page a server component and move interactive parts into a separate client component, or set the title in a parent layout.","sources":[{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"},{"title":"Next.js: generateMetadata","url":"https://nextjs.org/docs/app/api-reference/functions/generate-metadata"}],"origin":{"topic":"nextjs","level":"junior","index":65}},{"question":"Which pages does `app/dashboard/layout.tsx` wrap?","options":["All pages under `/dashboard`, including nested segments like `/dashboard/settings`","Only `/dashboard` itself","Every page in the app"],"answer":0,"explanation":"Layouts nest: the root layout wraps the dashboard layout, which wraps every page below it. Nested segments can add their own layouts.","sources":[{"title":"Next.js: Layouts and Pages","url":"https://nextjs.org/docs/app/getting-started/layouts-and-pages"},{"title":"Next.js: layout.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/layout"}],"origin":{"topic":"nextjs","level":"junior","index":66}},{"question":"Where do you set `themeColor` in Next.js 16?","code":"export const viewport = { themeColor: '#0f172a' }","options":["In the `viewport` export (or `generateViewport`), not in `metadata`","In `next.config.ts`","In `manifest.json` only"],"answer":0,"explanation":"Viewport-related fields (`themeColor`, `colorScheme`, `width`) moved out of `metadata` into a separate `viewport` export.","sources":[{"title":"Next.js: generateViewport","url":"https://nextjs.org/docs/app/api-reference/functions/generate-viewport"}],"origin":{"topic":"nextjs","level":"junior","index":67}},{"question":"How do you add a web app manifest for a PWA?","options":["Add `app/manifest.ts` (or a static `manifest.json`) to the `app` folder","Next.js does not support manifests","Put a `manifest` field into `package.json`"],"answer":0,"explanation":"`manifest.ts` returns `MetadataRoute.Manifest` with the name, icons and colors, and Next.js adds the `<link rel=\"manifest\">` tag.","sources":[{"title":"Next.js: manifest.json","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest"}],"origin":{"topic":"nextjs","level":"junior","index":68}},{"question":"Do you need `'use client'` at the top of every client component file?","options":["No - only at the boundary; modules imported from a client file become part of the client bundle","Yes, every file with JSX needs it","Yes, otherwise the component renders twice"],"answer":0,"explanation":"`'use client'` marks the entry point from server to client. Adding it everywhere isn't harmful but makes it harder to see where the boundary is.","sources":[{"title":"Next.js: 'use client'","url":"https://nextjs.org/docs/app/api-reference/directives/use-client"},{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"}],"origin":{"topic":"nextjs","level":"junior","index":69}},{"question":"How do you add JSON-LD structured data to a page?","code":"<script\n type=\"application/ld+json\"\n dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\\\u003c') }}\n/>","options":["Render a `<script type=\"application/ld+json\">` with the serialized data in the page component","Put it into `metadata.jsonLd`","Search engines read JSON-LD only from `public/`"],"answer":0,"explanation":"Escaping `<` prevents XSS through the injected JSON. Types from `schema-dts` help keep the data valid.","sources":[{"title":"Next.js: JSON-LD","url":"https://nextjs.org/docs/app/guides/json-ld"}],"origin":{"topic":"nextjs","level":"junior","index":70}},{"question":"How does a server component read a request header like `user-agent`?","code":"import { headers } from 'next/headers'\n\nconst ua = (await headers()).get('user-agent')","options":["Await `headers()` from `next/headers` and call `.get()`","Read `window.navigator.userAgent`","Headers are only available in Route Handlers"],"answer":0,"explanation":"`headers()` is async in Next.js 16 and returns read-only headers. Using it makes the route render at request time.","sources":[{"title":"Next.js: headers","url":"https://nextjs.org/docs/app/api-reference/functions/headers"}],"origin":{"topic":"nextjs","level":"junior","index":71}},{"question":"What does `export const dynamicParams = false` do on a page with `generateStaticParams` (without Cache Components)?","options":["Params not returned by `generateStaticParams` return a 404 instead of being rendered on demand","It disables all dynamic routes in the app","It makes `params` synchronous"],"answer":0,"explanation":"By default unknown params are rendered on demand and cached. `dynamicParams` is not available when Cache Components are enabled.","sources":[{"title":"Next.js: dynamicParams","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/dynamicParams"},{"title":"Next.js: generateStaticParams","url":"https://nextjs.org/docs/app/api-reference/functions/generate-static-params"}],"origin":{"topic":"nextjs","level":"junior","index":72}},{"question":"How do you serve the whole app under `/docs` (e.g. `acme.com/docs`)?","options":["Set `basePath: '/docs'` in `next.config.ts`","Move all pages into `app/docs/` and nothing else","Use `assetPrefix` only"],"answer":0,"explanation":"`basePath` is applied automatically to `<Link>` and `router.push`. It's set at build time and can't change without rebuilding.","sources":[{"title":"Next.js: basePath","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath"}],"origin":{"topic":"nextjs","level":"junior","index":73}},{"question":"Which `next/script` strategy loads a script during browser idle time, e.g. a chat widget?","options":["`lazyOnload`","`beforeInteractive`","`afterInteractive`"],"answer":0,"explanation":"`afterInteractive` (the default) loads right after hydration starts; `beforeInteractive` is for critical scripts before any Next.js code. Low-priority widgets fit `lazyOnload`.","sources":[{"title":"Next.js: <Script>","url":"https://nextjs.org/docs/app/api-reference/components/script"}],"origin":{"topic":"nextjs","level":"junior","index":74}},{"question":"What is the main goal of automated tests?","options":["To give confidence that the code works and keeps working after changes","To prove that the code has no bugs at all","To replace code review"],"answer":0,"explanation":"Tests can show the presence of bugs, not their absence. Their value is fast feedback and safe refactoring: if behaviour breaks, a test fails before users notice.","sources":[{"title":"Kent C. Dodds: Write tests. Not too many. Mostly integration.","url":"https://kentcdodds.com/blog/write-tests"},{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":0}},{"question":"What does a unit test check?","options":["A small isolated piece of code - a function, a hook or a component - on its own","The whole application in a real browser","How fast the server responds under load"],"answer":0,"explanation":"Unit tests are fast and pinpoint the failing place. Their limit: they don't show whether the pieces work together.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":1}},{"question":"What does an integration test check?","options":["That several units work correctly together, e.g. a form with validation and an API call","Only one pure function with mocked arguments","Only the visual appearance of a page"],"answer":0,"explanation":"In frontend, an integration test usually renders a feature (several components, state, router) and mocks only the network boundary.","sources":[{"title":"Kent C. Dodds: The Testing Trophy and Testing Classifications","url":"https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications"},{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":2}},{"question":"What is an end-to-end (E2E) test?","options":["A test that drives the real app in a browser the way a user would, through UI, API and database","A test of the first and last function in a file","A unit test that runs at the end of the CI pipeline"],"answer":0,"explanation":"E2E tests give the most confidence but are slower and more fragile. Typical tools: Playwright and Cypress.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"},{"title":"Playwright","url":"https://playwright.dev/docs/intro"}],"origin":{"topic":"testing","level":"junior","index":3}},{"question":"What does the classic test pyramid recommend?","options":["Many fast unit tests, fewer integration tests and only a few E2E tests","Mostly E2E tests because they are closest to users","Equal numbers of tests at every level"],"answer":0,"explanation":"The higher the level, the slower, more expensive and flakier the tests. The pyramid shape keeps the suite fast while still checking critical flows end to end.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":4}},{"question":"What does the “testing trophy” by Kent C. Dodds put the most weight on?","options":["Integration tests, on top of a base of static analysis (TypeScript, ESLint)","Snapshot tests","Manual testing"],"answer":0,"explanation":"“Write tests. Not too many. Mostly integration.” In UI code integration tests give the best ratio of confidence to cost.","sources":[{"title":"Kent C. Dodds: The Testing Trophy and Testing Classifications","url":"https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications"},{"title":"Kent C. Dodds: Write tests. Not too many. Mostly integration.","url":"https://kentcdodds.com/blog/write-tests"}],"origin":{"topic":"testing","level":"junior","index":5}},{"question":"Which layer of the testing trophy catches typos and wrong types before tests even run?","options":["Static analysis: TypeScript and ESLint","E2E tests","Snapshot tests"],"answer":0,"explanation":"Static tools give instant feedback in the editor and cost almost nothing per check.","sources":[{"title":"Kent C. Dodds: The Testing Trophy and Testing Classifications","url":"https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications"}],"origin":{"topic":"testing","level":"junior","index":6}},{"question":"What is a regression?","options":["A bug in functionality that used to work","A test that is too slow","A new feature added without tests"],"answer":0,"explanation":"A good habit: when fixing a bug, first write a test that reproduces it. The test fails, the fix makes it pass, and the bug can't silently come back.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":7}},{"question":"What does the Arrange–Act–Assert (AAA) pattern describe?","options":["Test structure: prepare data, perform the action, check the result","The order in which test files are run","Three kinds of assertions in Jest"],"answer":0,"explanation":"The same idea is called Given–When–Then in BDD. A clear structure makes tests easy to read and keeps each test focused on one behaviour.","sources":[{"title":"Martin Fowler: Given When Then","url":"https://martinfowler.com/bliki/GivenWhenThen.html"}],"origin":{"topic":"testing","level":"junior","index":8}},{"question":"What should a test check - behaviour or implementation details?","options":["Behaviour visible to the user or caller, so refactoring doesn't break tests","Internal state and private methods, to be as precise as possible","The exact number of re-renders"],"answer":0,"explanation":"Tests tied to implementation details fail on safe refactors (false negatives) and can pass when the user-visible result is broken (false positives).","sources":[{"title":"Kent C. Dodds: Testing Implementation Details","url":"https://kentcdodds.com/blog/testing-implementation-details"},{"title":"Testing Library: Guiding Principles","url":"https://testing-library.com/docs/guiding-principles"}],"origin":{"topic":"testing","level":"junior","index":9}},{"question":"What does test coverage measure?","options":["Which share of the code (lines, branches, functions) ran during the tests","How many bugs the tests found","How many requirements are covered by tests"],"answer":0,"explanation":"Coverage shows untested code but not test quality: a test without assertions still increases coverage.","sources":[{"title":"Martin Fowler: Test Coverage","url":"https://martinfowler.com/bliki/TestCoverage.html"},{"title":"Vitest: Coverage","url":"https://vitest.dev/guide/coverage"}],"origin":{"topic":"testing","level":"junior","index":10}},{"question":"Is 100% coverage a good goal on its own?","options":["No: it is expensive and doesn't guarantee meaningful checks; cover important behaviour first","Yes: below 100% the code can't be released","Yes: 100% coverage means there are no bugs"],"answer":0,"explanation":"Martin Fowler: coverage is useful for finding untested code, but a poor target. High coverage with weak assertions gives false confidence.","sources":[{"title":"Martin Fowler: Test Coverage","url":"https://martinfowler.com/bliki/TestCoverage.html"}],"origin":{"topic":"testing","level":"junior","index":11}},{"question":"What are Jest and Vitest?","options":["JavaScript test runners: they find test files, run them and report results, with assertions and mocks built in","Libraries for rendering React components in the browser","Tools for E2E testing in a real browser"],"answer":0,"explanation":"Vitest is built on Vite and reuses its config and transforms; its API is largely compatible with Jest (`describe`, `it`, `expect`, mocks).","sources":[{"title":"Jest: Getting Started","url":"https://jestjs.io/docs/getting-started"},{"title":"Vitest: Getting Started","url":"https://vitest.dev/guide/"},{"title":"Vitest: Comparisons with Other Test Runners","url":"https://vitest.dev/guide/comparisons"}],"origin":{"topic":"testing","level":"junior","index":12}},{"question":"Which files does Jest pick up as tests by default?","options":["Files ending in `.test.js` / `.spec.js` (and ts/jsx/tsx) and files in `__tests__` folders","Only files in the `tests/` folder at the project root","Every `.js` file in the project"],"answer":0,"explanation":"The default is set by `testMatch`. Vitest uses a similar `include` pattern: `**/*.{test,spec}.?(c|m)[jt]s?(x)`.","sources":[{"title":"Jest: Configuring Jest","url":"https://jestjs.io/docs/configuration"},{"title":"Vitest: Getting Started","url":"https://vitest.dev/guide/"}],"origin":{"topic":"testing","level":"junior","index":13}},{"question":"What do `describe` and `it` (`test`) do?","options":["`describe` groups related tests, `it`/`test` declares one test case","`describe` runs tests in parallel, `it` runs them sequentially","`describe` is for unit tests, `it` is for integration tests"],"answer":0,"explanation":"`it` and `test` are aliases. Groups can have their own `beforeEach`/`afterEach` hooks.","sources":[{"title":"Jest: Getting Started","url":"https://jestjs.io/docs/getting-started"},{"title":"Jest: Setup and Teardown","url":"https://jestjs.io/docs/setup-teardown"}],"origin":{"topic":"testing","level":"junior","index":14}},{"question":"What is the difference between `toBe` and `toEqual`?","code":"expect({ a: 1 }).toBe({ a: 1 }); // ?\nexpect({ a: 1 }).toEqual({ a: 1 }); // ?","options":["`toBe` compares with `Object.is` (same reference), `toEqual` compares contents recursively - the first fails, the second passes","Both pass: they are synonyms","Both fail: objects can't be compared"],"answer":0,"explanation":"Use `toBe` for primitives and identity checks, `toEqual` for objects and arrays.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":15}},{"question":"How does `toStrictEqual` differ from `toEqual`?","options":["It also checks `undefined` properties, sparse arrays and object types (class instances vs plain objects)","It compares by reference","It ignores the order of array elements"],"answer":0,"explanation":"`expect({ a: undefined, b: 2 }).toEqual({ b: 2 })` passes, but `toStrictEqual` fails.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":16}},{"question":"Why does this check fail and how do you fix it?","code":"expect(0.1 + 0.2).toBe(0.3);","options":["Floating-point arithmetic gives 0.30000000000000004; use `toBeCloseTo(0.3)`","`toBe` doesn't work with numbers; use `toEqual`","It doesn't fail"],"answer":0,"explanation":"`toBeCloseTo` compares with a given precision (2 decimal digits by default).","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":17}},{"question":"How do you check that a function throws an error?","code":"expect(() => parse(\"bad\")).toThrow(\"Invalid input\");","options":["Pass a function that calls the code, so `expect` can catch the error","Call `parse(\"bad\")` directly inside `expect`","Use `toBeFalsy()` on the result"],"answer":0,"explanation":"`expect(parse(\"bad\"))` would throw before `expect` gets control and the test would fail with that error instead of checking it.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":18}},{"question":"What does `.not` do in `expect(value).not.toBeNull()`?","options":["Inverts the matcher","Skips the assertion","Marks the test as expected to fail"],"answer":0,"explanation":"Any matcher can be negated: `.not.toContain`, `.not.toHaveBeenCalled` and so on.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":19}},{"question":"Which matcher checks that an array contains an element?","options":["`toContain`","`toHaveProperty`","`toMatch`"],"answer":0,"explanation":"`toContain` uses `===`; to find an object by contents use `toContainEqual`. `toMatch` is for strings and regexes, `toHaveProperty` for object keys.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":20}},{"question":"What is `beforeEach` used for?","options":["Running setup code before every test in the current scope, so each test starts from a clean state","Running code once before all tests in the file","Choosing the order in which tests run"],"answer":0,"explanation":"For one-time setup there is `beforeAll`; for cleanup - `afterEach` and `afterAll`.","sources":[{"title":"Jest: Setup and Teardown","url":"https://jestjs.io/docs/setup-teardown"}],"origin":{"topic":"testing","level":"junior","index":21}},{"question":"What do `it.only` and `it.skip` do?","options":["`only` runs just the marked tests in the file, `skip` excludes a test","`only` runs a test once, `skip` runs it without assertions","Both are used only in CI"],"answer":0,"explanation":"Handy while debugging, but don't commit `.only` - it silently disables the other tests. Vitest fails a CI run that contains `.only` (`allowOnly`), and linters have rules against it.","sources":[{"title":"Vitest: Test Filtering","url":"https://vitest.dev/guide/filtering"},{"title":"Jest: CLI Options","url":"https://jestjs.io/docs/cli"}],"origin":{"topic":"testing","level":"junior","index":22}},{"question":"How do you test an async function that returns a promise?","code":"test(\"loads user\", async () => {\n const user = await fetchUser(1);\n expect(user.name).toBe(\"Ann\");\n});","options":["Make the test `async` and `await` the result (or return the promise)","Nothing special is needed: Jest waits for all promises in the file","Wrap the call in `setTimeout`"],"answer":0,"explanation":"If the promise is neither awaited nor returned, the test ends before the assertion runs and passes falsely.","sources":[{"title":"Jest: Testing Asynchronous Code","url":"https://jestjs.io/docs/asynchronous"}],"origin":{"topic":"testing","level":"junior","index":23}},{"question":"How do you check that a promise rejects?","options":["`await expect(fetchUser(-1)).rejects.toThrow(\"Not found\")`","`expect(fetchUser(-1)).toThrow(\"Not found\")`","`expect(await fetchUser(-1)).toBeUndefined()`"],"answer":0,"explanation":"`.resolves`/`.rejects` unwrap the promise. Don't forget `await` (or `return`), otherwise the assertion isn't awaited.","sources":[{"title":"Jest: Testing Asynchronous Code","url":"https://jestjs.io/docs/asynchronous"}],"origin":{"topic":"testing","level":"junior","index":24}},{"question":"What does watch mode (`vitest` / `jest --watch`) do?","options":["Reruns tests related to changed files on every save","Records a video of the tests","Watches production for errors"],"answer":0,"explanation":"Vitest starts in watch mode by default in a terminal and uses Vite's module graph to rerun only affected tests.","sources":[{"title":"Vitest: Features","url":"https://vitest.dev/guide/features"},{"title":"Jest: CLI Options","url":"https://jestjs.io/docs/cli"}],"origin":{"topic":"testing","level":"junior","index":25}},{"question":"Why is it useful that each test is independent?","options":["Tests can run in any order or in parallel, and a failure points to one cause","It makes tests run in alphabetical order","It removes the need for `expect`"],"answer":0,"explanation":"Shared mutable state between tests causes order-dependent failures that are hard to debug. Reset state in `beforeEach`.","sources":[{"title":"Jest: Setup and Teardown","url":"https://jestjs.io/docs/setup-teardown"},{"title":"Martin Fowler: Eradicating Non-Determinism in Tests","url":"https://martinfowler.com/articles/nonDeterminism.html"}],"origin":{"topic":"testing","level":"junior","index":26}},{"question":"What is a good name for a test?","options":["One that describes the expected behaviour: “shows an error when the email is invalid”","`test1`, `test2` - short names are faster","The name of the function under test"],"answer":0,"explanation":"When a test fails in CI, its name is the first thing you read. It should tell what broke for the user.","sources":[{"title":"Kent C. Dodds: Avoid Nesting when you're Testing","url":"https://kentcdodds.com/blog/avoid-nesting-when-youre-testing"}],"origin":{"topic":"testing","level":"junior","index":27}},{"question":"Which environment do component tests usually run in under Jest/Vitest?","options":["jsdom or happy-dom - a DOM emulation in Node.js","A real Chrome window opened for each test","A plain Node.js environment without any DOM"],"answer":0,"explanation":"In Vitest it is set with `environment: \"jsdom\"`; in Jest - `testEnvironment: \"jsdom\"`. The emulation has no real layout or rendering.","sources":[{"title":"Vitest: Test Environment","url":"https://vitest.dev/guide/environment"},{"title":"Jest: Configuring Jest","url":"https://jestjs.io/docs/configuration"}],"origin":{"topic":"testing","level":"junior","index":28}},{"question":"What is a mock in testing?","options":["A fake replacement for a dependency that lets you control its behaviour and check how it was called","A test that always passes","A copy of the production database"],"answer":0,"explanation":"Strictly, “test doubles” are dummies, stubs, spies, mocks and fakes; in everyday speech all of them are called mocks.","sources":[{"title":"Martin Fowler: Test Double","url":"https://martinfowler.com/bliki/TestDouble.html"},{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"}],"origin":{"topic":"testing","level":"junior","index":29}},{"question":"What does `jest.fn()` / `vi.fn()` create?","options":["A mock function that records calls and arguments and can return configured values","A real copy of the function under test","A function that fails the test when called"],"answer":0,"explanation":"Typical use: pass it as a callback prop and check that it was called.","sources":[{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"},{"title":"Vitest: vi API","url":"https://vitest.dev/api/vi"}],"origin":{"topic":"testing","level":"junior","index":30}},{"question":"How do you check that a callback was called with specific arguments?","code":"const onSave = vi.fn();\nrender(<Form onSave={onSave} />);\n// ...user fills the form and submits","options":["`expect(onSave).toHaveBeenCalledWith({ name: \"Ann\" })`","`expect(onSave()).toBe({ name: \"Ann\" })`","`expect(onSave.called).toBe(true)`"],"answer":0,"explanation":"There is also `toHaveBeenCalledTimes(n)` and `toHaveBeenLastCalledWith(...)`.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"},{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"}],"origin":{"topic":"testing","level":"junior","index":31}},{"question":"How do you make a mock return a value?","options":["`mock.mockReturnValue(42)` (or `mockResolvedValue` for a promise)","`mock.return = 42`","`mock(42)`"],"answer":0,"explanation":"`mockReturnValueOnce` sets the value for one call only, and `mockImplementation(fn)` replaces the whole body.","sources":[{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"}],"origin":{"topic":"testing","level":"junior","index":32}},{"question":"What does `jest.spyOn(obj, \"method\")` / `vi.spyOn` do?","options":["Wraps an existing method to record calls; by default it still calls the original","Deletes the method from the object","Copies the object for the test"],"answer":0,"explanation":"Add `.mockImplementation(...)` to replace the behaviour, and restore the original with `mockRestore()` after the test.","sources":[{"title":"Jest: The Jest Object","url":"https://jestjs.io/docs/jest-object"},{"title":"Vitest: vi API","url":"https://vitest.dev/api/vi"}],"origin":{"topic":"testing","level":"junior","index":33}},{"question":"What is a stub?","options":["A double that returns prepared answers so the code under test can run","A double that fails the test if it is called","A real object connected to a test database"],"answer":0,"explanation":"Stubs feed data in; mocks are used to verify interactions (calls). Fakes are simplified working implementations, like an in-memory repository.","sources":[{"title":"Martin Fowler: Test Double","url":"https://martinfowler.com/bliki/TestDouble.html"},{"title":"Martin Fowler: Mocks Aren't Stubs","url":"https://martinfowler.com/articles/mocksArentStubs.html"}],"origin":{"topic":"testing","level":"junior","index":34}},{"question":"Why mock network requests in unit and integration tests?","options":["To make tests fast, deterministic and independent of a real server","Because `fetch` doesn't exist in Node.js","To hide bugs in the API"],"answer":0,"explanation":"A real backend can be slow, down or return different data. The real integration with the API is checked separately - by E2E or contract tests.","sources":[{"title":"MSW: Philosophy","url":"https://mswjs.io/docs/philosophy"},{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":35}},{"question":"What is MSW (Mock Service Worker)?","options":["A library that intercepts requests at the network level and answers with mock responses, in the browser and in Node.js","A service worker that caches the site for offline use","A Jest plugin for snapshot tests"],"answer":0,"explanation":"The app code keeps calling real `fetch`; MSW returns responses from handlers. The same handlers work in tests, Storybook and local development.","sources":[{"title":"Mock Service Worker: Docs","url":"https://mswjs.io/docs/"},{"title":"MSW: Philosophy","url":"https://mswjs.io/docs/philosophy"}],"origin":{"topic":"testing","level":"junior","index":36}},{"question":"What does `mockClear()` (or `vi.clearAllMocks()`) do?","options":["Resets recorded calls and results but keeps the configured implementation","Removes the mock and restores the original function","Deletes the test file"],"answer":0,"explanation":"Without clearing, calls from the previous test leak into the next one and `toHaveBeenCalledTimes` gives wrong numbers.","sources":[{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"},{"title":"Vitest: vi API","url":"https://vitest.dev/api/vi"}],"origin":{"topic":"testing","level":"junior","index":37}},{"question":"What is a risk of mocking too much?","options":["Tests pass while the real parts no longer fit together","Tests become too slow","Coverage drops to zero"],"answer":0,"explanation":"Every mock is an assumption about how the real dependency behaves. Mock the boundaries (network, time, randomness), not your own modules.","sources":[{"title":"Kent C. Dodds: Stop mocking fetch","url":"https://kentcdodds.com/blog/stop-mocking-fetch"},{"title":"Martin Fowler: Mocks Aren't Stubs","url":"https://martinfowler.com/articles/mocksArentStubs.html"}],"origin":{"topic":"testing","level":"junior","index":38}},{"question":"How do you make a test that uses `Math.random()` deterministic?","options":["Mock `Math.random` (e.g. `vi.spyOn(Math, \"random\").mockReturnValue(0.5)`) or inject the random source","Run the test several times and take the majority result","Mark it with `it.skip`"],"answer":0,"explanation":"Random values, current time and network are the usual sources of non-determinism. Fix them in tests.","sources":[{"title":"Vitest: vi API","url":"https://vitest.dev/api/vi"},{"title":"Martin Fowler: Eradicating Non-Determinism in Tests","url":"https://martinfowler.com/articles/nonDeterminism.html"}],"origin":{"topic":"testing","level":"junior","index":39}},{"question":"What is the main principle of Testing Library?","options":["“The more your tests resemble the way your software is used, the more confidence they can give you”","“Test every function separately”","“A component test should check its state and props”"],"answer":0,"explanation":"So tests find elements the way a user does - by role, label and text - and interact through events.","sources":[{"title":"Testing Library: Guiding Principles","url":"https://testing-library.com/docs/guiding-principles"}],"origin":{"topic":"testing","level":"junior","index":40}},{"question":"What does `render` from React Testing Library do?","options":["Renders a component into a container attached to `document.body` in the test environment","Takes a screenshot of the component","Renders the component to an HTML string on the server"],"answer":0,"explanation":"After each test RTL unmounts the component automatically (`cleanup`), if the runner exposes a global `afterEach`.","sources":[{"title":"React Testing Library: API","url":"https://testing-library.com/docs/react-testing-library/api"}],"origin":{"topic":"testing","level":"junior","index":41}},{"question":"Why use `screen` instead of queries returned by `render`?","options":["`screen` is bound to `document.body`, so you don't have to destructure queries from every `render`","`screen` is faster","Queries from `render` don't support `getByRole`"],"answer":0,"explanation":"Testing Library recommends `screen`: tests are shorter and you can add queries without changing the `render` line.","sources":[{"title":"Kent C. Dodds: Common mistakes with React Testing Library","url":"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library"},{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":42}},{"question":"Which query does Testing Library recommend first?","options":["`getByRole`","`getByTestId`","`container.querySelector`"],"answer":0,"explanation":"Priority: queries accessible to everyone (`ByRole`, `ByLabelText`, `ByPlaceholderText`, `ByText`, `ByDisplayValue`), then semantic (`ByAltText`, `ByTitle`), and only then `ByTestId`.","sources":[{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"},{"title":"Testing Library: ByRole","url":"https://testing-library.com/docs/queries/byrole"}],"origin":{"topic":"testing","level":"junior","index":43}},{"question":"How do you find the “Save” button?","options":["`screen.getByRole(\"button\", { name: \"Save\" })`","`screen.getByTestId(\"save\")`","`document.querySelector(\".btn-save\")`"],"answer":0,"explanation":"`name` is the accessible name: the button's text, `aria-label` or `aria-labelledby`. Such a query also checks that the button is accessible.","sources":[{"title":"Testing Library: ByRole","url":"https://testing-library.com/docs/queries/byrole"}],"origin":{"topic":"testing","level":"junior","index":44}},{"question":"What is the difference between `getBy`, `queryBy` and `findBy`?","options":["`getBy` throws if nothing is found, `queryBy` returns `null`, `findBy` returns a promise and waits for the element","They differ only in speed","`getBy` finds one element, `queryBy` all elements, `findBy` the first one"],"answer":0,"explanation":"Each also has an `All` version (`getAllBy`, …) that returns an array.","sources":[{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":45}},{"question":"How do you check that an element is NOT on the page?","options":["`expect(screen.queryByText(\"Error\")).not.toBeInTheDocument()`","`expect(screen.getByText(\"Error\")).toBeNull()`","`expect(screen.findByText(\"Error\")).toBeFalsy()`"],"answer":0,"explanation":"`getBy` would throw before the assertion runs, and `findBy` returns a promise, which is always truthy.","sources":[{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"},{"title":"Kent C. Dodds: Common mistakes with React Testing Library","url":"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library"}],"origin":{"topic":"testing","level":"junior","index":46}},{"question":"Which query should you use for an element that appears after data loads?","options":["`await screen.findByText(\"Ann\")`","`screen.getByText(\"Ann\")` immediately after `render`","`screen.queryByText(\"Ann\")` in a loop"],"answer":0,"explanation":"`findBy` retries the query until the element appears or the timeout (1000 ms by default) runs out.","sources":[{"title":"Testing Library: Async Methods","url":"https://testing-library.com/docs/dom-testing-library/api-async"},{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":47}},{"question":"Where do matchers like `toBeInTheDocument`, `toBeVisible` and `toHaveValue` come from?","options":["From `@testing-library/jest-dom`, connected in the test setup file","They are built into Jest","They are part of React"],"answer":0,"explanation":"Import `@testing-library/jest-dom` (or `@testing-library/jest-dom/vitest`) in a setup file. They give clearer error messages than manual DOM checks.","sources":[{"title":"jest-dom: custom matchers","url":"https://github.com/testing-library/jest-dom"}],"origin":{"topic":"testing","level":"junior","index":48}},{"question":"What is better for simulating user actions: `fireEvent` or `user-event`?","options":["`user-event`: it reproduces the whole chain of events a real user triggers (focus, keydown, input, click…)","`fireEvent`: it's closer to real behaviour","They are identical"],"answer":0,"explanation":"`fireEvent.click` dispatches one event. `userEvent.click` also moves the pointer, focuses and respects `disabled` and `pointer-events`.","sources":[{"title":"Testing Library: user-event","url":"https://testing-library.com/docs/user-event/intro"},{"title":"Testing Library: Firing Events","url":"https://testing-library.com/docs/dom-testing-library/api-events"}],"origin":{"topic":"testing","level":"junior","index":49}},{"question":"How do you type text into an input with user-event v14?","code":"const user = userEvent.setup();\nrender(<Login />);\nawait user.type(screen.getByLabelText(\"Email\"), \"ann@example.com\");","options":["As shown: create `user` with `setup()` and `await` the call","Call `userEvent.type` without `await` - it's synchronous","Set `input.value` directly"],"answer":0,"explanation":"In v14 all methods return promises. Setting `value` directly skips the events React listens to.","sources":[{"title":"Testing Library: user-event","url":"https://testing-library.com/docs/user-event/intro"}],"origin":{"topic":"testing","level":"junior","index":50}},{"question":"How do you find an input by its label?","code":"<label htmlFor=\"email\">Email</label>\n<input id=\"email\" />","options":["`screen.getByLabelText(\"Email\")`","`screen.getByText(\"Email\")`","`screen.getByRole(\"label\")`"],"answer":0,"explanation":"The query fails if the label isn't connected to the input - a useful accessibility check. `getByRole(\"textbox\", { name: \"Email\" })` works too.","sources":[{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":51}},{"question":"When is `getByTestId` appropriate?","options":["When an element can't be found by role, label or text - e.g. a decorative chart container","Always: it's the most reliable query","Never: it doesn't work with React"],"answer":0,"explanation":"A user doesn't see `data-testid`, so this query doesn't check accessibility. Keep it as a last resort.","sources":[{"title":"Testing Library: ByTestId","url":"https://testing-library.com/docs/queries/bytestid"},{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":52}},{"question":"What is wrong with this test?","code":"const { container } = render(<Counter />);\ncontainer.querySelector(\".increment\").click();\nexpect(container.querySelector(\".value\").textContent).toBe(\"1\");","options":["It depends on CSS classes (implementation details); find elements by role and text and use user-event","Nothing - it's the recommended style","`container` doesn't exist in RTL"],"answer":0,"explanation":"Renaming a class breaks the test although the user sees no change.","sources":[{"title":"Kent C. Dodds: Common mistakes with React Testing Library","url":"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library"},{"title":"Kent C. Dodds: Testing Implementation Details","url":"https://kentcdodds.com/blog/testing-implementation-details"}],"origin":{"topic":"testing","level":"junior","index":53}},{"question":"How do you check the result of clicking a counter button?","code":"const user = userEvent.setup();\nrender(<Counter />);\nawait user.click(screen.getByRole(\"button\", { name: \"+\" }));","options":["`expect(screen.getByText(\"Count: 1\")).toBeInTheDocument()`","`expect(Counter.state.count).toBe(1)`","`expect(useState).toHaveBeenCalledWith(1)`"],"answer":0,"explanation":"Check what the user sees, not the component's internal state.","sources":[{"title":"Testing Library: Guiding Principles","url":"https://testing-library.com/docs/guiding-principles"}],"origin":{"topic":"testing","level":"junior","index":54}},{"question":"What does `screen.debug()` do?","options":["Prints the current DOM to the console to see what the test “sees”","Opens the browser DevTools","Pauses the test"],"answer":0,"explanation":"There is also `screen.logTestingPlaygroundURL()` - it gives a link where you can pick the best query.","sources":[{"title":"Testing Library: Debugging","url":"https://testing-library.com/docs/dom-testing-library/api-debugging"}],"origin":{"topic":"testing","level":"junior","index":55}},{"question":"What does `toHaveBeenCalledTimes(1)` check on a prop callback after a click?","code":"const onClick = vi.fn();\nrender(<Button onClick={onClick}>Ok</Button>);\nawait userEvent.setup().click(screen.getByRole(\"button\"));\nexpect(onClick).toHaveBeenCalledTimes(1);","options":["That the component called the callback exactly once in response to the click","That the button was rendered once","That `onClick` is a function"],"answer":0,"explanation":"Passing a mock as a prop is the simplest way to test what a component reports to its parent.","sources":[{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"},{"title":"Testing Library: user-event","url":"https://testing-library.com/docs/user-event/intro"}],"origin":{"topic":"testing","level":"junior","index":56}},{"question":"What does a snapshot test do?","options":["Saves the serialized output on the first run and compares it on later runs","Takes a screenshot of the page in a real browser","Checks that the component renders in under 16 ms"],"answer":0,"explanation":"An intentional change is accepted with `-u` (update). Large snapshots are easy to approve without reading - prefer small, focused ones.","sources":[{"title":"Jest: Snapshot Testing","url":"https://jestjs.io/docs/snapshot-testing"},{"title":"Vitest: Snapshot","url":"https://vitest.dev/guide/snapshot"}],"origin":{"topic":"testing","level":"junior","index":57}},{"question":"Why do Testing Library queries by role also improve accessibility?","options":["If a test can't find an element by role and name, a screen reader probably can't either","Because they add ARIA attributes automatically","Because they run axe checks"],"answer":0,"explanation":"A `<div onClick>` instead of `<button>` has no `button` role, and such a test fails - prompting you to fix the markup.","sources":[{"title":"Testing Library: ByRole","url":"https://testing-library.com/docs/queries/byrole"},{"title":"MDN: ARIA","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA"}],"origin":{"topic":"testing","level":"junior","index":58}},{"question":"What are Playwright and Cypress used for?","options":["Writing E2E (and component) tests that drive a real browser","Unit testing pure functions in Node.js","Load testing APIs"],"answer":0,"explanation":"Both open the app, click, type and check the result like a user.","sources":[{"title":"Playwright","url":"https://playwright.dev/docs/intro"},{"title":"Cypress: Introduction to Cypress","url":"https://docs.cypress.io/app/core-concepts/introduction-to-cypress"}],"origin":{"topic":"testing","level":"junior","index":59}},{"question":"Which browsers can Playwright run tests in?","options":["Chromium, Firefox and WebKit (the engine behind Safari)","Only Chrome","Only browsers installed on the developer's machine"],"answer":0,"explanation":"Playwright downloads its own browser builds; one test file can run in all three via `projects` in the config.","sources":[{"title":"Playwright","url":"https://playwright.dev/docs/intro"},{"title":"Playwright: Projects","url":"https://playwright.dev/docs/test-projects"}],"origin":{"topic":"testing","level":"junior","index":60}},{"question":"What is the recommended way to find a button in Playwright?","options":["`page.getByRole(\"button\", { name: \"Sign in\" })`","`page.locator(\"#app > div:nth-child(3) > button\")`","`page.locator(\"xpath=//button[3]\")`"],"answer":0,"explanation":"User-facing locators survive markup changes; long CSS and XPath chains break on any refactor.","sources":[{"title":"Playwright: Locators","url":"https://playwright.dev/docs/locators"},{"title":"Playwright: Best Practices","url":"https://playwright.dev/docs/best-practices"}],"origin":{"topic":"testing","level":"junior","index":61}},{"question":"Do you need `sleep`/`waitForTimeout` before clicking in Playwright?","options":["No: actions wait automatically until the element is visible, stable, enabled and receives events","Yes: always wait a second before each click","Yes, but only in headless mode"],"answer":0,"explanation":"Fixed waits make tests slow and still flaky. Rely on auto-waiting and web-first assertions.","sources":[{"title":"Playwright: Auto-waiting","url":"https://playwright.dev/docs/actionability"},{"title":"Playwright: Best Practices","url":"https://playwright.dev/docs/best-practices"}],"origin":{"topic":"testing","level":"junior","index":62}},{"question":"What does `await expect(page.getByText(\"Saved\")).toBeVisible()` do in Playwright?","options":["Retries the check until the text becomes visible or the timeout expires","Checks once and fails immediately if the text isn't there","Takes a screenshot and compares it to a reference"],"answer":0,"explanation":"These are web-first assertions: they wait for the condition, so async UI doesn't need manual waits.","sources":[{"title":"Playwright: Assertions","url":"https://playwright.dev/docs/test-assertions"}],"origin":{"topic":"testing","level":"junior","index":63}},{"question":"What does headless mode mean?","options":["The browser runs without a visible window - the usual mode in CI","The tests run without assertions","The page is loaded without CSS"],"answer":0,"explanation":"Locally you can run Playwright with `--headed` or `--ui` to watch the test.","sources":[{"title":"Playwright","url":"https://playwright.dev/docs/intro"}],"origin":{"topic":"testing","level":"junior","index":64}},{"question":"How do you find an element in Cypress by a dedicated test attribute?","options":["`cy.get('[data-cy=\"submit\"]')`","`cy.find(\"submit\")`","`cy.select(\"#submit\")`"],"answer":0,"explanation":"Cypress recommends `data-cy`/`data-test` attributes: they don't change with styling. `cy.contains(\"Submit\")` searches by text.","sources":[{"title":"Cypress: Best Practices","url":"https://docs.cypress.io/app/core-concepts/best-practices"}],"origin":{"topic":"testing","level":"junior","index":65}},{"question":"Why should E2E tests be few and focused on key user flows?","options":["They are slow, expensive to maintain and more prone to flakiness","Because browsers limit the number of tests","Because E2E tests can't check forms"],"answer":0,"explanation":"Typical E2E candidates: sign-in, checkout, registration - flows where a break costs the most.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"},{"title":"Google Testing Blog: Just Say No to More End-to-End Tests","url":"https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html"}],"origin":{"topic":"testing","level":"junior","index":66}},{"question":"What is a flaky test?","options":["A test that sometimes passes and sometimes fails without code changes","A test that always fails","A test without assertions"],"answer":0,"explanation":"Common causes: timing and race conditions, shared state, real network, current time. Flaky tests destroy trust in the suite.","sources":[{"title":"Martin Fowler: Eradicating Non-Determinism in Tests","url":"https://martinfowler.com/articles/nonDeterminism.html"}],"origin":{"topic":"testing","level":"junior","index":67}},{"question":"What does `playwright codegen` do?","options":["Records your actions in a browser and generates test code with locators","Generates the app from tests","Converts Cypress tests into Playwright tests"],"answer":0,"explanation":"A good starting point; the generated code still needs meaningful assertions and cleanup.","sources":[{"title":"Playwright: Test generator","url":"https://playwright.dev/docs/codegen"}],"origin":{"topic":"testing","level":"junior","index":68}},{"question":"What is TDD (test-driven development)?","options":["Writing a failing test first, then the minimal code to pass it, then refactoring (red–green–refactor)","Writing tests after the release","Testing only with debugging tools"],"answer":0,"explanation":"TDD helps design small, testable units and gives a test for every requirement.","sources":[{"title":"Martin Fowler: Test Driven Development","url":"https://martinfowler.com/bliki/TestDrivenDevelopment.html"}],"origin":{"topic":"testing","level":"junior","index":69}},{"question":"Where do tests usually run automatically?","options":["In CI on every push or pull request, blocking the merge if they fail","Only on the developer's machine before release","In production on every request"],"answer":0,"explanation":"Fast tests (lint, types, unit) usually run first, slower E2E after them or in parallel.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":70}},{"question":"Which of these is the best candidate for a unit test?","options":["A pure function that formats prices with currency and rounding","The layout of a landing page","The whole checkout flow with payment"],"answer":0,"explanation":"Pure functions with many edge cases are cheap to test thoroughly with unit tests.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":71}},{"question":"What does `test.each` / `it.each` do?","code":"test.each([\n [1, 1, 2],\n [2, 3, 5],\n])(\"add(%i, %i) = %i\", (a, b, expected) => {\n expect(add(a, b)).toBe(expected);\n});","options":["Runs the same test with different data sets","Runs a test for each file in the folder","Repeats the test until it passes"],"answer":0,"explanation":"Parameterized tests remove copy-paste and make edge cases easy to add.","sources":[{"title":"Jest: Getting Started","url":"https://jestjs.io/docs/getting-started"},{"title":"Vitest: Getting Started","url":"https://vitest.dev/guide/"}],"origin":{"topic":"testing","level":"junior","index":72}},{"question":"What should a single test ideally check?","options":["One behaviour or scenario (it may still contain several related assertions)","Exactly one `expect`, never more","Everything the component can do, to save time"],"answer":0,"explanation":"One scenario per test makes failures easy to understand. Several assertions about the same result are fine.","sources":[{"title":"Kent C. Dodds: Avoid Nesting when you're Testing","url":"https://kentcdodds.com/blog/avoid-nesting-when-youre-testing"}],"origin":{"topic":"testing","level":"junior","index":73}},{"question":"Why doesn't this test catch a bug?","code":"test(\"saves\", () => {\n save(data).then((result) => {\n expect(result.ok).toBe(true);\n });\n});","options":["The promise isn't returned or awaited, so the test finishes before the assertion","`then` doesn't work in tests","`toBe` can't compare booleans"],"answer":0,"explanation":"Add `return` or make the test `async` and `await` the promise.","sources":[{"title":"Jest: Testing Asynchronous Code","url":"https://jestjs.io/docs/asynchronous"}],"origin":{"topic":"testing","level":"junior","index":74}},{"question":"What does the `expect.assertions(n)` call guarantee?","options":["That exactly n assertions ran in the test - useful for async code and callbacks","That the test has no more than n lines","That n tests ran in the file"],"answer":0,"explanation":"If an assertion inside a callback never runs, the test fails instead of passing silently.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":75}},{"question":"Which test is the right place to check that a form shows “Required” when submitted empty?","options":["A component/integration test with Testing Library","An E2E test only","A snapshot test of the form"],"answer":0,"explanation":"Validation is a UI behaviour that doesn't need a real backend: a fast RTL test covers it well.","sources":[{"title":"Kent C. Dodds: The Testing Trophy and Testing Classifications","url":"https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications"},{"title":"Testing Library: Guiding Principles","url":"https://testing-library.com/docs/guiding-principles"}],"origin":{"topic":"testing","level":"junior","index":76}},{"question":"Why test a custom hook through a component (or `renderHook`) rather than calling it directly?","options":["Hooks can only be called during React rendering","Calling hooks directly is faster but less precise","Hooks can't be imported in tests"],"answer":0,"explanation":"A direct call breaks the rules of hooks. `renderHook` renders a tiny test component around the hook.","sources":[{"title":"Testing Library: renderHook","url":"https://testing-library.com/docs/react-testing-library/api#renderhook"},{"title":"react.dev: Rules of Hooks","url":"https://react.dev/reference/rules/rules-of-hooks"}],"origin":{"topic":"testing","level":"junior","index":77}}],"plan":[{"topic":"javascript","count":13},{"topic":"typescript","count":13},{"topic":"react","count":18},{"topic":"nextjs","count":23},{"topic":"testing","count":8}],"intro":"You’ll get 75 questions from several topics: JavaScript - 13, TypeScript - 13, React - 18, Next.js - 23, Testing - 8. Every attempt picks a new set of questions and shuffles the options."}]] </article></body></html>

e:[["$","$L25",null,{"href":"/en","className":"self-start text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100","children":"← All topics"}],["$","$L32","en/stack/nextjs/junior",{"topic":"stack-nextjs","level":"junior","title":"Next.js Developer · Junior","questions":[{"question":"How many data types does JavaScript have according to the specification?","options":["8: seven primitives and `object`","6: `number`, `string`, `boolean`, `null`, `undefined`, `object`","3: primitives, objects and functions as a separate type"],"answer":0,"explanation":"Primitives: `number`, `bigint`, `string`, `boolean`, `null`, `undefined`, `symbol`. Everything else is `object`, including arrays, functions and dates. Functions are objects, even though `typeof` returns `'function'` for them.","sources":[{"title":"javascript.info: Data types","url":"https://javascript.info/types"},{"title":"MDN: JavaScript data types and data structures","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Data_structures"}],"origin":{"topic":"javascript","level":"junior","index":0}},{"question":"What does `typeof null` return?","options":["`'object'`","`'null'`","`'undefined'`"],"answer":0,"explanation":"It's a historical bug from the language's first implementation, kept for compatibility. `null` is a separate primitive. Check for it with strict equality: `value === null`.","sources":[{"title":"MDN: typeof","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof"},{"title":"javascript.info: Data types","url":"https://javascript.info/types"}],"origin":{"topic":"javascript","level":"junior","index":1}},{"question":"What does `typeof NaN` return?","options":["`'number'`","`'NaN'`","`'undefined'`"],"answer":0,"explanation":"`NaN` (Not-a-Number) is a special value of the number type, the result of an invalid math operation such as `0 / 0` or `Number('abc')`. Check for it with `Number.isNaN(x)`.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"},{"title":"MDN: typeof","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof"}],"origin":{"topic":"javascript","level":"junior","index":2}},{"question":"How does `let` differ from `var`?","options":["`let` is scoped to a `{}` block, `var` to a function","`let` is scoped to a function, while `var` is scoped to a `{}` block","No difference: `let` is just a new name for `var`"],"answer":0,"explanation":"A `var` declared inside an `if` or `for` is visible throughout the function. Also, `var` is hoisted with the value `undefined` and becomes a `window` property at the top level, while `let` and `const` are in the \"temporal dead zone\" until declared.","sources":[{"title":"javascript.info: The old \"var\"","url":"https://javascript.info/var"},{"title":"javascript.info: Variables","url":"https://javascript.info/variables"}],"origin":{"topic":"javascript","level":"junior","index":3}},{"question":"What happens?","code":"const user = { name: \"Ann\" };\nuser.name = \"Bob\";","options":["It works: `const` forbids reassignment, not mutation of the object","`TypeError`: properties of a `const` object can't be changed","The change is silently ignored and `name` stays `\"Ann\"`"],"answer":0,"explanation":"`const` fixes the reference: `user = {}` throws, but the object's contents can change. To prevent property changes, use `Object.freeze` (shallowly).","sources":[{"title":"javascript.info: Variables","url":"https://javascript.info/variables"},{"title":"MDN: Object.freeze()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze"}],"origin":{"topic":"javascript","level":"junior","index":4}},{"question":"What does this code print?","code":"console.log(x);\nvar x = 5;","options":["`undefined`","`5`","`ReferenceError`"],"answer":0,"explanation":"The `var` declaration is hoisted to the top of the function and initialized with `undefined`, while the assignment stays in place. With `let` or `const` this would be a `ReferenceError`.","sources":[{"title":"MDN: Hoisting","url":"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting"},{"title":"javascript.info: The old \"var\"","url":"https://javascript.info/var"}],"origin":{"topic":"javascript","level":"junior","index":5}},{"question":"What does this code print?","code":"console.log(y);\nlet y = 5;","options":["`ReferenceError`","`undefined`","`5`"],"answer":0,"explanation":"`let` and `const` are hoisted too, but until the declaration line they're in the temporal dead zone (TDZ): any access throws a `ReferenceError`. This helps catch variables used before initialization.","sources":[{"title":"MDN: let (temporal dead zone)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"},{"title":"MDN: Hoisting","url":"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting"}],"origin":{"topic":"javascript","level":"junior","index":6}},{"question":"How does `==` differ from `===`?","options":["`==` coerces types before comparing, `===` compares without coercion","`===` coerces types before comparing, while `==` compares without coercion","`==` compares only numbers, while `===` compares values of any type"],"answer":0,"explanation":"`0 == ''` and `'1' == 1` are `true` because of coercion, but `false` with `===`. Loose equality rules are confusing, so `===` is almost always used. A handy exception: `x == null` checks for both `null` and `undefined` at once.","sources":[{"title":"javascript.info: Comparisons","url":"https://javascript.info/comparison"},{"title":"MDN: Equality comparisons and sameness","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness"}],"origin":{"topic":"javascript","level":"junior","index":7}},{"question":"How does `null` differ from `undefined`?","options":["`undefined` means no value was assigned, `null` is an explicit \"empty\" set by the programmer","`null` means no value was assigned, while `undefined` is an explicitly set \"empty\"","They are the same value; `null === undefined` returns `true`"],"answer":0,"explanation":"`undefined` is what uninitialized variables, missing properties and parameters, and functions without `return` produce. `null` is assigned on purpose. `null == undefined` is `true`, but `null === undefined` is `false`.","sources":[{"title":"javascript.info: Data types","url":"https://javascript.info/types"}],"origin":{"topic":"javascript","level":"junior","index":8}},{"question":"What does `NaN === NaN` return?","options":["`false`","`true`","`NaN`"],"answer":0,"explanation":"`NaN` is not equal to anything, not even itself. Use `Number.isNaN(x)` or `Object.is(x, NaN)` to check. The global `isNaN('abc')` coerces its argument to a number first and returns `true` for strings.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"},{"title":"MDN: Equality comparisons and sameness","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness"}],"origin":{"topic":"javascript","level":"junior","index":9}},{"question":"What does `0.1 + 0.2 === 0.3` evaluate to?","options":["`false`","`true`","`TypeError`"],"answer":0,"explanation":"Numbers are stored in binary IEEE-754 format, and 0.1 and 0.2 can't be represented exactly - the sum is `0.30000000000000004`. Compare numbers with a tolerance (`Math.abs(a - b) < Number.EPSILON`), and handle money as integer cents.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"},{"title":"MDN: Number.EPSILON","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON"}],"origin":{"topic":"javascript","level":"junior","index":10}},{"question":"What are `'5' + 3` and `'5' - 3`?","options":["`'53'` and `2`","`8` and `2`","`'53'` and `'2'`"],"answer":0,"explanation":"If one operand of `+` is a string, concatenation happens. Other arithmetic operators convert operands to numbers. That's why values from `input.value` are converted with `Number()` before adding.","sources":[{"title":"javascript.info: Type conversions","url":"https://javascript.info/type-conversions"}],"origin":{"topic":"javascript","level":"junior","index":11}},{"question":"Which of these values is falsy?","options":["`0`","`'0'`","`[]`"],"answer":0,"explanation":"Falsy values: `false`, `0`, `-0`, `0n`, `''`, `null`, `undefined`, `NaN`. Everything else is truthy, including the string `'0'`, an empty array `[]` and an empty object `{}`.","sources":[{"title":"javascript.info: Logical operators","url":"https://javascript.info/logical-operators"},{"title":"javascript.info: Type conversions","url":"https://javascript.info/type-conversions"}],"origin":{"topic":"javascript","level":"junior","index":12}},{"question":"How does `count || 10` differ from `count ?? 10` when `count = 0`?","options":["`||` returns `10`, while `??` returns `0`","Both return `10`, because `0` is falsy","Both return `0`, because the value is defined"],"answer":0,"explanation":"`||` substitutes the fallback for any falsy value, while `??` only does so for `null` and `undefined`. For numbers and strings where `0` and `''` are valid values, `??` is the right choice.","sources":[{"title":"javascript.info: Nullish coalescing operator ??","url":"https://javascript.info/nullish-coalescing-operator"},{"title":"javascript.info: Logical operators","url":"https://javascript.info/logical-operators"}],"origin":{"topic":"javascript","level":"junior","index":13}},{"question":"What does `user?.address?.city` return if `user = {}`?","options":["`undefined`","`TypeError`","`null`"],"answer":0,"explanation":"Optional chaining short-circuits and returns `undefined` if the value on the left is `null` or `undefined`. Without `?.`, `user.address.city` would throw a `TypeError`. There are also forms for calls `fn?.()` and indexes `arr?.[0]`.","sources":[{"title":"javascript.info: Optional chaining ?.","url":"https://javascript.info/optional-chaining"}],"origin":{"topic":"javascript","level":"junior","index":14}},{"question":"How does an arrow function differ from a regular one?","options":["It has no own `this` or `arguments` and can't be called with `new`","It always runs asynchronously, while a regular one runs synchronously","It is fully hoisted, while a regular function is not"],"answer":0,"explanation":"An arrow takes `this` from the scope where it was created, which makes it handy for callbacks inside methods. But it doesn't work as an object method: `this` won't point to the object. Only function declarations are fully hoisted.","sources":[{"title":"javascript.info: Arrow functions revisited","url":"https://javascript.info/arrow-functions"},{"title":"MDN: this","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"}],"origin":{"topic":"javascript","level":"junior","index":15}},{"question":"Can you call a function before its declaration?","code":"greet();\nfunction greet() { console.log(\"hi\"); }","options":["Yes: a function declaration is fully hoisted","No: it throws a `ReferenceError`, as with `let`","No: it throws `TypeError: greet is not a function`"],"answer":0,"explanation":"Function declarations are created before code in their scope runs. With a function expression (`const greet = function () {}`), calling before the declaration fails: the variable is in the TDZ (or `undefined` with `var`).","sources":[{"title":"javascript.info: Function expressions","url":"https://javascript.info/function-expressions"},{"title":"MDN: Hoisting","url":"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting"}],"origin":{"topic":"javascript","level":"junior","index":16}},{"question":"What does this code print?","code":"function makeCounter() {\n let count = 0;\n return () => ++count;\n}\nconst c = makeCounter();\nc(); c();\nconsole.log(c());","options":["`3`","`1`","`0`"],"answer":0,"explanation":"This is a closure: the returned function remembers the `count` variable from the scope where it was created, and each call increments it. Calling `makeCounter()` again would create an independent counter.","sources":[{"title":"javascript.info: Variable scope, closure","url":"https://javascript.info/closure"},{"title":"MDN: Closures","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures"}],"origin":{"topic":"javascript","level":"junior","index":17}},{"question":"What is a closure?","options":["A function together with access to variables of the outer scope where it was created","A function that is called right after declaration and then deleted","A block of code in curly braces that is inaccessible from outside after it runs"],"answer":0,"explanation":"Every JS function remembers the lexical environment where it was created and can read and change its variables even after the outer function finishes. Private data, function factories, memoization and event handlers are built on this.","sources":[{"title":"javascript.info: Variable scope, closure","url":"https://javascript.info/closure"},{"title":"MDN: Closures","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures"}],"origin":{"topic":"javascript","level":"junior","index":18}},{"question":"What does this code print?","code":"const a = { n: 1 };\nconst b = a;\nb.n = 2;\nconsole.log(a.n);","options":["`2`","`1`","`undefined`"],"answer":0,"explanation":"Objects are passed by reference: `b` points to the same object as `a`. To get a copy, use spread `{ ...a }` (shallow) or `structuredClone(a)` (deep).","sources":[{"title":"javascript.info: Object references and copying","url":"https://javascript.info/object-copy"}],"origin":{"topic":"javascript","level":"junior","index":19}},{"question":"What does `const copy = { ...original }` do?","options":["A shallow copy: nested objects remain shared","A deep copy of all nested objects and arrays","A reference to the same object, like `const copy = original`"],"answer":0,"explanation":"Spread copies only own first-level properties. If `original.address` is an object, it's shared by both copies. `structuredClone` gives a deep copy, but it doesn't copy functions or DOM nodes.","sources":[{"title":"javascript.info: Object references and copying","url":"https://javascript.info/object-copy"},{"title":"MDN: structuredClone()","url":"https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone"}],"origin":{"topic":"javascript","level":"junior","index":20}},{"question":"What does `[1, 2, 3].map(x => x * 2)` return?","options":["`[2, 4, 6]`","`undefined`","`12`"],"answer":0,"explanation":"`map` creates a new array from the callback's results without changing the original. Similar non-mutating methods: `filter` (selection), `reduce` (folding into one value), `find`, `some`, `every`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":21}},{"question":"What does `[1, 2, 3].forEach(x => x * 2)` return?","options":["`undefined`","`[2, 4, 6]`","`[1, 2, 3]`"],"answer":0,"explanation":"`forEach` is for side effects and always returns `undefined`. Use `map` to get a new array. Another difference: you can't `break` out of `forEach` - use `for...of`, `some` or `find` for that.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":22}},{"question":"What does `[1, 2, 3, 4].reduce((sum, x) => sum + x, 0)` return?","options":["`10`","`[1, 3, 6, 10]`","`0`"],"answer":0,"explanation":"`reduce` walks the array, passing the accumulator from step to step; the second argument is the initial value. Without it, the first element becomes the initial accumulator, and an empty array throws a `TypeError`.","sources":[{"title":"MDN: Array.prototype.reduce()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"},{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":23}},{"question":"How does `for...in` differ from `for...of`?","options":["`for...in` iterates over object keys, `for...of` over values of an iterable","`for...in` iterates over array values, while `for...of` iterates over object keys","No difference: they're two synonyms for the same loop"],"answer":0,"explanation":"`for (const key in obj)` goes over enumerable string keys, including inherited ones. `for (const item of arr)` works with iterables: arrays, strings, `Map`, `Set`. `for...in` isn't suitable for arrays - it yields indexes as strings.","sources":[{"title":"MDN: for...in","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"},{"title":"MDN: for...of","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"}],"origin":{"topic":"javascript","level":"junior","index":24}},{"question":"How does `slice` differ from `splice`?","options":["`slice` returns part of the array without changes, `splice` mutates the original","`splice` returns an unchanged copy, while `slice` mutates the original array","They're synonyms; `splice` is the deprecated name of `slice`"],"answer":0,"explanation":"`arr.slice(1, 3)` creates a new array. `arr.splice(1, 2, 'x')` removes and inserts elements in `arr` itself. The non-mutating alternative is `toSpliced()`. Other mutating methods: `push`, `pop`, `shift`, `sort`, `reverse`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":25}},{"question":"What do `[NaN].includes(NaN)` and `[NaN].indexOf(NaN)` return?","options":["`true` and `-1`","`false` and `-1`","`true` and `0`"],"answer":0,"explanation":"`indexOf` uses strict equality `===`, and `NaN !== NaN`. `includes` uses the SameValueZero algorithm, which treats `NaN` as equal to itself. So `includes` is more reliable for checking presence.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"},{"title":"MDN: Equality comparisons and sameness","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness"}],"origin":{"topic":"javascript","level":"junior","index":26}},{"question":"What does this code print?","code":"const { name = \"Guest\", age } = { age: 30 };\nconsole.log(name, age);","options":["`Guest 30`","`undefined 30`","`TypeError`"],"answer":0,"explanation":"Destructuring extracts properties into variables, and the default value is used when the property is `undefined`. You can rename (`{ name: userName }`) and destructure nested objects and arrays.","sources":[{"title":"javascript.info: Destructuring assignment","url":"https://javascript.info/destructuring-assignment"}],"origin":{"topic":"javascript","level":"junior","index":27}},{"question":"What does `sum(1, 2, 3)` return?","code":"function sum(...nums) {\n return nums.length;\n}","options":["`3`","`1`","`6`"],"answer":0,"explanation":"A rest parameter collects the remaining arguments into a real array. Unlike the legacy `arguments`, it's an array with `map` and `reduce`, and it works in arrow functions.","sources":[{"title":"javascript.info: Rest parameters and spread syntax","url":"https://javascript.info/rest-parameters-spread"}],"origin":{"topic":"javascript","level":"junior","index":28}},{"question":"What does `Math.max(...[3, 7, 2])` return?","options":["`7`","`NaN`","`[3, 7, 2]`"],"answer":0,"explanation":"Spread \"expands\" the array into separate arguments: `Math.max(3, 7, 2)`. Without spread, `Math.max([3, 7, 2])` returns `NaN`. Spread is also used to copy and merge arrays and objects.","sources":[{"title":"javascript.info: Rest parameters and spread syntax","url":"https://javascript.info/rest-parameters-spread"}],"origin":{"topic":"javascript","level":"junior","index":29}},{"question":"What does `JSON.stringify({ a: 1, b: undefined, c: () => 1 })` return?","options":["`'{\"a\":1}'`","`'{\"a\":1,\"b\":null,\"c\":null}'`","`TypeError`"],"answer":0,"explanation":"Properties whose values are `undefined`, functions or symbols are skipped (in arrays they become `null`). `Date` becomes a string, `Map` and `Set` become `{}`. Circular references throw an error.","sources":[{"title":"javascript.info: JSON methods","url":"https://javascript.info/json"}],"origin":{"topic":"javascript","level":"junior","index":30}},{"question":"In what order are the numbers printed?","code":"console.log(1);\nsetTimeout(() => console.log(2), 0);\nPromise.resolve().then(() => console.log(3));\nconsole.log(4);","options":["`1 4 3 2`","`1 2 3 4`","`1 4 2 3`"],"answer":0,"explanation":"Synchronous code runs first (1, 4). Then the event loop runs all microtasks - promise callbacks (3) - and only then the next macrotask - the timer (2). `setTimeout(fn, 0)` doesn't mean \"immediately\".","sources":[{"title":"javascript.info: Event loop","url":"https://javascript.info/event-loop"},{"title":"javascript.info: Microtasks","url":"https://javascript.info/microtask-queue"}],"origin":{"topic":"javascript","level":"junior","index":31}},{"question":"Which states can a promise be in?","options":["`pending`, then `fulfilled` or `rejected` - and it never changes again","`pending`, `running`, `done` and `cancelled` on user request","Only `resolved` or `rejected`; there's no initial state"],"answer":0,"explanation":"A promise starts pending and settles exactly once into fulfilled or rejected. Further `resolve`/`reject` calls are ignored. A promise can't be cancelled - use `AbortController` to cancel operations.","sources":[{"title":"javascript.info: Promise","url":"https://javascript.info/promise-basics"},{"title":"MDN: Promise","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"}],"origin":{"topic":"javascript","level":"junior","index":32}},{"question":"What does an `async` function return?","options":["Always a promise, even with `return 42` inside","The `return` value directly, without a promise","`undefined`, with the result passed to a callback"],"answer":0,"explanation":"`async function f() { return 42 }` returns `Promise<42>`. An exception inside becomes a rejected promise. That's why the result is obtained with `await` or `.then()`.","sources":[{"title":"javascript.info: Async/await","url":"https://javascript.info/async-await"},{"title":"MDN: async function","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"}],"origin":{"topic":"javascript","level":"junior","index":33}},{"question":"Why won't `catch` catch the error?","code":"try {\n fetch(\"/api\").then(r => { throw new Error(\"fail\"); });\n} catch (e) {\n console.log(\"caught\");\n}","options":["The error happens later, asynchronously, after `try` has already finished","`try/catch` can't catch `Error` objects at all","`fetch` automatically swallows all errors inside `.then`"],"answer":0,"explanation":"The `try` block ran synchronously and finished before the server responded. Errors in the chain are caught with `.catch()`, or by writing `await fetch(...)` inside `try` in an async function - then `catch` works.","sources":[{"title":"javascript.info: Error handling, try...catch","url":"https://javascript.info/try-catch"},{"title":"javascript.info: Async/await","url":"https://javascript.info/async-await"}],"origin":{"topic":"javascript","level":"junior","index":34}},{"question":"What does `const arr = ['a', 'b']; console.log(arr[20]);` print?","options":["`undefined`","`RangeError`","`null`"],"answer":0,"explanation":"Accessing a nonexistent index, like a missing object property, returns `undefined` without an error. For the last element, `arr.at(-1)` is handy.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"},{"title":"MDN: Array.prototype.at()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at"}],"origin":{"topic":"javascript","level":"junior","index":35}},{"question":"What does this code print?","code":"const s = \"hello\";\ns[0] = \"H\";\nconsole.log(s);","options":["`hello`","`Hello`","`TypeError` in any mode"],"answer":0,"explanation":"Strings are immutable: you can't change a character; the assignment is silently ignored (a `TypeError` in strict mode). You need to create a new string: `s[0].toUpperCase() + s.slice(1)`.","sources":[{"title":"javascript.info: Data types","url":"https://javascript.info/types"},{"title":"MDN: Strict mode","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode"}],"origin":{"topic":"javascript","level":"junior","index":36}},{"question":"How do you reliably check that a value is an array?","options":["`Array.isArray(value)`","`typeof value === 'array'`","`value.length !== undefined`"],"answer":0,"explanation":"`typeof []` returns `'object'`, and strings and array-like objects also have `length`. `Array.isArray` works even for arrays from other iframes, where `instanceof Array` fails.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"},{"title":"MDN: typeof","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof"}],"origin":{"topic":"javascript","level":"junior","index":37}},{"question":"Why is `textContent` safer than `innerHTML` for displaying user text?","options":["It inserts text as is, without parsing HTML - XSS is impossible","It automatically strips all dangerous words and characters from the string","It's faster, while both are equally safe"],"answer":0,"explanation":"`el.innerHTML = userInput` parses the string as markup, and `

` runs a script. `textContent` shows tags as text. If you really need HTML, clean it with a sanitizer (DOMPurify).","sources":[{"title":"MDN: textContent vs innerHTML","url":"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent"},{"title":"MDN: Cross-site scripting (XSS)","url":"https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS"}],"origin":{"topic":"javascript","level":"junior","index":38}},{"question":"Why is `addEventListener` better than `el.onclick = handler`?","options":["It allows multiple handlers and options (`once`, `passive`)","It's faster because it runs in a separate thread","Only it gives you access to the event object in the handler"],"answer":0,"explanation":"Reassigning `onclick` overwrites the previous handler. `addEventListener` adds them independently and supports the capture phase (`capture`), one-time handlers and removal via `signal` (AbortController). Remove handlers with `removeEventListener` and the same function.","sources":[{"title":"MDN: addEventListener()","url":"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"}],"origin":{"topic":"javascript","level":"junior","index":39}},{"question":"What does `event.preventDefault()` do?","options":["Cancels the browser's default action (navigation, form submission)","Stops the event from bubbling up to parent elements","Removes the event handler from the element after the first call"],"answer":0,"explanation":"For example, a link won't follow its `href`, a form won't submit, a checkbox won't toggle. Stopping bubbling is `event.stopPropagation()`; they're different things and often confused.","sources":[{"title":"javascript.info: Browser default actions","url":"https://javascript.info/default-browser-action"}],"origin":{"topic":"javascript","level":"junior","index":40}},{"question":"What is event bubbling?","options":["The event fires on the element and then rises through its ancestors up to `document`","The event fires on `document` first and then descends to the element","The event fires on all elements of the page at the same time"],"answer":0,"explanation":"A click on a button inside a `div` triggers the button's handlers, then the `div`'s, then higher. Before bubbling there's the capturing phase - from `window` down to the target. `event.target` is where the event happened, `event.currentTarget` is whose handler is running now.","sources":[{"title":"javascript.info: Bubbling and capturing","url":"https://javascript.info/bubbling-and-capturing"},{"title":"MDN: Event bubbling","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling"}],"origin":{"topic":"javascript","level":"junior","index":41}},{"question":"What is event delegation about?","options":["One handler on a parent handles children's events via `event.target`","The handler is moved to a Web Worker so it doesn't block the main thread","Each child element gets a copy of the parent's handler"],"answer":0,"explanation":"Instead of 1000 handlers on every table row, there's one on `table` that finds the target via `event.target.closest('tr')`. This saves memory and automatically works for elements added later. It relies on bubbling.","sources":[{"title":"javascript.info: Event delegation","url":"https://javascript.info/event-delegation"},{"title":"javascript.info: Bubbling and capturing","url":"https://javascript.info/bubbling-and-capturing"}],"origin":{"topic":"javascript","level":"junior","index":42}},{"question":"How does `localStorage` differ from `sessionStorage`?","options":["`localStorage` persists indefinitely, `sessionStorage` until the tab is closed","`sessionStorage` persists indefinitely, while `localStorage` lasts until the tab is closed","`localStorage` is sent to the server with every request, while `sessionStorage` isn't"],"answer":0,"explanation":"Both store strings per origin, a few megabytes in size, and aren't sent to the server (unlike cookies). `sessionStorage` is also isolated per tab. Storing tokens and secrets there is unsafe: any script on the page can read them.","sources":[{"title":"javascript.info: LocalStorage, sessionStorage","url":"https://javascript.info/localstorage"},{"title":"MDN: Web Storage API","url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API"}],"origin":{"topic":"javascript","level":"junior","index":43}},{"question":"What does `localStorage.getItem('n')` return after `localStorage.setItem('n', 5)`?","options":["`'5'`","`5`","`null`"],"answer":0,"explanation":"Web Storage stores only strings - the value is converted with `String()`. An object becomes `'[object Object]'`, so complex data is saved with `JSON.stringify` and read with `JSON.parse`.","sources":[{"title":"javascript.info: LocalStorage, sessionStorage","url":"https://javascript.info/localstorage"},{"title":"javascript.info: JSON methods","url":"https://javascript.info/json"}],"origin":{"topic":"javascript","level":"junior","index":44}},{"question":"How does `DOMContentLoaded` differ from `load`?","options":["`DOMContentLoaded` - the DOM is built; `load` - images and styles are loaded too","`load` fires earlier: as soon as the DOM is built, without images and styles","They're the same event under different names in different browsers"],"answer":0,"explanation":"`DOMContentLoaded` is enough for working with the DOM (`defer` scripts run right before it). `load` waits for all resources, including images and iframes - you need it, for example, to measure image sizes.","sources":[{"title":"javascript.info: DOMContentLoaded, load","url":"https://javascript.info/onload-ondomcontentloaded"},{"title":"MDN: DOMContentLoaded","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"}],"origin":{"topic":"javascript","level":"junior","index":45}},{"question":"How does `Map` differ from a plain object?","options":["`Map` keys can be any values, and insertion order is preserved","`Map` can store only string keys, while an object can store any values","`Map` is immutable: pairs can't be added after creation"],"answer":0,"explanation":"Object keys are strings or symbols (the number `1` becomes `'1'`), and there are inherited properties. `Map` accepts objects as keys, has `size` and `get/set/has/delete`, and is convenient for frequent additions and removals.","sources":[{"title":"javascript.info: Map and Set","url":"https://javascript.info/map-set"}],"origin":{"topic":"javascript","level":"junior","index":46}},{"question":"How do you quickly remove duplicates from an array of primitives?","options":["`[...new Set(arr)]`","`arr.unique()`","`Object.keys(arr)`"],"answer":0,"explanation":"`Set` stores only unique values (SameValueZero comparison). Spread turns it back into an array. Arrays of objects need a key: for example, a `Map` by `id`.","sources":[{"title":"javascript.info: Map and Set","url":"https://javascript.info/map-set"}],"origin":{"topic":"javascript","level":"junior","index":47}},{"question":"What does the `'use strict'` directive give you?","options":["Strict mode: errors instead of silent failures and a ban on dangerous constructs","Static type checking at runtime, as in TypeScript","Automatic minification and optimization of code by the engine"],"answer":0,"explanation":"For example, assigning to an undeclared variable throws instead of creating a global, and `this` in a regular function is `undefined`, not `window`. Modules and classes run in strict mode automatically.","sources":[{"title":"MDN: Strict mode","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode"}],"origin":{"topic":"javascript","level":"junior","index":48}},{"question":"How do you find the first element with the `card` class on the page?","options":["`document.querySelector('.card')`","`document.getElementsByClassName('.card')[1]`","`document.find('card')`"],"answer":0,"explanation":"`querySelector` accepts any CSS selector and returns the first element or `null`. `querySelectorAll` returns a static `NodeList` of all matches. `getElementsByClassName` takes the class name without a dot, and indexing starts at 0.","sources":[{"title":"javascript.info: DOM tree","url":"https://javascript.info/dom-nodes"}],"origin":{"topic":"javascript","level":"junior","index":49}},{"question":"Does this code throw an error?","code":"const user = { name: \"Ann\" };\nuser.name = \"Bob\";","options":["No - `const` forbids reassigning the variable, not changing the object it points to","Yes - `const` objects are frozen","Yes - but only in strict mode"],"answer":0,"explanation":"`user = {}` would throw a `TypeError`, but mutating properties is allowed. To make the object itself read-only, use `Object.freeze` (shallowly).","sources":[{"title":"javascript.info: Variables","url":"https://javascript.info/variables"},{"title":"MDN: Object.freeze()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze"}],"origin":{"topic":"javascript","level":"junior","index":50}},{"question":"What does a template literal give you compared to string concatenation?","code":"const msg = `Hello, ${name}!\nYou have ${count} new messages.`;","options":["Embedded expressions with `${...}` and multi-line strings without `\\n`","Automatic HTML escaping of inserted values","Faster string comparison"],"answer":0,"explanation":"Backtick strings evaluate any expression inside `${}`. They don't escape anything, so building HTML from user input with them is still an XSS risk.","sources":[{"title":"javascript.info: Strings","url":"https://javascript.info/string"}],"origin":{"topic":"javascript","level":"junior","index":51}},{"question":"What does `arr.length = 0` do?","options":["Removes all elements from the array in place","Throws an error because `length` is read-only","Creates a new empty array, leaving the old one intact"],"answer":0,"explanation":"Setting `length` truncates the array, and every reference to it sees the change. `arr = []` instead points the variable at a new array.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":52}},{"question":"What does `[1, 2].push(3)` return?","options":["`3` - the new length of the array","`[1, 2, 3]`","`undefined`"],"answer":0,"explanation":"`push` mutates the array and returns its new length, a common source of bugs like `arr = arr.push(x)`. For an immutable version use `[...arr, x]`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":53}},{"question":"How does `find` differ from `filter`?","code":"const users = [{ id: 1 }, { id: 2 }, { id: 2 }];","options":["`find` returns the first matching element (or `undefined`); `filter` returns an array of all matches","They are identical","`find` returns the index of the element"],"answer":0,"explanation":"`users.find(u => u.id === 2)` gives one object and stops early; `users.filter(...)` always scans the whole array. `findIndex` returns the index instead.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":54}},{"question":"What is the difference between `some` and `every`?","options":["`some` is true if at least one element matches; `every` is true only if all elements match","They are synonyms","`every` returns the matching elements"],"answer":0,"explanation":"Both stop as soon as the result is known. On an empty array `some` returns `false` and `every` returns `true`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":55}},{"question":"What does this code print in a classic (non-strict) script?","code":"let s = \"cat\";\ns[0] = \"b\";\nconsole.log(s);","options":["`cat`","`bat`","It throws a `TypeError`"],"answer":0,"explanation":"Strings are immutable: index assignment is silently ignored (or throws in strict mode). Create a new string instead: `\"b\" + s.slice(1)`.","sources":[{"title":"javascript.info: Strings","url":"https://javascript.info/string"}],"origin":{"topic":"javascript","level":"junior","index":56}},{"question":"What type does `(1.005).toFixed(2)` return?","options":["A string","A number","A `BigInt`"],"answer":0,"explanation":"`toFixed` returns a formatted string, so `price.toFixed(2) + 1` concatenates. Also, due to binary floating point, `(1.005).toFixed(2)` is `\"1.00\"`, not `\"1.01\"`.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"}],"origin":{"topic":"javascript","level":"junior","index":57}},{"question":"What does `greet()` return?","code":"function greet(name = \"guest\") {\n return `Hi, ${name}`;\n}","options":["`\"Hi, guest\"`","`\"Hi, undefined\"`","It throws an error"],"answer":0,"explanation":"Default parameters apply when the argument is `undefined` (missing or passed explicitly). `greet(null)` gives `\"Hi, null\"`, because `null` is a value.","sources":[{"title":"javascript.info: Functions","url":"https://javascript.info/function-basics"}],"origin":{"topic":"javascript","level":"junior","index":58}},{"question":"What are `title` and `year` after this destructuring?","code":"const movie = { name: \"Up\" };\nconst { name: title, year = 2009 } = movie;","options":["`title` is `\"Up\"`, `year` is `2009`","`name` is `\"Up\"`, `title` is undefined","It throws because `year` doesn't exist"],"answer":0,"explanation":"`name: title` renames the variable, and `= 2009` provides a default when the property is `undefined`.","sources":[{"title":"javascript.info: Destructuring assignment","url":"https://javascript.info/destructuring-assignment"}],"origin":{"topic":"javascript","level":"junior","index":59}},{"question":"What does `[a, b] = [b, a]` do?","options":["Swaps the values of `a` and `b` without a temporary variable","Creates a nested array","Throws a syntax error"],"answer":0,"explanation":"The right side creates a temporary array, then destructuring assigns its elements. If the previous line has no semicolon, it may be parsed as an index access - another reason to use semicolons or a linter.","sources":[{"title":"javascript.info: Destructuring assignment","url":"https://javascript.info/destructuring-assignment"}],"origin":{"topic":"javascript","level":"junior","index":60}},{"question":"How does `\"toString\" in obj` differ from `Object.hasOwn(obj, \"toString\")` for `obj = {}`?","options":["`in` is `true` (found on the prototype), `Object.hasOwn` is `false` (not an own property)","Both are `false`","Both are `true`"],"answer":0,"explanation":"`in` checks the whole prototype chain. `Object.hasOwn` (a safer replacement for `obj.hasOwnProperty`) checks only the object itself.","sources":[{"title":"MDN: Object.hasOwn()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn"},{"title":"javascript.info: Prototypal inheritance","url":"https://javascript.info/prototype-inheritance"}],"origin":{"topic":"javascript","level":"junior","index":61}},{"question":"What does `0 && \"hello\"` evaluate to?","options":["`0`","`false`","`\"hello\"`"],"answer":0,"explanation":"`&&` returns the first falsy operand or the last one. In JSX, `{count && }` therefore renders `0` when `count` is 0.","sources":[{"title":"javascript.info: Logical operators","url":"https://javascript.info/logical-operators"}],"origin":{"topic":"javascript","level":"junior","index":62}},{"question":"Which case runs for `x = \"1\"`?","code":"switch (x) {\n case 1: console.log(\"number\"); break;\n case \"1\": console.log(\"string\"); break;\n}","options":["`case \"1\"` - `switch` compares with `===`","`case 1` - values are converted","Neither"],"answer":0,"explanation":"`switch` uses strict equality. Without `break`, execution falls through into the next case.","sources":[{"title":"javascript.info: The \"switch\" statement","url":"https://javascript.info/switch"}],"origin":{"topic":"javascript","level":"junior","index":63}},{"question":"When does a `finally` block run?","options":["Always - after `try`/`catch`, even if there was a `return` or an exception","Only if no error occurred","Only if an error occurred"],"answer":0,"explanation":"It is the place for cleanup such as hiding a loader or closing a connection. A `return` inside `finally` overrides the earlier return value, so avoid it.","sources":[{"title":"javascript.info: Error handling, try...catch","url":"https://javascript.info/try-catch"}],"origin":{"topic":"javascript","level":"junior","index":64}},{"question":"How does `Number.isNaN(\"abc\")` differ from `isNaN(\"abc\")`?","options":["`Number.isNaN` gives `false` (it's a string, not NaN); global `isNaN` converts first and gives `true`","Both return `true`","Both return `false`"],"answer":0,"explanation":"The global `isNaN` coerces its argument, which leads to surprises. `Number.isNaN` checks only for the actual `NaN` value.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"}],"origin":{"topic":"javascript","level":"junior","index":65}},{"question":"What does `Math.round(-2.5)` return?","options":["`-2`","`-3`","`-2.5`"],"answer":0,"explanation":"`Math.round` rounds .5 towards +∞, so `Math.round(2.5)` is 3 and `Math.round(-2.5)` is -2. Use `Math.trunc`, `Math.floor` or `Intl.NumberFormat` when you need other rules.","sources":[{"title":"MDN: Math.round()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"}],"origin":{"topic":"javascript","level":"junior","index":66}},{"question":"What does a function return if it has no `return` statement?","options":["`undefined`","`null`","The value of its last expression"],"answer":0,"explanation":"Only arrow functions with a concise body (`x => x * 2`) return the expression implicitly. A block body `x => { x * 2 }` returns `undefined`.","sources":[{"title":"javascript.info: Functions","url":"https://javascript.info/function-basics"},{"title":"javascript.info: Arrow functions revisited","url":"https://javascript.info/arrow-functions"}],"origin":{"topic":"javascript","level":"junior","index":67}},{"question":"Why does `document.querySelectorAll(\"li\").map(...)` throw?","options":["It returns a `NodeList`, not an array; use `Array.from(...)` or spread to get `map`","`querySelectorAll` returns `null` when nothing is found","`map` can't be used with DOM elements"],"answer":0,"explanation":"A `NodeList` has `forEach` and is iterable, but lacks most array methods. It is also static: it doesn't update when the DOM changes.","sources":[{"title":"javascript.info: Searching: getElement*, querySelector*","url":"https://javascript.info/searching-elements-dom"}],"origin":{"topic":"javascript","level":"junior","index":68}},{"question":"What does `el.classList.toggle(\"open\")` do?","options":["Adds the class if missing, removes it if present, and returns whether it is now present","Replaces all classes with `open`","Toggles the element's visibility"],"answer":0,"explanation":"A second argument forces the state: `toggle(\"open\", isOpen)`. Using `classList` is safer than editing the `className` string by hand.","sources":[{"title":"javascript.info: Styles and classes","url":"https://javascript.info/styles-and-classes"}],"origin":{"topic":"javascript","level":"junior","index":69}},{"question":"In a click handler attached to `

`); `currentTarget` is the `