JavaScript, Vue, and Angular Interview Questions with Detailed Answers

JavaScript Questions

1. What is the difference between 'Pass by Value' and 'Pass by Reference'?

• Pass by Value: A copy of the value is passed (used for primitive types like number, string).
Changes to the parameter do not affect the original variable.

let a = 10;
function modify(val) {
val = val + 5;
}
modify(a); // a is still 10

• Pass by Reference: A reference to the original value is passed (used for objects and arrays).
Modifying the parameter changes the original object.

let obj = { count: 1 };

function increment(o) {
[Link]++;
}
increment(obj); // [Link] is now 2

• Real-world use case: Passing data to a utility function or API handler that updates shared app
state (e.g., updating cart object in a shopping app).

2. What is the difference between undefined and null ?

• undefined : A variable declared but not assigned a value.

• null : Represents an intentional absence of any object value.

let a;
[Link](a); // undefined
let b = null;
[Link](b); // null

• Real-world use case: Checking if an API response has missing data (undefined) vs. explicitly no
data (null).

3. What are closures in JavaScript?

• Closures are functions that retain access to their lexical scope even after the outer function has
returned.

function outer() {
let counter = 0;

1
 return function () {
counter++;
return counter;
};
}
const count = outer();
[Link](count()); // 1

• Real-world use case: Encapsulating state in UI components.

4. What is hoisting?

• Hoisting is JavaScript’s behavior of moving declarations to the top of their scope.

[Link](x); // undefined
var x = 5;

• Real-world use case: Understand hoisting to avoid reference errors and bugs.

5. What is the difference between synchronous and asynchronous code?

• Synchronous: Code executes line-by-line.

• Asynchronous: Allows operations to run in the background (like network calls).

[Link]('A');
setTimeout(() => [Link]('B'), 0);
[Link]('C');
// Output: A, C, B

6. What is the event loop?

• The event loop is a mechanism that handles the execution of multiple chunks of code, including
asynchronous code.
• It takes items from the queue and places them in the call stack.
• Real-world use case: Handling UI responsiveness and background tasks.

7. What are promises?

• Promises represent a value that may be available now, or in the future.

fetch('/api/data')
.then(response => [Link]())
.then(data => [Link](data));

• Real-world use case: Handling async API requests.

8. What is async/await?

• Syntactic sugar for working with promises.

2
 async function getData() {
const response = await fetch('/api');
const data = await [Link]();
return data;
}

9. What is a higher-order function?

• A function that takes another function as an argument or returns one.

function multiplier(factor) {
return function(x) {
return x * factor;
}
}

• Real-world use case: Array methods like .map() , .filter() .

10. What is currying?

• Currying is the process of transforming a function with multiple arguments into a sequence of
functions.

function add(a) {
return function(b) {
return a + b;
}
}

11. What is debouncing?

• Debouncing limits the rate at which a function is fired by ensuring it only runs after a specified
delay.

function debounce(fn, delay) {

let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}

• Real-world use case: Optimize performance in search input or window resize.

12. What is throttling in JavaScript?

• Throttling limits a function to be called at most once in a specified time period.

3
 function throttle(fn, delay) {
let lastCall = 0;
return function (...args) {
const now = new Date().getTime();
if (now - lastCall >= delay) {
lastCall = now;
fn(...args);
}
};
}

• Real-world use case: Reducing scroll event listener frequency.

13. What is the difference between slice and splice?

• slice(start, end) : Returns a shallow copy of a portion of an array.

• splice(start, deleteCount, item1, item2, ...) : Modifies original array by removing
or adding items.

const arr = [1, 2, 3, 4];

[Link](1, 3); // [2, 3]
[Link](1, 2); // [2, 3], arr becomes [1, 4]

14. What is the difference between typeof and instanceof ?

• typeof returns a string indicating the type of a primitive.

• instanceof checks whether an object is an instance of a constructor.

typeof "hello"; // "string"

[] instanceof Array; // true

15. What is the difference between [Link]() and [Link]() ?

• [Link]() : Makes an object immutable.

• [Link]() : Prevents adding or removing properties but allows changing existing ones.

16. What is the use of this keyword?

• Refers to the current object context.

• Varies by call context, function type (normal vs arrow), and scope.

17. What is event delegation?

• A technique of using a single event listener to handle events on multiple child elements.

[Link]("parent").addEventListener("click", function(e) {
if ([Link] && [Link](".child")) {
[Link]("Child clicked");

4
 }
});

18. What are Immediately Invoked Function Expressions (IIFE)?

• Functions executed right after they are defined.

(function() {
[Link]("IIFE called");
})();

• Real-world use case: Avoid polluting global scope.

