1 00:00:00,120 --> 00:00:07,410 In this lecture, we will look at one of the most popular operators from our SJS called the Map Operator. 2 00:00:07,740 --> 00:00:12,930 This operator will handle transforming a value pushed from an observable. 3 00:00:13,350 --> 00:00:17,520 We have complete control over the transformation of the value. 4 00:00:17,820 --> 00:00:21,180 It's very similar to the map function for an array. 5 00:00:21,630 --> 00:00:26,250 The main difference is that it'll work with observables instead of arrays. 6 00:00:26,760 --> 00:00:29,400 Let's see it in action in our scripts. 7 00:00:29,580 --> 00:00:34,080 We are going to replace the current observable with the of operator. 8 00:00:37,030 --> 00:00:41,830 We will use the same example from before we will pass in five numbers. 9 00:00:44,340 --> 00:00:51,210 Before outputting these numbers, we may want to transform them by adding a dollar sign symbol instead 10 00:00:51,210 --> 00:00:53,760 of modifying the observable directly. 11 00:00:53,970 --> 00:00:56,790 Let's modify it with a pipe operator. 12 00:00:57,150 --> 00:01:00,030 The other function returns and observable. 13 00:01:00,390 --> 00:01:03,870 Every observable object has a method called pipe. 14 00:01:04,230 --> 00:01:08,010 It's common practice to change this method on the observable. 15 00:01:10,560 --> 00:01:14,070 Inside this function, we can compose operators. 16 00:01:14,340 --> 00:01:18,370 First, we need to import them at the top of the file. 17 00:01:18,390 --> 00:01:24,240 We are going to make a new import statement from the SJS operators package. 18 00:01:26,670 --> 00:01:30,030 Palpable operators can be found in a different location. 19 00:01:30,420 --> 00:01:38,460 Operators that can be composed can be found under the SJS operators package, that's important to note. 20 00:01:38,820 --> 00:01:44,280 Are SGX has organized these pipe cable operators under a different package? 21 00:01:44,550 --> 00:01:47,040 Let's import the map operator. 22 00:01:49,620 --> 00:01:52,860 Next, let's call it inside the pipe function. 23 00:01:55,380 --> 00:02:02,100 We can configure the map operator by passing an arrow function, which accepts the value pushed from 24 00:02:02,100 --> 00:02:03,060 the observable. 25 00:02:05,560 --> 00:02:13,150 Keep in mind, the of operator will push a new value one at a time, each time a value is pushed, it'll 26 00:02:13,150 --> 00:02:14,890 go through the pipe function. 27 00:02:15,280 --> 00:02:18,190 The map operator will be given each value. 28 00:02:18,520 --> 00:02:21,910 The value argument represents a single value. 29 00:02:22,180 --> 00:02:25,360 It doesn't represent every value all at once. 30 00:02:25,630 --> 00:02:29,260 We must return the modified value from this function. 31 00:02:29,560 --> 00:02:33,580 Let's return the value argument with the dollar sign symbol. 32 00:02:36,090 --> 00:02:42,810 In the console, the log will show the numbers prefixed with the symbol the observer is not receiving 33 00:02:42,810 --> 00:02:45,990 the values directly from the original observable. 34 00:02:46,320 --> 00:02:51,180 Instead, it subscribes to the observable returned by the map function. 35 00:02:51,660 --> 00:02:56,040 As mentioned before, the original observable remains unaffected. 36 00:02:56,310 --> 00:03:03,150 If we want, we can subscribe to the original observer and keep our new observable by breaking our pipe 37 00:03:03,150 --> 00:03:04,770 into a different variable. 38 00:03:05,100 --> 00:03:06,660 Let me show you what I mean. 39 00:03:07,050 --> 00:03:13,770 Before chaining the pipe function, let's assume the pipe to a variable called numbers with symbol. 40 00:03:16,250 --> 00:03:23,450 Just like that, we have to observables, we can subscribe to the original observable or the observable 41 00:03:23,450 --> 00:03:27,410 that spits out the numbers with symbols in this console. 42 00:03:27,590 --> 00:03:31,310 We will find the original observable values being logged. 43 00:03:31,640 --> 00:03:36,110 It's because the subscription is being applied to the original observable. 44 00:03:36,800 --> 00:03:38,990 Our SGX is very flexible. 45 00:03:39,260 --> 00:03:46,100 We can create a single observable but emit different values by chaining different pipe functions. 46 00:03:46,520 --> 00:03:53,150 There is an unlimited number of observables we can compose from a single observable before ending this 47 00:03:53,150 --> 00:03:53,780 lecture. 48 00:03:53,960 --> 00:03:57,800 I'm going to remove the numbers with symbols observable. 49 00:04:00,300 --> 00:04:04,110 We will continue learning about operators in the next lecture.