Top 30 Javascript Interview Questions and Answers

Question 1

What is the primary advantage of Vue's progressive philosophy for a project starting small but potentially growing into a full SPA?

Accepted Answer

It enables developers to integrate only the necessary parts of its ecosystem, scaling functionality as needed.

Answer

It provides a highly opinionated structure that guides all development decisions from the start.

Answer

It offers a comprehensive, built-in suite of tools, eliminating the need for external libraries.

Answer

It mandates a complete frontend overhaul to ensure optimal performance and maintainability.

Question 2

What is the primary function of the V8 engine within environments like Chrome or Node.js?

Accepted Answer

To translate JavaScript code into native machine code for fast execution.

Answer

To store and retrieve data efficiently from databases or local storage.

Answer

To manage the graphical user interface and render web page elements.

Answer

To provide a comprehensive set of APIs for web and server interactions.

Question 3

How does Turbopack's Server Fast Refresh in Next.js 16.2 differ from the previous server-side reload behavior?

Accepted Answer

It reloads only the changed module and leaves the rest of the server process intact, rather than clearing the require.cache for the entire import chain.

Answer

It clears require.cache for changed files while preserving untouched node_modules, cutting overhead by about two-thirds.

Answer

It applies tree-shaking to dynamic imports during reload so that only used exports are invalidated instead of the full module graph.

Answer

It moves server compilation into Web Workers with corrected origins to isolate changes from the main Node.js process.

Question 4

Which change to Vue's template parser in 3.4 is primarily responsible for its 2× speed improvement?

Accepted Answer

It replaced recursive descent and heavy regex with a single-pass state-machine tokenizer

Answer

It delegates parsing to htmlparser2 while keeping the old regex-based tokenizer

Answer

It added look-ahead caching to the existing recursive descent approach

Answer

It skips source-map generation during single-file component compilation

Question 5

For which file is //# allFunctionsCalledOnLoad the most appropriate optimization?

Accepted Answer

A core entry-point bundle whose functions execute during initial page load

Answer

Every script on a page to ensure all compilation happens off the main thread

Answer

A lazily-loaded module that splits code to reduce initial bundle size

Answer

A large utility library fetched during page load but only used after user interaction

Question 6

What condition forces V8's JSON.stringify to abandon its new side-effect-free fast path and use the slower recursive serializer?

Accepted Answer

One of the properties defines a custom toJSON method

Answer

The object graph nests deeper than the previous recursive stack limit

Answer

The object was created with Object.create(null)

Answer

String values contain two-byte Unicode characters

Question 7

What is the fundamental nature of a React Component?

Accepted Answer

A JavaScript function that returns a description of UI using JSX.

Answer

A custom, reusable HTML tag that simplifies web page structure.

Answer

A class definition used to manage application-wide data and state.

Answer

A separate file that holds all the styling rules for a specific UI element.

Question 8

How did SvelteKit 2.61 change the argument passed to an enhance callback?

Accepted Answer

It now receives a copy of the form remote function instance with a submit() API

Answer

It now receives raw FormData instead of any wrapped object

Answer

It now receives a destructured object with form, data, and a live() stream

Answer

It now receives an async iterable of server-sent submission events

Question 9

When using Vue 3.5's stable reactive props destructure, what must you do to keep a destructured prop reactive when passing it to watch or a composable?

Accepted Answer

Wrap the variable in a getter function

Answer

Convert it to a ref using toRef()

Answer

Use withDefaults as a fallback wrapper

Answer

Pass it directly; destructured props retain reactivity automatically

Question 10

What is the fundamental nature of JSX in a React application?

Accepted Answer

It is a syntax extension that a build tool converts into standard JavaScript function calls.

Answer

It allows developers to write raw HTML directly within JavaScript files for browser interpretation.

Answer

It is a new, standalone programming language for defining user interfaces.

Answer

It is a specialized string format that React parses directly into DOM elements.

Question 11

When would a TypeScript tuple be the most appropriate choice compared to an array?