19. What is memoization?

• Caching function results to improve performance.

const memo = {};

function fib(n) {
if (memo[n]) return memo[n];
if (n <= 1) return n;
return memo[n] = fib(n - 1) + fib(n - 2);
}

20. What is a factory function?

• A function that returns a new object.

function createUser(name) {
return {
name,
greet() {
return `Hello, ${name}`;
}
};
}

21–30. [... existing section as already written ...]

[Link] Questions

1. What is [Link]?

• [Link] is a progressive JavaScript framework for building interactive web interfaces. It focuses on
the view layer and is easy to integrate with other libraries or existing projects.
• Real-world use case: Vue is commonly used in dashboards, internal tools, and single-page
applications where reactivity and performance are essential.

5
2. What are Vue components?

• Components are reusable Vue instances with their own name and logic.
• Real-world use case: Modular structure in large applications like dashboards.

3. What is the Vue lifecycle?

• Lifecycle hooks allow you to run code at specific stages.

created() {}, mounted() {}, updated() {}, destroyed() {}

• Real-world use case: API calls in mounted , cleaning up in destroyed .

4. What is the difference between props and data in Vue?

• props : Data passed from parent to child.

• data : Local state of the component.

5. What are computed properties?

• Computed properties are cached values that update only when dependencies change.

6. What is the difference between v-if and v-show?

• v-if : Conditional rendering (adds/removes from DOM).

• v-show : Toggles visibility with CSS (always in DOM).

7. How does Vue handle reactivity?

• Vue uses getters/setters to track dependencies and reactively update DOM.

8. What is a watch in Vue?

• Watches observe data and run logic when it changes.

9. How to communicate between components?

• Parent to child: props

• Child to parent: \$emit
• Sibling: Vuex/store or event bus

10. What is Vuex?

• Vuex is a centralized state management pattern for Vue applications.

Vue Advanced Topics

1. What is Vue Router?

• Vue Router is the official routing library for [Link] that enables navigation between pages using
routes. It supports nested routes, dynamic segments, navigation guards, lazy loading, and
history modes (hash vs. history API).

6
 • Real-world use case: Routing in a blog platform, where different components handle post
details, categories, and author views, all dynamically routed using Vue Router.

2. What are Navigation Guards in Vue Router?

• Navigation guards control access to routes.

beforeEnter: (to, from, next) => {

if (auth) next();
else next('/login');
}

• Real-world use case: Redirect unauthenticated users to login.

3. What is Vue Teleport?

• Allows rendering a component outside its parent.

<teleport to="#modal">Modal Content</teleport>

• Real-world use case: Modals, popups.

4. What are Fragments in Vue 3?

• Multiple root nodes allowed in a component.

• Real-world use case: Cleaner template structure.

5. What is Composition API?

• A new way of organizing component logic in Vue 3 using setup() .

setup() {
const count = ref(0);
return { count };
}

Angular Questions

1. What is Angular?

• Angular is a TypeScript-based open-source web framework developed by Google for building

large-scale, maintainable single-page applications (SPAs). It uses a component-based
architecture and provides features like dependency injection, routing, and forms out of the box.
• Real-world use case: Used in enterprise-grade applications such as admin dashboards, e-
commerce sites, and CMS platforms.

2. What is a component in Angular?

• Angular components are the basic building blocks of an Angular application.

7
 • Each component consists of an HTML template, a CSS stylesheet, and a TypeScript class.
• Real-world use case: Reusable widgets like modals, headers, and product cards.

3. What are directives in Angular?

• Directives are instructions in the DOM that enhance behavior.

• Structural directives like *ngIf , *ngFor and attribute directives like [ngClass] ,
[ngStyle] .
• Real-world use case: Showing/hiding elements, looping through data.

4. What is data binding in Angular?

• The mechanism to bind data between component and template.

• Types: Interpolation, Property Binding, Event Binding, Two-way Binding.

<input [(ngModel)]="username">

• Real-world use case: Real-time form updates.

5. What is Dependency Injection in Angular?

• A design pattern to supply a component with dependencies like services.

• Angular handles it using providers and injectors.
• Real-world use case: Sharing data across components via services.

6. What are Angular services?

• Services are singleton classes used to share business logic and data.
• Registered using the @Injectable() decorator.
• Real-world use case: User authentication service, shared cart service.

7. What are pipes in Angular?

• Pipes transform data in templates.

{{ amount | currency:'INR' }}

• Custom pipes can be created for reusable logic.

8. What is Angular routing?

• Enables navigation between views using URLs.

• Uses RouterModule , route configuration, and <router-outlet> .
• Real-world use case: Navigating between home, about, and dashboard pages.

