Coding

scan() vs reduce() | RxJS TUTORIAL

  • 00:00:01 welcome to this video great to have you
  • 00:00:03 on board on this channel I already have
  • 00:00:05 a couple of pages where I show you how
  • 00:00:07 to use rx chess and the operators Q and
  • 00:00:10 Hans your applications in this video I
  • 00:00:12 want to have a look at reviews and scan
  • 00:00:14 QR brazzers which can be mistaken for
  • 00:00:19 each other because they do kind of the
  • 00:00:21 same thing but they have one distinct
  • 00:00:23 difference and we'll have a look at this
  • 00:00:25 besides that they are really useful
  • 00:00:27 operators if you have an ongoing
  • 00:00:29 operation a couple values being emitted
  • 00:00:31 which you often have when using
  • 00:00:33 observables any 1q kind of reduce these
  • 00:00:37 values to a final result let's have a
  • 00:00:40 look at how about works and let's start
  • 00:00:42 with reduce now you might know the array
  • 00:00:45 reduce method which allows you to reduce
  • 00:00:49 an array by applying a function which
  • 00:00:51 takes the tow value of your arrays of
  • 00:00:55 what you will have in the end also and
  • 00:00:57 then the current value it occurred
  • 00:00:59 element of the array for example and
  • 00:01:01 then it does something with it you
  • 00:01:02 define what it is it could add up all
  • 00:01:04 the items and then it goes to the next
  • 00:01:06 element takes the new total so for the
  • 00:01:09 first element now take the next element
  • 00:01:11 and ask this maybe go to the third one
  • 00:01:14 hits you total at the third and so on
  • 00:01:16 and in the end you have just a total for
  • 00:01:17 the whole array now our ex chess has a
  • 00:01:19 salade function here I have an
  • 00:01:22 observable which I created with the alt
  • 00:01:23 helper method where I simply pass a list
  • 00:01:26 of elements you can pass an infinite
  • 00:01:28 list here how many items you want and
  • 00:01:30 they will simply omit all these items
  • 00:01:32 synchronously immediately so there is
  • 00:01:35 just words that sort but hit ctrl enter
  • 00:01:37 now we just if you want two three four
  • 00:01:39 five now I want to reduce them to get
  • 00:01:42 the total sum and for that I can
  • 00:01:44 actually reduce method where I have to
  • 00:01:47 pass a method and this method is
  • 00:01:49 described will get few arguments that
  • 00:01:52 the total and then if the current value
  • 00:01:56 it will do this for each omission so for
  • 00:02:00 each value so to say and then it has to
  • 00:02:04 return something here it has to return
  • 00:02:06 us a new value a new total which will be
  • 00:02:08 used for the next element as a input
  • 00:02:10 total so that is kind of a loop at that
  • 00:02:13 here inside
  • 00:02:15 here you can also pass a second argument
  • 00:02:17 which is our starting total because for
  • 00:02:19 the first element we of course have no
  • 00:02:21 total so you're going to start with zero
  • 00:02:23 and now in my function here what I want
  • 00:02:26 to do is I want to return my old total
  • 00:02:29 initially zero plus my current value so
  • 00:02:33 for the first element we will have zero
  • 00:02:35 plus one then for the next value we will
  • 00:02:38 have one the total of the first
  • 00:02:40 iteration plus two for the third one
  • 00:02:43 three plus three and so on
  • 00:02:45 for now clear the console in control
  • 00:02:47 enter you see we just get 15 which
  • 00:02:50 indeed is the sum of all these items and
  • 00:02:53 that is what reduced us and it can be
  • 00:02:55 very useful if you have an observable
  • 00:02:57 where you know it will eventually
  • 00:02:58 complete it and you want to reduce all
  • 00:03:01 these individual values to one single
  • 00:03:03 value in which you really are interested
  • 00:03:05 in the end so what is scan then scan
  • 00:03:10 works pretty much the same
  • 00:03:12 almost I can even replace reduce here
  • 00:03:15 with scan and if I now clear the columns
  • 00:03:19 on this control enter we see the
  • 00:03:21 difference in all the get subscription
  • 00:03:24 in the end but it prints on each step
  • 00:03:26 but on each step it Princeton you total
  • 00:03:29 so for the first element difference one
  • 00:03:31 because we have zero plus one for the
  • 00:03:33 second element is prints brief because
  • 00:03:35 we have one the total from the first
  • 00:03:37 iteration plus two and so on
  • 00:03:40 it is the difference scan is useful if
  • 00:03:42 you want to reduce your elements but you
  • 00:03:45 are interested in the in-between totals
  • 00:03:47 and reduce is useful if you're only
  • 00:03:50 interested in the final table it's a
  • 00:03:52 most important to recognize that reduce
  • 00:03:55 of course only makes sense if your
  • 00:03:56 observable eventually completes whereas
  • 00:03:59 scan doesn't need to complete it brings
  • 00:04:02 out a new total and eternally it keeps
  • 00:04:04 track of the latest total and therefore
  • 00:04:08 even if it's an infinite observable you
  • 00:04:10 will still be able to you scan on that
  • 00:04:12 and simply add it up or whatever you
  • 00:04:15 wanted to of course you don't have to do
  • 00:04:16 additions here it could multiply it you
  • 00:04:17 could do anything with it so these are
  • 00:04:20 scan introduced hopefully this video was
  • 00:04:22 a bit helpful in showing how they work
  • 00:04:25 and how they differ