Accepted Answer

To represent a single point in 2D space, like [x-coordinate, y-coordinate].

Answer

To store a collection of user IDs, where the number of IDs can vary.

Answer

To hold a series of sensor readings over time.

Answer

To maintain a list of all available product categories.

Question 12

What is the primary benefit of Svelte's architecture as a compiler, rather than a traditional runtime framework?

Accepted Answer

It generates highly optimized, vanilla JavaScript during the build process, eliminating the need for a runtime library in the browser.

Answer

It enables dynamic loading of components at runtime, significantly reducing the initial bundle size.

Answer

It allows developers to write components using a more declarative syntax than imperative JavaScript.

Answer

It provides built-in server-side rendering capabilities, which are absent in most other frameworks.

Question 13

Which statement accurately describes a core principle of how React components should handle props?

Accepted Answer

Props facilitate a one-way data flow, allowing data to be passed from parent to child components.

Answer

A child component can directly modify the props it receives to update its UI.

Answer

Only primitive data types like strings and numbers can be passed as props to a component.

Answer

Props are primarily used for managing a component's internal state that changes over time.

Question 14

Which statement accurately describes Metro's primary role in a React Native project?

Accepted Answer

It compiles multiple JavaScript source files into a single, optimized bundle for execution.

Answer

It handles the compilation of platform-specific native code for iOS and Android.

Answer

It manages the installation and versioning of third-party JavaScript libraries.

Answer

It provides the core framework for building user interfaces with React components.

Question 15

What is the primary issue with using `onClick={myFunction()}` instead of `onClick={myFunction}` in a React component?

Accepted Answer

It executes `myFunction` immediately during the component's render phase, not when the user clicks.

Answer

It prevents React from optimizing event listener attachment, leading to performance degradation.

Answer

React's event system cannot correctly pass the event object to `myFunction` when called this way.

Answer

It causes a syntax error in JSX, preventing the component from rendering.

Question 16

What is the fundamental mechanism by which Hermes improves React Native app startup performance?

Accepted Answer

It performs Ahead-Of-Time (AOT) compilation of JavaScript into optimized bytecode during the app's build phase.

Answer

It dynamically optimizes JavaScript code during runtime using a Just-In-Time (JIT) compiler.

Answer

It replaces JavaScript with a more performant native language for critical UI components.

Answer

It significantly reduces the final app's JavaScript bundle size by automatically tree-shaking unused modules.

Question 17

Which approach best implements click tracking for dozens of headlines and CTAs while remaining performant and maintainable?

Accepted Answer

Use a single delegated listener on a parent container, read data attributes to identify elements, and send via navigator.sendBeacon

Answer

Attach a unique addEventListener to each element and use its innerText as the analytics identifier

Answer

Re-attach individual listeners to all elements whenever new content is injected into the page

Answer

Add inline onclick handlers to every element that submit CSS class names to the analytics endpoint

Question 18

When using the logical AND operator (condition && <Component />) for conditional rendering in React, what is a crucial behavior to be aware of?

Accepted Answer

If 'condition' evaluates to 0, the number 0 might be displayed in the UI.

Answer

It can cause the component to re-render unnecessarily even when the condition is false.

Answer

It prevents the component from receiving props dynamically based on the condition.

Answer

It only works correctly if 'condition' is a boolean value.

Question 19

When developing a complex Vue component with intertwined logic for a single feature (e.g., data fetching and its related states), which API is generally preferred and why?

Accepted Answer

Composition API, because it enables grouping all related logic for a feature together, enhancing co-location and reusability.

Answer

Options API, as its clear separation of data, methods, and computed properties simplifies debugging in large components.

Answer

Options API, because it offers superior TypeScript inference and type safety for intricate component structures.

Answer

Composition API, as it primarily focuses on managing global application state rather than local component state.

Question 20

During a normal page navigation in the same browser tab, which object is replaced while the other persists?

Accepted Answer