9. What is lazy loading in Angular?

• Loads feature modules only when needed.

• Improves initial load performance.

8
 loadChildren: () => import('./admin/[Link]').then(m => [Link])

10. What are lifecycle hooks in Angular?

• Special methods that execute at specific points in a component's lifecycle.

• Examples: ngOnInit , ngOnDestroy , ngOnChanges , etc.

ngOnInit() {
[Link]();
}

Angular Advanced Topics

1. What is Change Detection in Angular?

• Angular checks and updates the DOM when component state changes.
• [Link] improves performance by checking only on input
changes.

2. What is Ahead-of-Time (AOT) Compilation?

• Angular compiles HTML and TypeScript into JavaScript during build time.
• Faster rendering and better security.

3. What are Guards in Angular?

• Used to control access to routes: CanActivate , CanDeactivate , Resolve , CanLoad .

canActivate: [AuthGuard]

4. What is NgZone?

• Angular uses NgZone to detect async operations and trigger change detection.
• Useful in performance optimization and third-party library integration.

5. What is Angular Universal?

• Server-side rendering for Angular apps.

• Improves SEO and initial load performance.

Micro Frontend Architecture

1. What is Micro Frontend Architecture?

• Splitting a monolithic frontend into smaller, independently deployable pieces.

• Each team can own and develop a feature end-to-end.

9
2. How are micro frontends implemented?

• Using iframes, Web Components, Module Federation (Webpack 5).

• Shared shell app or layout that loads micro apps dynamically.

3. Benefits of micro frontends:

• Independent deployment, better scalability, team autonomy, technology diversity.

4. Real-world use case:

• E-commerce platform with separate apps for cart, product catalog, checkout.

5. What are challenges?

• Performance overhead, shared dependencies, consistent UI/UX, routing coordination.

21. What is the difference between == and === in JavaScript?

• == performs type coercion, comparing values after converting types.

• === checks both value and type strictly.

0 == '0' // true
0 === '0' // false

• Real-world use case: Always use === to avoid unexpected bugs due to type coercion.

22. What are truthy and falsy values in JavaScript?

• Truthy: Values evaluated as true in a Boolean context (e.g., 1 , 'text' , [] , {} ).

• Falsy: Values evaluated as false (e.g., false , 0 , '' , null , undefined , NaN ).

if ('') [Link]('Truthy'); else [Link]('Falsy'); // Falsy

23. What is type coercion in JavaScript?

• Implicit conversion of one data type to another.

[Link]('5' + 1); // '51' due to coercion of number to string

• Real-world use case: Often encountered during form input validations or template rendering.

24. What is the difference between deep equality and shallow equality?

• Shallow equality: Compares only references.

• Deep equality: Recursively checks all properties.

10
 const a = { x: 1 };
const b = { x: 1 };
[Link](a === b); // false

25. What are spread and rest operators?

• Spread (``): Expands elements.

• Rest (``): Gathers items into an array.

const arr = [1, 2];

const copy = [...arr]; // spread
function sum(...args) { return [Link]((a, b) => a + b); } // rest

26. What is the temporal dead zone (TDZ)?

• The time between variable hoisting and its initialization.

[Link](x); // ReferenceError
let x = 5;

27. What are async generators?

• Functions that use both async and * , allowing await and yield together.

async function* asyncGen() {

yield await [Link](1);
}

28. What is [Link] ?

• A built-in symbol that defines a default iterator.

const obj = {
*[[Link]]() {
yield 1; yield 2;
}
};

29. What is the difference between microtask and macrotask queues?

• Microtasks: .then , MutationObserver — higher priority.

• Macrotasks: setTimeout , setInterval .

[Link]().then(() => [Link]('Micro'));

setTimeout(() => [Link]('Macro'));

11
30. What is the event loop doing exactly?

• Continuously checks the call stack and task queues, pushing callbacks when the stack is clear.
• Drives async behavior of JavaScript runtime (e.g., [Link] or browser).

31. What are callbacks in JavaScript?

• A callback is a function passed as an argument to another function, to be executed later.

function greet(name, callback) {

[Link]("Hello " + name);
callback();
}
greet("Alice", () => [Link]("Callback called"));

• Real-world use case: Used for async operations like loading scripts or responding to events.

32. What are arrow functions?

• A concise syntax for writing functions. They do not bind their own this , arguments , or
super .

const add = (a, b) => a + b;

• Real-world use case: Useful for inline callbacks in array methods like .map() or .filter() .

33. What is the difference between var, let, and const?

• var : Function-scoped, hoisted.

• let : Block-scoped, not hoisted to top of block.
• const : Block-scoped, cannot be reassigned.

