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) {
o.count++;
}
increment(obj); // obj.count 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;
console.log(a); // undefined
let b = null;
console.log(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();
console.log(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.

console.log(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).

console.log('A');
setTimeout(() => console.log('B'), 0);
console.log('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 => response.json())
.then(data => console.log(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 response.json();
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];

arr.slice(1, 3); // [2, 3]
arr.splice(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 Object.freeze() and Object.seal() ?

• Object.freeze() : Makes an object immutable.

• Object.seal() : 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.

document.getElementById("parent").addEventListener("click", function(e) {
if (e.target && e.target.matches(".child")) {
console.log("Child clicked");

4
 }
});

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

• Functions executed right after they are defined.

(function() {
console.log("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 ...]

Vue.js Questions

1. What is Vue.js?

• Vue.js 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 Vue.js 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/admin.module').then(m => m.AdminModule)

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() {
this.loadData();
}

Angular Advanced Topics

1. What is Change Detection in Angular?

• Angular checks and updates the DOM when component state changes.
• ChangeDetectionStrategy.OnPush 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 ('') console.log('Truthy'); else console.log('Falsy'); // Falsy

23. What is type coercion in JavaScript?

• Implicit conversion of one data type to another.

console.log('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 };
console.log(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 args.reduce((a, b) => a + b); } // rest

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

• The time between variable hoisting and its initialization.

console.log(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 Promise.resolve(1);
}

28. What is Symbol.iterator ?

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

const obj = {
*[Symbol.iterator]() {
yield 1; yield 2;
}
};

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

• Microtasks: .then , MutationObserver — higher priority.

• Macrotasks: setTimeout , setInterval .

Promise.resolve().then(() => console.log('Micro'));

setTimeout(() => console.log('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., Node.js 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) {

console.log("Hello " + name);
callback();
}
greet("Alice", () => console.log("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";

console.log(`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() { console.log(this.name); }

const user = { name: 'John' };
greet.call(user);
greet.apply(user);
const boundGreet = greet.bind(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
 document.getElementById("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.

console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("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();
console.log(g.next().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 = JSON.stringify(obj);
const parsed = JSON.parse(jsonStr);

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

14
45. What is a Promise.all and Promise.race?

• Promise.all : Waits for all promises to resolve or any to reject.

• Promise.race : Resolves/rejects as soon as one promise settles.

Promise.all([p1, p2])
Promise.race([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 Array.map() and Array.forEach() ?

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

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

const nums = [1, 2, 3];

const doubled = nums.map(n => n * 2);
nums.forEach(n => console.log(n));

48. What is optional parameter default value in functions?

• Assign default values to parameters if not provided.

function greet(name = "Guest") {

console.log("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]}${name.toUpperCase()}`;
}
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 args.reduce((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.

// module.js
export const x = 10;
// main.js
import { x } from './module.js';

• 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 = JSON.parse(JSON.stringify(original));

16