Only the document object is replaced; the window object persists as the tab container.

Answer

Neither object is replaced; both remain intact for the lifetime of the tab.

Answer

Both window and document are replaced because they both represent the loaded page.

Answer

Only the window object is replaced because it holds the page-specific content.

Question 21

How does Vue's reactivity system primarily ensure UI components update automatically with data changes?

Accepted Answer

It wraps data objects in JavaScript Proxies to intercept property access and modification, triggering updates when changes occur.

Answer

It periodically compares the current data state with a previous snapshot and re-renders if differences are found.

Answer

It directly modifies the DOM elements associated with changed data properties using specialized browser APIs.

Answer

It compiles templates into highly optimized JavaScript functions that re-execute only when their bound variables are explicitly reassigned.

Question 22

In a browser script, what distinguishes a top-level var declaration from let or const?

Accepted Answer

var creates a property on the global Window object, while let and const do not, though all three are globally scoped

Answer

let and const are not globally scoped, unlike var

Answer

var is hoisted to the Window object, while let and const are not hoisted

Answer

All three create Window properties, but only var allows reassignment via window.x

Question 23

According to the CommonJS mental model, what is the default state of variables and functions defined within a module file?

Accepted Answer

They are private to the module unless explicitly exported.

Answer

They are shared with other modules unless explicitly marked as private.

Answer

They are only accessible after being imported by another module.

Answer

They are globally accessible unless explicitly marked as private.

Question 24

What is the main reason vite.config.js is designed as a Node.js script capable of exporting a function?

Accepted Answer

To enable programmatic configuration adjustments based on the current command or environment mode.

Answer

To provide a standardized format for all build tools to consume configuration.

Answer

To allow for type-checking and autocompletion through the defineConfig helper.

Answer

To ensure that configuration values are always loaded asynchronously for better performance.

Question 25

What is the main drawback of adding your own variables and functions directly to the window object?

Accepted Answer

It increases the risk of naming conflicts and makes your code fragile.

Answer

It can significantly increase the browser's memory consumption.

Answer

It makes your code less secure by exposing internal implementation details.

Answer

It prevents the use of modern JavaScript module systems for organization.

Question 26

Which statement about a Promise's state transitions is correct?

Accepted Answer

Once settled as fulfilled or rejected, the state is permanent and cannot change

Answer

A rejected Promise can later return to pending if retried

Answer

then callbacks execute synchronously the instant resolve is called

Answer

A Promise can be both fulfilled and rejected to cover all cases

Question 27

You add a click listener to a parent with addEventListener('click', fn, true). When does fn run relative to a child element's default listener if the child is clicked?

Accepted Answer

fn runs before the child listener during event capture

Answer

fn and the child listener execute simultaneously on the event target

Answer

fn runs after the child listener during event bubbling

Answer

fn only runs if the child listener does not call preventDefault

Question 28

Why does the Promise callback print before the setTimeout(0) callback despite both being scheduled in the same tick?

Accepted Answer

The microtask queue is fully drained before the next macrotask runs

Answer

The order is implementation-defined and can vary

Answer

Promises run on a higher-priority OS thread

Answer

setTimeout has an enforced minimum delay larger than the Promise

Question 29

After storing parent.childNodes in a variable, a developer appends a new child and sees the stored length increase without reassignment. What explains this?

Accepted Answer

The stored reference is a live NodeList, but querySelectorAll returns a static snapshot that would not update.

Answer

Browsers silently replace the referenced object when the DOM changes, making all collections dynamic.

Answer

Only HTMLCollections are live, so childNodes must be an HTMLCollection rather than a NodeList.

Answer

All NodeLists are live, so querySelectorAll would behave the same way.

Question 30

Which task is NOT primarily handled by the `document` object in JavaScript?

Accepted Answer

Redirecting the browser to a different web address.

Answer

Creating a new HTML element to add to the page.

Answer

Modifying the style of an existing HTML element.

Answer

Locating a specific element within the webpage's structure.