clientX and clientY coordinates. Or maybe you need to extract a value from a stream of input events to perform a calculation or initiate a request. Or perhaps you just want to extract a single property from an object, like a key code, to perform another action down the (pipe)line. The scenarios for transforming streams are endless.map operator. We will start by taking a look at Array.map to build a general understanding of the map operation. Next, we will explore how we can apply this approach to observables by using the RxJS map operator. Finally, we will check out a few helper operators that can be used in place of map should the right scenario present itself, exploring common use cases along the way. Let's get started!mapArray.map. When dealing with arrays, the map method lets you transform an array by applying a provided function (often referred to as a 'projection' function) to each item within the array. For instance, let's say we have an array of numbers 1-5:map method. To do this, we call map on our numbers array, passing it a function which will be invoked with each value of the source array, returning the number multiplied by ten:map method does not mutate the existing array, but instead returns a new array. For example, if we were to log the numbers array after calling map, we can see that it's unchanged:Array.map could look like.resultArray.Array.map includes features like index tracking and proper error management, this gives us a general sense of how things work behind the scenes.map method to use? Using Array.map, we may also want to transform objects. For instance, suppose we have an array of objects with a first and last name property and we want to tack on a full name property to each object. We could accomplish this by supplying a function that accepts each object and maps it to a new object that includes all current properties plus the new fullName property. In this example we are using the object spread syntax and template literals, but you could also explicitly rewrite the properties:map is extracting a single property from an object. For example, given the sample above suppose we decided we only really need the last name property for display. Instead of our function returning a new object, we can instead return just the property we need from that object:map method is extremely flexible with a wide variety of use cases, but how does this translate to map with RxJS, and when would you put this to use with observables?map operatormap operator in RxJS transforms values emitted from the source observable based on a provided projection function. This is similar to Array.map, except we are operating on each value emitted from an observable as it occurs rather than each value contained within an array.from creation operator to first convert our numbers array into an observable:from creation operator will loop through (synchronously) emitting each item in sequence. When we subscribe we can see each value printed to the console:from handles each value type behind the scenes, you can check out the subscribeTo, and associated helper functions. In this case, subscribeToArray is used. This same helper function is also used to deal with non-observable return values of flattening operators, such as mergeMap​map operator. Just like Array.map, the map operator accepts a project function which describes how each value from the source will be transformed. In this case, we will provide a function that accepts the emitted value from the source observable and returns that value multipled:map operator. For instance, suppose we have an observable of click events that we wish to transform into an observable of objects containing just the clientX and clientY coordinates of these events. To do this we could apply the map operator, providing a function that returns an object with just these properties:map. For example, we may have a use case for an observable of just the code property from keyup events, so we can take action when the user types a particular character or key. To do this we can apply the map operator returning just the property we are interested in:map works perfectly fine in these situations, RxJS also surfaces helper operators for cases where you just want to map to a single property or when you always want to map to the same value on any event. First, let's take a look at the single property scenario.pluckmap we could use pluck. The pluck operator accepts a list of values which describe the property you wish to grab from the emitted item. For instance, using our event code example from above we could use pluck instead of map to extract the code property from the event object:pluck multiple values to grab a nested property within an object. For example, if we wanted to grab the nodeName from the target element on click, we could pass both of these properties to pluck in order:pluck is simply reusing the map operator, passing it a function to grab the appropriate property:map and pluck will operate the same in these scenarios, I would suggest using whichever you feel most comfortable reading at a glance.mapTo operator.mapTomap and ignoring the input:map with mapTo, and simply provide the value you wish to return on all emissions:pluck, mapTo provides no real benefit functionally over returning a constant value with map, but syntactically it may prove slightly easier to consume and read at a glance.map is a versatile operator which lets you transform a stream using a provided projection function. Whether it's mapping to a keycode, value updates from an input box, or reshaping an object, map will be one of the most used operators in your day-to-day RxJS toolbox. For scenarios where you just need to map to a single property, or always want to map to a constant value, you can also check out the pluck and mapTo helper operators.