Introduction

Les opérateurs RxJs sont des fonctions applicable dans le cadre de la programmation réactive. Un des opérateurs les plus courants est l'opérateur map.

L'opérateur map d'RxJs fonctionne de la même manière que le Array.prototype.map() de JavaScript.

La méthode Array.prototype.map() s'applique sur un tableau et renvoie une nouvelle instance de ce tableau après avoir appliqué une fonction à chaque élément. Pour l'opérateur map d'RxJS, c'est pareil mais la fonction s'applique sur le contenu d'un Observable RxJS.

Fonctionnement de l'opérateur map

Alors comment fonctionne précisément l'opérateur map ?

Il applique une fonction donnée à chaque valeur émise par l'Observable et renvoi les valeurs résultantes dans un nouvel Observable.

Exemple :

Chaque valeur émise par l'Observable source (x) passe dans la fonction (x => 10*x), puis est émise par l'Observable renvoyée par l'opérateur map.

1
2
const newOb = of(1,2,3).pipe(map(n => 10 * n)); 
newOb.subscribe(n => console.log(n)); // 10, 20, 30

L'opérateur of() étant l'Observable source dans cet exemple, avec l'utilisation de map() et de pipe(), newOb est l'Observable de sortie.

Si vous vous souscrivez à newOb, vous recevrez les donc les valeurs de l'Observable source, après transformation par l'opérateur map. Vous recevrez donc le même nombre de valeur que si vous aviez souscrit à l'Observable source, elles auront juste été "mappées" en une autre valeur.

Signature de l'opérateur

La signature de l'opérateur map est complexe à lire. Décryptons-la ensemble :

1
map<T, R>(project: (value: T, index: number) => R, thisArg?: any): OperatorFunction<T, R>

Qu'est-ce que cela veut dire ?

Tout d'abord T et R sont des types quelquonques. T est le type de la valeur émise et R le type de la valeur après transformation.

Le paramètre project est la fonction de mapping qui s'applique sur la valeur émise (de type T) de l'Observable source. Cette fonction project renvoie donc un objet de type R.

Ensuite l'index (optionnel) représente le nombre d'émission qui s'est produite depuis l'abonnement (à partir de 0).

Et enfin le paramètre optionnel thisArg sert à définir définir le contenu du this de la fonction de mapping project dans le cas où cette fonction utiliserait une valeur de this.

Cas d'utilisation de map

En cas réel, l'opérateur map est principalement utilisé pour transformer la donnée renvoyée par un Observable avant consommation de l'Observable dans un composant d'application.

Par exemple, dans Angular vous avez des services qui contactent votre serveur et vous donne la donnée du serveur via un Observable.

Si votre composant ne consomme pas exactement le même format de donnée que ce que le serveur vous a renvoyé, vous voudrez placer un opérateur map sur votre Observable, pour formater la donnée pour les besoins de votre application.

Conclusion

J'espère que cet article vous a aidé à y voir plus clair sur cet opérateur et que vous savez désormais comment l'utiliser.

N'hésitez pas à laisser un commentaire si vous avez des remarques ou des questions !