Salesforce Interview JavaScript Interview Questions

JavaScript is a high-level, interpreted programming language used to create interactive web pages.

• Runs on browsers for client-side scripting.
• Used on servers via Node.js.
• Powers mobile, desktop, and game applications.

• var: function-scoped, redeclarable, hoisted with undefined.
• let: block-scoped, cannot redeclare in same scope, hoisted but uninitialized.
• const: block-scoped, cannot reassign, must initialize.

Hoisting moves variable and function declarations to the top of their scope before execution. Only declarations are hoisted, not initializations.

Synchronous: Executes line-by-line and blocks.

Asynchronous: Non-blocking; uses callbacks, promises, async/await.

A closure is a function that retains access to its lexical scope even after the outer function has returned.

Primitive: String, Number, Boolean, Null, Undefined, Symbol, BigInt.

Non-primitive: Object, Array, Function.

== compares values with type coercion.

=== compares value and type strictly. Prefer strict equality.

The event loop handles asynchronous callbacks, allowing JavaScript to remain non-blocking despite being single-threaded.

null: explicitly assigned to indicate no value.

undefined: declared but not assigned.

Functions in JavaScript are treated as values, enabling assignment, passing as arguments, and returning from functions.

Declaration is hoisted and callable before definition; expression is assigned at runtime and not hoisted the same way.

this refers to current execution context. Arrow functions inherit this from their parent scope.

• call: invoke with arguments list.
• apply: invoke with arguments array.
• bind: returns a new function with bound this.

Every object has a prototype from which it can inherit methods and properties.

ES6 adds let/const, arrow functions, classes, modules, promises, destructuring, template literals, and more.

Promises represent asynchronous results with states: pending, fulfilled, rejected.

Async/await simplifies working with promises, making asynchronous code readable and sequential.

Shallow copy duplicates top-level properties; deep copy recursively duplicates all nested data.

Inside loop, let creates a new binding for each iteration, preventing closure-related bugs.

Event delegation uses a single parent listener to manage events for child elements using event bubbling.

Function scope: Variables declared with var are accessible throughout the function.

Block scope: Variables declared with let or const are limited to the enclosing braces {}.

Block scope reduces bugs and prevents variable leakage.

A closure is a function that retains access to its outer scope even after the outer function has finished executing.

Use cases: private variables, memoization, function factories, event handlers.

The DOM represents HTML as objects. JavaScript can select, modify, create, and remove elements using DOM APIs.

Bubbling: Events propagate from child to parent.

Capturing: Events propagate from parent to child.

Controlled using addEventListener(..., true).

• innerHTML: Reads/writes HTML.
• innerText: Visible text only, respects CSS.
• textContent: Raw text without parsing HTML.

Use backticks for multi-line strings and interpolation.

`Hello ${name}`

Arrow functions have shorter syntax, do not have their own this, and cannot be used as constructors.

Functions that receive or return other functions. Used in map, filter, reduce, and event handling.

• forEach: executes callback but returns undefined.
• map: returns a new transformed array.
• filter: returns items that match a condition.

setTimeout: runs code once after delay.

setInterval: runs repeatedly at intervals.

Synchronous DOM updates block rendering. Asynchronous updates use Promises or requestAnimationFrame to avoid UI jank.

A promise represents future completion. Chaining uses .then() and .catch() for sequential async workflows.

localStorage: persistent key-value.

sessionStorage: session-limited key-value.

cookies: small data sent with requests, used for auth.

Synchronous blocks the main thread; asynchronous uses callbacks/promises and does not block.

Browsers enforce CORS. Servers must send headers allowing specific origins.

Attach listener to parent instead of each child. Better performance and supports dynamic elements.

• call: invoke with this + args list.
• apply: invoke with this + args array.
• bind: returns a new function with bound this.

== compares with coercion; === compares type + value strictly.

null: intentional empty value.

undefined: declared but not assigned.

IIFEs run immediately after creation. They isolate scope and avoid global pollution.

ES6 modules allow splitting code into separate files using export and import.

• Better code organization
• No global namespace pollution
• Supports tree shaking for optimized builds

Default export: One per module, imported without braces.

Named export: Multiple per module, imported using braces.

Template literals use backticks for interpolation and multi-line strings.

Tagged templates allow processing template literals with custom functions.

Destructuring extracts values from arrays or objects into variables.

Rest (...): collects remaining elements.

Spread (...): expands iterable elements.

