RXJS Interview Questions

Reactive Extensions for JavaScript or RxJS is a popular library for composing asynchronous and event-based programs by using Observable Design Pattern. Here are some common RxJS interview questions along with their answers:

1. What is RxJS?

RxJS (Reactive Extensions for JavaScript) is a library for composing asynchronous and event-based programs using observable sequences and LINQ-style query operators. It allows us to work with asynchronous data streams in a more manageable and declarative way.

2. Explain the concept of Observables.

Observables represent a stream of data that can be observed over time. They are the core building block of RxJS and can emit values synchronously or asynchronously. Observables support operators for transforming, filtering, combining, and handling the emitted data. We can subscribe to an Observable to receive the emitted values.

3. What is the difference between Subject and BehaviorSubject?

• Subject: A Subject is a type of Observable that allows values to be multicasted to multiple Observers. It doesn’t hold any data and doesn’t emit past values to new subscribers.
• BehaviorSubject: A BehaviorSubject is a type of Subject that requires an initial value and always emits the most recent value to new subscribers. This means that when a new subscriber subscribes, it immediately receives the last emitted value.

4.What are some common operators in RxJS?

• map: Transforms the emitted values from an Observable.
• filter: Emits only values that pass a specified condition.
• mergeMap (or flatMap): Projects each value to an Observable and merges the resulting Observables.
• switchMap: Projects each value to an Observable and switches to the latest Observable, cancelling previous ones.
• concatMap: Projects each value to an Observable and concatenates the resulting Observables in order.
• combineLatest: Combines the latest values from multiple Observables.
• take: Emits only the first N values from the Observable.

5. What is the difference between mergeMap, switchMap, and concatMap?

• mergeMap: Projects each source value to an Observable and merges the results into a single Observable. All projected Observables are subscribed to concurrently, so it’s suitable for cases where you want to process multiple requests simultaneously.
• switchMap: Projects each source value to an Observable and switches to the latest Observable. It cancels previous inner Observables when a new value is emitted, making it suitable for scenarios where only the result of the latest request is needed.
• concatMap: Projects each source value to an Observable and concatenates the results. It waits for each Observable to complete before moving on to the next one, ensuring that results are processed in order.

6. How does error handling work in RxJS?

Error handling in RxJS can be managed using operators such as catchError and retry.

• catchError: Catches errors on the source Observable and allows you to handle them by returning a new Observable or throwing an error.
• retry: Resubscribes to the source Observable a specified number of times or indefinitely if a specified condition is met.

Example:

import { of, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

of('data').pipe(
  map(value => {
    if (value === 'data') {
      return throwError('An error occurred');
    }
    return value;
  }),
  catchError(err => {
    console.error(err);
    return of('default value'); // Return a fallback value
  })
).subscribe(console.log);

7. What are Higher-Order Observables?

Higher-Order Observables are Observables that emit other Observables. The emitted Observables are often referred to as inner Observables. Operators such as mergeMap, switchMap, and concatMap are used to work with Higher-Order Observables by flattening the emitted Observables into a single Observable stream.

8. What is a Scheduler in RxJS?

A Scheduler in RxJS controls the timing and execution of Observables. It determines when the work (such as emitting values) is done, and it can be used to manage concurrency. Common schedulers include:

• asyncScheduler: Schedules work asynchronously using setTimeout.
• queueScheduler: Schedules work synchronously in the order it is added.
• animationFrameScheduler: Schedules work to run in the next animation frame.

Schedulers can be passed to operators to control the execution of Observable tasks.

9. Explain ReplaySubject.

A ReplaySubject is a type of Subject that records multiple values and replays them to new subscribers. Unlike BehaviorSubject, which only replays the most recent value, ReplaySubject can be configured to replay a specified number of past values or values within a certain time window.

10. How can you debounce user input in RxJS?

You can debounce user input using the debounceTime operator, which emits a value from the source Observable only after a specified time period has elapsed without any new input.

Example:

import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

const input = document.querySelector('input');

fromEvent(input, 'input').pipe(
  debounceTime(300),
  map(event => event.target.value)
).subscribe(value => {
  console.log(value); // Logs input value after 300ms of inactivity
});