var x = 10; // re-declarable

let y = 20; // not re-declarable
const z = 30; // not re-declarable or reassignable

34. What is destructuring in JavaScript?

• A syntax for extracting values from arrays or properties from objects into variables.

const [a, b] = [1, 2];

const { name, age } = { name: 'John', age: 30 };

• Real-world use case: Extracting props in React or config settings from an object.

35. What is optional chaining?

• Allows safe access to deeply nested object properties.

12
 const city = user?.address?.city;

• Real-world use case: Avoid TypeError when accessing API response data.

36. What is nullish coalescing operator ?? ?

• Returns right-hand operand if left-hand is null or undefined .

let name = null;

let display = name ?? "Guest"; // "Guest"

37. What are template literals?

• String interpolation using backticks ( ` ) and ${} syntax.

const name = "Alice";

[Link](`Hello, ${name}`);

38. What is the difference between call, apply, and bind?

• call() : Calls a function with given this and arguments.

• apply() : Same as call() but arguments are passed as an array.
• bind() : Returns a new function with bound this .

function greet() { [Link]([Link]); }

const user = { name: 'John' };
[Link](user);
[Link](user);
const boundGreet = [Link](user);
boundGreet();

39. What is a pure function?

• A function with no side effects and returns the same output for the same input.

function add(a, b) {
return a + b;
}

• Real-world use case: Important in functional programming and testing.

40. What is event bubbling and event capturing?

• Event bubbling: Event propagates from target element up to ancestors.

• Event capturing: Event propagates from ancestors down to the target.

13
 [Link]("child").addEventListener("click", function () {},
true); // Capturing

• Real-world use case: Implementing event delegation or intercepting events before they reach
the target.

41. What is the use of setTimeout with 0 milliseconds?

• It delays the execution of a function until the current call stack is cleared.

[Link]("Start");
setTimeout(() => [Link]("Timeout"), 0);
[Link]("End");

• Output: Start, End, Timeout

• Real-world use case: Deferring execution after rendering or DOM updates.

42. What are JavaScript Generators?

• Functions that can pause and resume execution using function* and yield .

function* gen() {
yield 1;
yield 2;
}
const g = gen();
[Link]([Link]().value); // 1

• Real-world use case: Used in async workflows or implementing iterators.

43. What is a Symbol in JavaScript?

• A Symbol is a unique and immutable primitive used as a key for object properties.

const sym = Symbol("desc");

const obj = { [sym]: 42 };

• Real-world use case: Avoid name collisions in libraries or frameworks.

44. What is JSON and how is it used?

• JSON (JavaScript Object Notation) is a lightweight data-interchange format.

const obj = { name: "John" };

const jsonStr = [Link](obj);
const parsed = [Link](jsonStr);

• Real-world use case: Data exchange between client and server.

14
45. What is a [Link] and [Link]?

• [Link] : Waits for all promises to resolve or any to reject.

• [Link] : Resolves/rejects as soon as one promise settles.

[Link]([p1, p2])
[Link]([p1, p2])

• Real-world use case: Loading multiple resources simultaneously.

46. What is a WeakMap?

• A WeakMap is a collection of key/value pairs where keys must be objects and are weakly
referenced.
• Real-world use case: Private data for objects, avoiding memory leaks.

47. What are the differences between [Link]() and [Link]() ?

• map() returns a new array with transformed values.

• forEach() performs side-effects without returning anything.

const nums = [1, 2, 3];

const doubled = [Link](n => n * 2);
[Link](n => [Link](n));

48. What is optional parameter default value in functions?

• Assign default values to parameters if not provided.

function greet(name = "Guest") {

[Link]("Hello " + name);
}

49. What are tagged template literals?

• Special kind of function call using backticks and custom parsing.

function tag(strings, name) {

return `${strings[0]}${[Link]()}`;
}
tag`Hello ${"john"}`;

50. What is object shorthand in ES6?

• Shorthand syntax for assigning properties from variables.

15
 const name = "John";
const obj = { name };

51. What is the rest operator?

• Gathers remaining elements into an array.

function sum(...args) {
return [Link]((a, b) => a + b);
}

52. What is the spread operator?

• Expands an array or object.

const nums = [1, 2];

const more = [...nums, 3];

53. What are JavaScript modules?

• Modules let you export and import code between files.

// [Link]
export const x = 10;
// [Link]
import { x } from './[Link]';

• Real-world use case: Splitting code into reusable, maintainable parts.

54. What is the difference between deep copy and shallow copy?

• Shallow copy: Only top-level references are copied.

• Deep copy: All nested objects are recursively copied.

const shallow = { ...original };

const deep = [Link]([Link](original));

16