Allows functions to use default values when arguments are missing.

Arrow functions inherit this from the surrounding scope, making them ideal for callbacks.

var: function-scoped.

let: block-scoped.

const: block-scoped, cannot reassign.

Promises represent async completion. Chaining uses .then() and .catch() for sequential workflow.

async functions return promises. await pauses execution until promise resolves.

Microtasks: Promises, queueMicrotask.

Macrotasks: setTimeout, setInterval, I/O.

The event loop manages asynchronous execution, processing synchronous code, microtasks, then macrotasks.

Shallow copy: top-level copy.

Deep copy: recursive copy without shared references.

Symbol is a unique primitive used for unique object keys and meta-programming.

Set: stores unique values.

Map: stores key-value pairs with any type of key.

Store weak references to objects, allowing garbage collection. Useful for memory-sensitive caching.

Generators pause/resume execution using yield. Useful for lazy evaluation and iterators.

Modules have their own scope; global scripts share the global namespace.

Use .catch() with promises and try/catch with async/await.

JavaScript uses automatic garbage collection. Developers must avoid leaks by cleaning listeners, closures, and timers.

Web APIs provide browser-based functionalities accessible to JavaScript.

Examples include:

• DOM API
• Fetch API
• Web Storage
• WebSockets
• Canvas API
• Service Workers

They enable dynamic, interactive, and offline-capable web applications.

The Fetch API is promise-based and easier to work with than XMLHttpRequest.

• Simpler syntax and chaining
• Returns Response objects
• Better error handling
• Supports streaming and CORS

Service workers run in the background, independent of web pages.

• Enable offline support
• Implement caching strategies
• Handle push notifications
• Provide background sync

They form the foundation of Progressive Web Apps (PWAs).

WebSockets provide full-duplex communication over a single TCP connection.

Use cases include:

• Real-time chat
• Live stock updates
• Gaming
• Live dashboards

• localStorage: Persistent key-value storage.
• sessionStorage: Data persists for session only.
• IndexedDB: Client-side NoSQL database for structured data.

requestAnimationFrame syncs animations with browser repaint cycles.

Improves smoothness and reduces CPU usage compared to timers.

• Minimize reflows and repaints
• Use document fragments
• Batch DOM updates
• Cache selectors
• Avoid layout thrashing

Debouncing: Trigger function after a delay of inactivity.

Throttling: Trigger function at fixed intervals.

Useful for scroll, resize, and search inputs.

Memory leaks occur when unused objects remain referenced.

• Dangling references
• Uncleared timers
• Unremoved event listeners
• Closures holding unnecessary data

Remove listeners, clear intervals, and nullify unused references.

Synchronous: Execution blocks until complete.

Asynchronous: Returns immediately, uses callbacks or promises.

Design patterns are reusable solutions to common problems.

• Module
• Singleton
• Observer
• Factory
• MVC

Module pattern encapsulates private variables using closures.

Exposes only public methods, preventing namespace pollution.

The observer pattern allows objects to subscribe to changes in another object.

Useful for events, data binding, and reactive programming.

Singleton: Only one instance allowed.

Factory: Creates objects without exposing creation logic.

Lazy loading delays loading non-critical resources until needed.

Used for images, scripts, and modules to improve load time.

Async iterators allow iteration over asynchronous data streams.

for-await-of simplifies consuming async sequences.

Web Workers run scripts in background threads.

Prevent blocking the main UI thread during heavy computations.

• Sanitize inputs to prevent XSS
• Use HTTPS
• Implement CSP
• Prevent CSRF

Capturing: Event flows parent ? child.

Bubbling: Event flows child ? parent.

• Minimize DOM operations
• Use event delegation
• Apply lazy loading
• Debounce/throttle events
• Prevent memory leaks
• Split code into modules

Synchronous programming executes code line by line, blocking execution until each task finishes.

Asynchronous programming allows code to run without blocking, enabling concurrent operations such as network calls, timers, or file I/O.

This is essential for responsive and non-blocking web applications.

Callback hell occurs from deeply nested callbacks. Solutions include:

• Promises – chain operations instead of nesting.
• Async/await – write asynchronous code in synchronous style.
• Modular functions – split logic into reusable functions.

Promise chaining allows sequential async operations using .then().

Errors propagate through the chain until handled by .catch(), preventing further execution.

Microtasks: Executed immediately after current execution stack (Promises, queueMicrotask).

