RxJS Flashcards

Category sponsor

RxJS (Reactive Extensions for JavaScript) is a powerful library for reactive programming, originally created by Microsoft and now developed by the open-source community. It is a key tool in the JavaScript ecosystem, designed to handle asynchronous operations and data streams. RxJS is characterized by a rich set of operators and flexibility, enabling efficient management of both simple and complex data flows in applications. This library offers advanced concepts such as Observable, Operators, and Schedulers, providing developers with tools to create responsive, efficient, and maintainable applications. RxJS also supports integration with various JavaScript frameworks and is regularly updated with new features and improvements, maintaining consistency with reactive concepts and enabling the development of scalable, event-driven applications in the browser and Node.js environment.

Our flashcard app includes 60 carefully selected RxJS interview questions with comprehensive answers that will effectively prepare you for any interview requiring RxJS knowledge. IT Flashcards is not just a tool for job seekers - it's a great way to reinforce and test your knowledge, regardless of your current career plans. Regular use of the app will help you stay up-to-date with the latest RxJS trends and keep your skills at a high level.

Sample RxJS flashcards from our app

Download our app from the App Store or Google Play to get more free flashcards or subscribe for access to all flashcards.

What is RxJS?

Reactive Extensions for JavaScript, also known as RxJS, is a programming library used for reactive programming in JavaScript. RxJS implements the Observer design pattern and allows for complex asynchronous operations and callback handling by providing event streams.

RxJS provides data structures called Observables, which in practice are streams of information that can be "observed". An Observer can subscribe to these streams and respond to the information flowing from them.

The key goal of the RxJS library is to assist in managing asynchronous operations and events in applications. It allows for transparent management of data streams, thereby simplifying work with code that is often confusing when using regular callbacks or promises.

RxJS is often used in conjunction with other libraries or front-end frameworks, such as Angular or React. Its popularity is also due to its support for many operators that allow for filtering, grouping, modifying, and many other operations on data streams.

What is the difference between Observable and Promise?

Observable and Promise are two different ways of representing asynchronous operations in JavaScript.

A Promise is an object that returns a single value in the future. At the time of creating the Promise object, the operation is already running and cannot be stopped. A Promise can be in one of three states: pending, fulfilled, or rejected.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise completed');
  }, 2000);
});

promise.then(result => console.log(result)); 
// After 2 seconds in the console will display 'Promise completed'

An Observable from RxJS, on the other hand, can return multiple values, or even an infinite amount, at any time. Subscribing to an Observable starts the operation, which can be stopped using the unsubscribe() method.

let observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('First callback');
    setTimeout(() => {
      observer.next('Second callback');
      observer.complete();
    }, 2000);
  }, 2000);
});

let subscription = observable.subscribe(result => console.log(result)); 
// After 2 seconds in the console will display 'First callback'
// After another 2 seconds in the console will display 'Second callback'
// At any time you can stop the observation with 'subscription.unsubscribe();'

In conclusion, one of the main differences between Observable and Promise is that Observable is 'lazy', which means that the Observable object will not perform the operation until it is subscribed, while Promise starts operations immediately after it is created. Another important difference is the ability to cancel an Observable observation, which is not possible with Promise.

Name some basic operators in RxJS.

RxJS offers many helpful operators that allow for the modification of data streams, reacting to changes, etc. Here are some of them:

1. map() - transforms the data coming from the observed stream.

2. filter() - allows for filtering data from the observable according to a specific criterion.

3. tap() - used to invoke side effects.

4. take() and first() - fetch a specific number of values from the observed stream.

5. debounceTime() and throttleTime() - allow for limiting the number of values emitted in a certain time frame, which is useful, for example, when responding to mouse movement or typing into a text field.

6. catchError() - enables handling of exceptions thrown by the observed source.

7. switchMap() and mergeMap() - allow to map each emitted value to an observable, which can then be merged with the streams.

8. combineLatest() - allows to combine streams from different sources.

9. of() and from() - these operators allow for creating observables from different types of data, e.g. arrays, Promises, iterables, and so on.

These are just the basic operators, but RxJS offers much more possibilities. Each operator has its specifics and is useful in different scenarios.

What types of Subject are there in RxJS?

In the RxJs library, we have four types of Subject at our disposal:

1. Plain Subject - This is the basic type of Subject. It emits a value to observers only at the time of emission and later. Previously emitted values are not available to new subscribers.

let subject = new Subject();
subject.next(1); // Will not be received by any observers
subject.subscribe((value) => console.log(value)); // Subscribes to future emissions
subject.next(2); // Will print '2'

2. Behavior Subject - Stores the last emitted value and supplies it to new subscribers immediately upon subscription. It must be initialized with an initial value.

let subject = new BehaviorSubject(1); // Initialized with the value '1'
subject.subscribe((value) => console.log(value)); // Prints '1' immediately after subscription
subject.next(2); // Will print '2'

3. Replay Subject - You can specify how many of the last values it should store and deliver to observers. It stores time information, so we can access specific data, for example, from a minute ago.

let subject = new ReplaySubject(2); // Will store the last 2 values
subject.next(1);
subject.next(2);
subject.next(3);
subject.subscribe((value) => console.log(value)); // Will print '2', '3'

4. Async Subject - Emits the last value only when the Subject has finished operating.

let subject = new AsyncSubject(); // Will only emit the last value and only upon completion
subject.next(1);
subject.next(2);
subject.subscribe((value) => console.log(value)); // Will not yet print anything
subject.next(3);
subject.complete(); // Since the operation is completed, it will emit the last value. Will print '3'