Macrotasks: Executed in next event loop turn (setTimeout, setInterval, I/O).

Crucial for understanding async flow and ordering.

Async iterators allow iteration over asynchronous data streams using for-await-of.

Useful for consuming streamed data or paginated API results.

The Observer pattern enables one-to-many communication where observers are notified on state changes.

Widely used in event systems, reactive UIs, and data-binding frameworks.

Pub-Sub decouples senders (publishers) from receivers (subscribers) through a central event hub.

Useful for modular architectures, micro frontends, and Node.js event emitters.

Throttling: Ensures function runs at most once per interval.

Debouncing: Delays execution until activity has stopped.

Used to optimize scroll, resize, and input-heavy interactions.

• Callbacks: Basic async, but prone to nesting and complexity.
• Promises: Provide cleaner chaining and error handling.
• Async/await: Makes async code look synchronous for readability.

Async operations may retain references via closures, causing memory leaks.

• Clear timers and intervals
• Abort unused fetch requests
• Remove event listeners
• Nullify long-lived references

Use try/catch for async/await or .catch() for promises.

Differentiate between:

• Network errors
• HTTP status failures
• Logical/validation errors

Service workers run in background threads and enable offline capabilities.

Caching strategies include:

• Cache-first – load from cache, update later
• Network-first – fetch first, fallback to cache

Web Workers: CPU-intensive tasks, no DOM access.

Service Workers: Handle caching, offline, and network interception.

Lazy loading delays non-critical modules until needed.

Reduces initial load time and improves page performance.

Encapsulates private data in closures and exposes only selected public methods.

Enhances modularity and maintains clean global scope.

• Use sequential await
• Implement locks or semaphores
• Avoid shared mutable state
• Use atomic operations

Shallow copy: Copies top-level properties; nested references remain shared.

Deep copy: Recursively copies all properties.

Deep copies prevent async operations from interfering with each other.

Symbols are unique, immutable identifiers.

Used for private object keys or internal async state to avoid naming collisions.

• Use browser DevTools async stack traces
• Insert breakpoints in async code
• Use VSCode/Node.js debugger
• Log promise resolution paths

• Minimize DOM manipulation in async tasks
• Use throttling and debouncing
• Prefer async/await over nested promises
• Use Web Workers for heavy computations
• Clean up timers and event listeners

Closures allow functions to retain access to variables in their outer lexical environment, even after the outer function has executed. They are useful for encapsulation, private states, and modular structure in large apps. However, uncontrolled closures can lead to memory leaks when references persist longer than needed. Proper cleanup and scoped design help mitigate risks.

The Revealing Module Pattern encapsulates private variables and functions, exposing only selected methods or properties as the module’s public API. It improves maintainability, reduces global scope pollution, and enforces clean architecture in large applications.

Namespaces prevent global scope pollution by grouping related functions or modules together. Approaches include ES6 modules, IIFEs, or object-based namespaces. This improves maintainability and prevents naming conflicts in large applications.

Event delegation attaches one listener to a parent element and uses event bubbling to manage child interactions. It improves performance, reduces memory usage, and handles dynamic DOM updates efficiently, especially in data-heavy UIs like tables and lists.

Optimization includes batching DOM updates, using requestAnimationFrame, minimizing reflows/repaints, document fragments, and caching DOM references. Reduces performance bottlenecks in large-scale applications.

The virtual DOM is an in-memory representation of the UI. Frameworks compute diffs between old and new virtual trees and update only changed parts of the real DOM. This drastically improves rendering performance in complex UIs.

Patterns include Promises, async/await, observables, event-driven architecture, and concurrency handling via Promise.all or race conditions. Ensures scalable and responsive user interfaces.

Memoization caches results of expensive computations, improving performance when functions are repeatedly executed with the same inputs. Often used in UI rendering optimization or heavy computations.

Techniques include caching responses, debouncing/throttling requests, batching, retry strategies, cancellation tokens, and centralized error handling. These reduce network overhead and improve user experience.

Common patterns include Module, Revealing Module, Singleton, Factory, Observer, and Pub-Sub. They provide reusable solutions for complex architectural problems in large-scale JavaScript applications.

Memory management requires avoiding leaks caused by closures, unremoved event listeners, stale references, and long-running timers. Tools like Chrome Memory profiler help detect leaks, ensuring long-running app stability.

Web Workers allow CPU-heavy tasks to run in background threads, preventing the main thread from blocking. Essential for large apps needing image processing, analytics, or real-time data operations.

Lazy loading loads resources only when needed using dynamic imports, code-splitting, or IntersectionObserver for assets. Reduces initial page load time and improves performance.

Throttling limits how often a function executes within time intervals. Debouncing delays execution until inactivity. Both reduce unnecessary operations in scroll, resize, and input events.

State can be managed using Redux, MobX, Zustand, Context API, or observable-based patterns. Ensures predictable updates and avoids prop drilling in complex components.

Async iterators allow sequential handling of asynchronous data streams using for-await-of. Useful for paginated APIs or real-time feeds. Provides clear and controlled async flow.

Use locking mechanisms, sequential awaits, atomic operations, or cancellation tokens. Prevents inconsistent updates when multiple async tasks modify shared resources.

Bundlers like Webpack, Vite, or Rollup merge multiple modules into optimized bundles. Tree shaking removes unused exports, reducing bundle size and improving load performance.

Use Chrome DevTools for performance/memory profiling, inspect async call stacks, evaluate network usage, and detect memory leaks. Tools like Lighthouse and VSCode debugger provide deep insights.

Use modular structure, consistent naming, ES6+ features, linting, type checking, state management, and performance optimization techniques. Ensures scalability, testability, and maintainability in enterprise applications.

Modern JS frameworks rely heavily on ES6+ features such as modules, arrow functions, template literals, destructuring, and spread/rest operators. These enhance readability, modularity, tree-shaking, and component data management.

State is managed using hooks (React useState/useReducer), global stores like Redux/MobX, Angular services with RxJS, or NgRx. Centralized state prevents prop drilling and ensures predictable UI updates across large apps.

Observables represent streams of values over time. RxJS operators like map, filter, and switchMap allow transformation, cancellation, and concurrency control. Angular uses Observables extensively for HTTP, forms, and event streams.

React uses fetch/axios with promises or async/await. Angular uses HttpClient with Observables and operators like catchError. Proper error handling, retries, and cancellation improve reliability and avoid memory leaks.

React uses lifecycle methods (componentDidMount, componentDidUpdate) and useEffect hook. Angular uses lifecycle hooks like ngOnInit, ngOnChanges, ngOnDestroy. They manage initialization, subscriptions, cleanup, and reactive updates.

Techniques include lazy loading, code splitting, memoization (useMemo), pure pipes, virtual DOM optimizations, OnPush change detection, and debouncing/throttling heavy events.

Angular DI injects services into components instead of creating them manually. This improves modularity, testability, and code reuse. Providers can be scoped globally or to specific components.

Controlled components manage form state in React. Uncontrolled components rely on the DOM for state. Controlled components provide predictable UI updates, validation, and easier debugging.

React Router maps URLs to components, supports nested routes and lazy loading. Angular Router uses modules, guards, resolvers, and lazy loading for scalable route management.

Reactive forms are model-driven using FormBuilder and validators. Template-driven forms rely on directives like ngModel. Reactive forms support dynamic controls and complex validation logic.

Use event delegation, debounce/throttle for high-frequency events, and rely on framework-specific synthetic event systems for performance and cross-browser consistency.

Angular supports one-way and two-way binding using property binding, event binding, and ngModel. React prefers one-way binding through state with explicit updates. Proper binding ensures correct UI rendering.

HOCs are functions that take a component and return an enhanced component. Used for cross-cutting concerns like authentication, logging, and conditional rendering.

Angular services store shared logic and data. When providedIn: root is used, the service becomes a singleton, shared across the entire application unless scoped locally.

Use IntersectionObserver for image lazy loading. Use React lazy()/Suspense or Angular lazy-loaded modules for code splitting and reducing initial bundle size.

Promises handle single async responses. Observables handle multiple values, support cancellation, retries, and operators for complex async logic. Observables are ideal for dynamic event-driven applications.

Unsubscribe from observables, remove event listeners, clear timers, use WeakMap for caching, and avoid retaining references in closures or global state.

Operators like map, filter, switchMap, mergeMap, debounceTime enable data transformation, cancellation, concurrency control, and clean async flows in Angular applications.

Use OnPush strategy, immutable data structures, trackBy in ngFor, and detach change detectors when needed. Minimizes unnecessary component re-renders.

Separate business logic from UI, use modules/services for reusability, implement centralized state, optimize async behavior, avoid direct DOM manipulation, and follow consistent folder structure.