Transcript for:
RXJS Crash Course

hello everybody and welcome back to the channel in this video we're going to cover rxjs in great detail and hopefully by the end of the crash course you're going to know exactly what it is and how to utilize it in your applications so let's get right in to it let's look at the definition of rxjs so rxjs is a library for reactive programming using observables and honestly after this definition if you don't understand it you'll never understand it of course i'm kidding this definition to me means absolutely nothing what is going on what is reactive programming what is observables i want to say something rxjs is a notoriously difficult concept to understand and the reason for that is there's just so many terminologies thrown out there like observables operators observers pipes unicast multicast you know what does all this mean and a lot of this stuff really doesn't sink in when we just go ahead and just start programming in rxjs right away so what i'm going to do is i'm gonna go through a hypothetical real-life scenario and then i'm gonna relate this scenario to rxjs and hopefully by then you'll understand exactly what is going on so let's just go into our imaginations and let's imagine that you have built your own burger shop extremely proud you know you're gonna go ahead and build your own burger shop but there's something unique about this burger shop you don't actually have any of the ingredients the only ingredients you have for the burgers are the buns so what happens is the client or the customer comes in with a bag of ingredients and they give you the ingredients and then you just go ahead and cook them into a burger and you give it back to them that is your unique burger concept so you bring us the ingredients except for the bun we'll we'll take care of the bun we're gonna we're gonna cook it up and then we're gonna give it right back to you so this is what we well we want to build and we only support three different types of ingredients so meat cheese vegetables so you can give us meat of course and cheese and vegetables now specifically you can give us any type of cheese any array of or multiple vegetables whatever however you want however when it comes to the meat we don't know how to cook any other meat other than chicken lamb and beef so you can only give us this meat right over here you can't give us something like i don't know turkey or you can't give us deer or whatever you have to give us one of these three so we have to keep that in mind so essentially exactly you give us this give us these ingredients and we are going to cook you a burger this is the premise the business model of our shop whether it's a successful business model doesn't matter this is just an analogy so really what's happening here and let's go back over here what's happening here is we have a customer he's has a bag of ingredients he's going to give it to our shop we're going to go ahead inside of our shop we're going to cook it and then at the end of the day the uh the person is going to go ahead and give us the the burger so this this is maybe the cashier or whatever an employee of ours is going to go go ahead and give the client the burger based on the ingredients that they gave us so this seems simple enough but i want what i want to do is i want to focus in on what's going on inside the shop how the burger is created so let's actually go ahead and zoom in here so right over here so this this line over here represents what's going on inside of the shop and what we actually have is an assembly line of chefs so we have a bunch of different chefs and each chef does different tasks so let's actually go through this so right now what this what this person does is well they give us a bag of of of different ingredients for their burger they give it to us now as soon as it goes in here what this chef is responsible for doing is simply very simply just taking out the ingredients from the bag that's that's all they're responsible for doing again not probably not a very successful business bottle but this is what this is what this chef is responsible for literally just opening the bag and taking the ingredients out so let's say over here in this bag we got a steak cheese and cucumber tomato and lettuce all this chef did was very simply take the stuff out and that's it now it's on on the table that's it and what he does is he passes these ingredients to the next chef and this chef is the checker so remember if you go all the way back remember we can only support chicken lamb beef so what this chef does is he looks at the protein and he checks okay well is it either chicken is it either lamp or is it beef if it's not well what he's going to do is he's going to go ahead and say hey we cannot go ahead and continue on i'm going to tell the clerk over here telling them hey we can't make this burger however if everything's okay if it's either beef chicken or a lamb well then he passes all the ingredients not just the beef all these ingredients to the next chef now this chef is the chef that is responsible for cooking the meat so well whatever the meat is well she's an expert in either cooking lamb chicken or beef so she's going to go ahead and cook it and then afterwards after the meat is cooked then she's going to send that all those ingredients along with the cooked protein to this chef and this chef is simply responsible for assembling the burger so this this this chef is just going to assemble the burger with all of the cooked ingredients as well of course as the vegetables and the cheese and then this this last chef is going to send it to the clerk and now over now we have a burger and then this burger of course is going to be given to the customer now of course there's also another scenario so what the customer can do is they can give us a bag of ingredients and instead of you know having one of the approved meats the customer can give us maybe one of the non-approved meats so for example over here we have pork well in this case what this uh what this uh chef is going to do is right away inform the clerk telling her that hey we this customer gave us a meet that is not supported by us and so what the clerk is going to do right away is just tell the customer hey sorry we cannot make your burger and so that is another possible scenario and actually what happens in this case is well the the the uh the food doesn't actually get passed along to these two other chefs because we'll begin we cannot assemble this burger so you might be thinking well what in the world is going on here i i wanted to learn all about rxjs why am i learning about this hypothetical probably will 100 percent fail business idea well this right here this kind of assembly line what's going on is very similar to what is going on in rxjs and let's just get right in to it so remember what's going on here well we have this customer he's providing us a bag of ingredients they go inside of the burger joint we have an assembly line of things that are going on but at the end of the day what we should get is a burger and this is of course if the user supplied us with the correct meat so let's actually talk a little bit about what is going on right over here so the customer what he is doing is he's providing us with a bag and every single time the customer provides us with a bag what's gonna happen is we're gonna have a chain of events that's gonna go on inside of the burger joint that's going to somehow transform this bag into a burger and of course the bag is a bag of ingredients so again let's let's go through that again a customer every single time he gives us a bag of ingredients we're going to go through a chain of events that's going to process that bag into this burger so what why do we care about this well in rxjs this is similar to what an observable does so an observable is something that emits some sort of value and that's exactly what this customer is doing the customer is emitting some sort of value some sort of data and in this case you can kind of think of the bag as the data and every single time this customer or this observable emits data well the burger joint in this case and we'll talk about the actual terminology for rxgs is going to process that data in some way and at the end of the day we should get some different output so again right here this is the observable the observable is going to emit some sort of data and that's going to be processed inside of here now one thing that i want to note is that this customer or this observable can emit multiple data so they can emit you know they can emit a piece of data at the one second mark and then 10 seconds later they can emit another piece of data and this could be the exact same observable so in this case you know for example we could have a chicken ingredients in here and then over here we have beef ingredients you know created by the exact same customer and so the exact same customer is going to get well a chicken and a beef burger and an observable is going to be acting the same way and observable can emit data and then it can emit data in you know 10 seconds later and then maybe an hour later so an observable can emit multiple pieces of data that's going to be processed by what's going on in here and actually let's start talking about what is going on in here in terms of rxjs so let's go back to the simple example where we only have one bag or one piece of data so once this goes into the burger joints remember what happens we have an assembly line and assembly line of chefs and each chef is going to operate on that bag in some way so for example this chef over here he operated on it and he actually he transformed that bag into well just the ingredients without the bag itself so what he did is he actually changed the data in some way and then he passed it on to the next one and then this chef he actually didn't change any of the data instead what he did was a simple check but at the end of the day he operated on that piece of information in some way and then he passed it on to the next one this chef over here actually changed the data by you know changing the stake to cooked and then over here this one of course also change the data by assembling it together but really what's happening here is each chef is operating on this bag or this data in rxjs terms in some way so we have an assembly line of operators that are going to be operating on this data that the observable is going to emit so once an observable emits data we have an assembly line of operators that are going to operate on that data and every single time the operator is going to operate on it and then it's going to send that information to the next operator and then the operator is going to work on that and then send the information to the next operator and then to the next and then to the next so everything that is going on here this assembly line of operators is known as the pipe so you can kind of think as the pipe as the burger joint and then all the cust or all the chefs inside of it as the operators hope that makes sense so now let's look at the absolute last scenario so once we are done we're going to give the burger to the clerk and then the clerk what the clerk is going to do is well give it back to the customer it's going to get the burger and return it to the customer now remember the observer the the uh the clerk can also tell the customer hey you know something went wrong you know you didn't give us the correct meat we can't make this burger so the clerk can also do that so it doesn't also have to give the burger right away now this thing that kind of deals with the kind of the conclusion of this pipeline is called the observer so the observer so the observer is really responsible for hey once this whole pipeline is done once all this data has gone from the observable to the pipe once all that is done once it has gone to the last observer and the data is returned i'm responsible for figuring out what to do with it also i'm also responsible if some sort of error occurs in the way i'm also responsible for figuring out what to do with the error in this case the error is hey you know if they supply this with the wrong meat well the clerk its job is to hey tell them hey we cannot continue on you can't make this burger so i hope that makes sense and what i want to do is i kind of want to symbolize what's going on here through a diagram and this is a very common diagram that you're going to see all the time when working with rxjs it's called a marble diagram and over here we have the marbles so what's happening here is this arrow right here is symbolizing time so right here this is symbolizing time so you can say this is maybe at one second over here maybe it's like five seconds or whatever and right here this is a piece of data so right at the arrows a piece of data that the observable has emitted so in this case we have well we have a bag and then over here this shows all of the operators so this shows all of the operators and how they process that data so remember the first operator what they're going to do is just take out the ingredients from the bag the second operator is just going to do a check then the third operator is gonna actually cook the meat so as you can see the meat is this is chicken now you can see that it's cooked chicken and then the last operator is gonna go ahead and actually assemble the burger the chicken burger in this case and then over here at the very end this is the observer that is going to get that burger and then do something with it in this case it's going to give it to the client and so this is a good diagram kind of symbolizing how rxjs works and of course this is over time and observable can send another piece of data so over here we have another bag and then the first observer is gonna go ahead and uh you know take all the ingredients out in this case we have steak and then over here we're gonna do the check with the second observer and then over here we're gonna have our cooked meat we're going to assemble our burger and we're going to give it to the client now of course we can have errors that go on here and in this case the observer would just say hey you can't have your burger so i hope this makes sense uh i hope this kind of clears everything up if it doesn't i highly recommend just kind of watch it again and try to make sense of it maybe even take notes if you can if that always helps me so now that we got that out of the way and we understand all of the terminology i hope you guys understand all the terminology you can actually go on and code out a rxjs example so let's go ahead and do that in the next section now that we have a good understanding of what exactly rxjs is how it operates and some of the terminology within it let's go ahead and get our hands dirty and start coding out an rxjs application now let's quickly illustrate exactly what we're going to be building we're going to be building an rxjs system where we have an observable that is going to emit data that looks like this so we have an array of objects and this array is going to be an array of our users and the object itself is going to be information about one particular user so over here you can see that each object is going to have a status indicating whether our user is active or inactive and also we're going to have a a property age indicating the age of our user so what we're going to do is we're going to build a rxjs system that is going to process this data and figure out the average age of our active users however what we want to do is if our active users age are less than 18 then what we want to do is go ahead and throw an error so let's actually go ahead and get right into this and build a system like this so to do this what we need to do is we need to open up a vs code of course or whatever code editor that you're using i'm using vs code so i have a fresh directory as you can see there's nothing inside of this directory i'm going to go ahead and open up my integrated terminal and i'm going to initialize a new node projects of course for this you're going to need to have node installed so by the way i did an npm init dash y to do this and as you can see let's just zoom in here a little bit i have my package.json file so that is pretty much all that i need thus far and what i want to do is i want to create an index.js file this is where our code is going to live this is where our application is going to live so let's go ahead and open up our terminal one more time and now what i want to do is install rxjs so i'm going to do npm install and let me actually go ahead and clear so this goes all the way to the top mbm install rxjs so very simple installation shouldn't take very long okay awesome so let's first let's first create our observable so remember let's go back over here oops let's go i should just go all the way over here just so we can learn about our system some more so remember we have an observable and this observable is going to emit data and of course we have a processing pipe and then we have our observer so let's let's create our observable so to create our observable what we need to do is from from that rxjs package we need to import well observable so from rxjs we are going to get observable so observable right over here and so now to create the observable very simply all we have to do is instantiate this so remember this is gonna this is gonna be a class as you can see here it's all green it's gonna be a class so to create a observable we have to instantiate that class so we can say something like const observable is equal to new observable so new observable and we're going to go ahead and invoke this now in here this is going to take in a callback so it's going to take in a callback and i'm going to have this callback be an arrow function and it's inside of this callback where we are going to be emitting our data so again let's go back over here remember this observable is going to be emitting data that's going to cause this you know processing pipe to go along and then of course we need our observer so again we're going to have this uh we have created this observable and inside of this callback we're going to be emitting data in order to emit data from the callback we have to get the subscriber param so we want to get to the subscriber param you can really call this whatever it is that you want but you know most commonly is called subscriber and this is what we're going to utilize to emit data so what i'm going to do very simply for now is i'm going to do a subscriber right in here and to emit data we're going to do subscriber dot next so subscriber.next we're going to invoke this and then in here if i hover over it it's going to tell me you can put any value you want in there no matter what it is of course what we're going to do later on is add an array of objects but for now let's just go ahead and just say 10 so we're going to go ahead and say 10. so now we have our wonderful observable okay so we have this observable and it's going to emit a value of 10. so what's the next step well the next step of course is to create our pipe but i'm going to i'm going to create that later what i want to do is i want to create the observer first so what we can do is we can have actually nothing in our pipe and then the data just goes strictly from the observable to the observer so let's go ahead and let's create that so to create our observer what we're going to do is we're going to say const observer observer and this is going to be an object so this is going to be an object now this object is going to have three different methods so remember what the observer is going to do so the observer if everything is all fine it's going to take the data and do something with it that we have specified or some error occurs and then it's going to handle that error in some way the way that we have specified and there's actually another scenario that i haven't specified over here also what what can happen is the observable can say hey i am complete i am not sending any more data and of course over here the observer can go ahead and process that as well so in here what we need to do is we need to create three different methods that catch those scenarios and we'll see all those scenarios in action so the scenario where okay the observer gets the data and everything is all fine and dandy and we want to process it in some way well this is called the next method so the next method so over here and right inside of this callback is the value that is going to be sent to the observer after of course it's processed to the pipe and then obviously sent to the observer to do something so what we can do here is we can catch that in the first param and what i'm going to simply do is just console.log i'm going to console.log i am the observer so i'm going to say observer observer got a value of and i'm going to say plus value so the observer got a value of plus value all right so let's save that and then over here we're going to catch the error case with the error method now over here what we can have is an error so we're going to catch that error and we're going to also console.log here let's zoom in here a little bit or scroll down we're going to say that the observable got an error of and we're going to say plus whatever the error and the last thing is when the observable is complete complete or we want to catch that as well we can catch that with the complete method so we can say complete and at this point nothing is going to be passed and so what we can say here is something like console.log and we can say observer observer here observer got a complete notification notification all right so let's go ahead and let's save that and let's actually give this a go so remember right now we have our observable so we have this observable and we have this observer and so what's going to happen is this observable is going to be emitting the data 10 and what we should get because we have no error and we're not signifying that we want to complete what we should get is this observer should catch this data and it should hit this method over here saying observer got a value of and in this case 10. so the last thing that we have to do is we have to actually connect this observer with this observable because right now they're completely separate they're completely isolated so we need to cut we need to connect them together now to do that what we can do is we can grab this observable and we can say observable dot subscribe and then we can pass inside of the subscribe the observer so this observer that we have created and what that's going to do is it's going to create the uh what's what that's going to do is it's going to create that connection all right very cool i'm going to zoom out a little bit because it was kind of getting a little bit hard to see so hopefully this is okay as well i'm running on a 27 inch screen so i'm not sure sometimes it gets a little bit smaller on smaller devices but okay let's let's go ahead and let's run this so to run this we're gonna write node index and then you can see here we got observer got a value of 10. so this actually works so what's happening here again what's happening the observer the observable sorry so it's just so much observers or stuff sometimes it gets a little bit confusing the observable is emitting the data 10. and right now we don't have any pipes or anything like that so what's happening is is that value is being sent to the observer so it's being sent to the observer and because everything is all fine we don't have any errors we don't have any you know complete notifications it's hitting this method inside of the observer and what we're instructing this method to do is very simply just console.log observer got the value of whatever value that we get back awesome so this is very good and we'll look at scenarios where we hit these two as well so don't worry about that but for now i hope you guys kind of understand what is going on here so what i want to do is remember an observable can emit multiple pieces of data so what i can do is do something like this so i can have you know subscriber.next so that it emits 10 and then subscriber dot next emit 11 and then also emit 12. and if i were to run this what's going to happen let's run this you can see here that we're emitting this over here we're emitting this data and it's going to be caught over here again by the observer of and then over here by the observer and then over here by the observer so i hope that makes a lot of sense and now this is becoming a little bit more clear so now let's actually go into the example that well we want we want our we want our observer to be emit that user data so that user data and of course what we want to do is we want to process that inside of our pipe so let's actually do that in the next section now that we have created an observable that is emitting data and an observer that is while catching that data and doing some logic with it that we have specified in our case just a simple console.log let's create that pipe assembly that has a bunch of operators are going to operate on our data and specifically what i want to do is i want to actually work on well what we talked about so i want to emit this data rather than just these numbers so let's go ahead and do that right now so what i want to do is very simply let's just create a variable and we're going to call this users and then over here just to make it a little bit more interesting i'm not just going to return an array of objects instead what i'm going to do is i'm going to return an object and that object is going to have property data and then that's going to have the value which is an array of objects now inside of the array remember what we have is the status and this is going to be either active or inactive as well as the age so let's go ahead and let's just copy this you know a few times and you know what let's add a comma here then copy it a few times so copy copy copy copy copy copy all right awesome so i think that's good enough and let's just go ahead and just change the ages around so let's say this one's 32 this one's 53 this one's 17 still teenager this one's 11 this one let's say it's 32 this one is i don't know 43 and then this one is 23. and let's go ahead and let's keep this one active let's make this person inactive inactive active and then we'll say inactive for the 11 year old we'll say active and then we'll say inactive actually we'll keep this guy's inactive and we'll keep this person as active okay cool really doesn't matter just arbitrary data and so what i want to do of course is i want to emit this data inside of our observable so over here let's just get rid of this and let's just say users so i want to emit this data and let's actually just give this a quick go so i'm going to go ahead and clear this and i'm actually going to open up a new terminal because that terminal is kind of getting busy so i'm going to say new terminal and i'm just going to say node index so node index and as you can see here what we get back is an object and this makes sense because the observable is emitting an object with the data property and then we have another array so that makes sense but now of course what we want to do is we want to have that pipe with our operators in order to operate on it operate this data because what is it that we ultimately want we want to get the average age so how are we going to do this how are we going to create this assembly line inside of our pipe well to do this what we need to do is go to our observable and then at the very end we're going to say dot pipe and so now what's going to happen is instead of the data flowing directly to the observable the data is going to flow into any operators inside of our pipe and then the last operator is going to send that data inside to the observable observer sorry i may have mixed that up the observable is now going to send data to the pipe the operators are going to operate on that the last operator is going to send it to the observer so in here what we need to do is we need to specify an operator now to get operators all we have to do is get it from well rxjs so rxjs has a bunch of different operators that have different tasks and abilities now in this section what we're going to do is we're going to focus in on the map operator now as you can see there's so many different operators there's map there's merge map there's max there's filter find off there's also if every there's so many different operators and each operator has a slightly different task that we can do so if we have you know we want to do something specific we can actually use a very specific operator to do that now the reason why we're going to use the map operator is this is the most generic operator and what it does is it allows us to just us specify the logic that we want to do and so this is going to make the most sense at the moment but later on i'll introduce the different types of operators okay so now let's go over here and then to specify the operator inside of our pipe i'm going to say map because this is the operator that we want to do and map is going to take a callback and then inside of the callback is the logic of how we want to operate on this data that we get from our observable and so the first parameter inside of this callback is the data that we get back from the observable so we can simply say value this is a very common convention and so what do we want to do in this very first operator well the first thing that we actually need to do is we need to have access we need to have access to this array right now it's inside of an object inside of this data property we need to have access to this array we need to extract it out so what we need to do is something like value dot data so wouldn't it be nice if this operator just simply extracted that data from well over here and just sent it to the next operator and this is actually a very common convention so it's very common to have single operators that do you know kind of these small finite tasks if we went back to this scenario remember we had this chef and this chef all he did was just simply take out the ingredients out of the bag and then he just gave it on to the next chef and very similarly what we might want to do and it's a very common convention is to just have an operator that's just going to get the data out and then send it out to the next operator and that's exactly what we're going to do we're very simply going to say return value dot data and then what this is going to happen right now because this is the last operator and only operator is going to send it to our observer but if we want we can specify another operator by saying comma and then we can say map and have the value and then what's going to happen is well this data this data over here is not going to be sent to the observer but instead it's going to be sent to the next map and it's going to be of course modified and to just show that let's just go over here we're going to say console.log and we're going to console.log inside of first operator and we're going to say the value so this is this is the very first operator we got this from the we got this from the observer observable so let's actually say here you know got data from observable and to symbolize that this is the first operator we'll just say one and then over here what i'm going to say is got data from first operator and this symbolize that this is the second operator i'm going to put a 2 over here and then what i'm going to do is i'm going to go ahead and just send this data and then this data is going to be sent to the observer because this is the absolute last operator inside of our pipe so let's go ahead over here and let's just do a clear let's actually open up our terminal a little bit more and let's just do a node index so let's look over here so this is the first operator we got the data from the observable so now we have this object and then in the object we have the data and then we have this array now over here in the in this operator we modified this data we just got the array from this object and we sent it to the next operator so we got this data from the first operator and well this oops this is the data right over here and you can see that it is modified it's asking me for a new java version i don't want it all right so you can see that well the data is modified from the operator and is sent to the next operator and you can see that the observable is now getting that array of objects you can see here we have all the objects in this weird object object format but you can kind of see that well something is happening it's working awesome so what's the next step well in the next step let's have another operator which is of course this one because this one's not really doing anything let's have another operator that's just going to simply filter out all of the inactive users we just want the active users so for this what i'm going to do is i'm going to say value dot filter and this is going to be of course a user i'm just going to say i want all of the users that have a status of active and instead of sending this to the obser observer let's send it to another operator i'm just going to go ahead and just copy this paste it in there this is the third uh operator and we got this from the second operator we got the value from the second operator and i'm just going to return the value so that that this uh this the value is returned to the observer in this case because it's the last operator so let's just do another node index so you can see here that now well we got the data from the second one and you can see that now it is filtered now the observer has only three objects awesome so well this is working well now what i want to do is i want to have this operator over here determine the average of average age of these users over here inside of our array so how do we do that well let's go ahead and let's very simply just use the reduce so i'm going to use a reduce and this is kind of commonly confused so i'm going to say values.reduce or value.reduce and this is going to take a callback now the first thing the first thing that we're going to pass in is the thing that we want to reduce this array to because the reduce method is is a built-in javascript method that is going to reduce the array into anything that we want whether it's a number uh a a string a boolean whatever it doesn't doesn't really matter but over here we have to specify that so what i want to do is i actually want to reduce this array into the sum of all ages so later i can then just divide it by the length of the array to get the to get the um to get the average age so i'm gonna say sum and then the second parameter is the current element that we're iterating over and so we can simply say for each uh iteration i want to increment the sum by the user age now as the second parameter what we need to do is pass in the initial value of the sum and i'm going to say that this is zero awesome so what i'm going to do is i'm going to go ahead and save this and just send this data to our uh to our observer or yeah observer at the very end so let's go ahead and let's do a node index and you can see here after the third operator our observer now is getting well the sum and this this is the sum i'm assuming this is correct i'm not even going to try to do the math actually i'll try to do the math because 7 plus 3 is 30 40 50 yeah okay so 54. so this works perfectly fine however this is of course this is the uh the h so what we can do is very simply just take this put it in parentheses and we can just very simply divide it by the value dot length to get the average age so let's go here and now you can see that we have an average age of 18. awesome so that is terrific so this seems to be working so remember what's happening here is the the the observable is emitting some data and then it is going to be operated on processed by all of the operators inside of the pipe so this pipe is just going to extract the data from that object this pipe is going to do some filtering this pipe is actually going to determine or start not this pipe sorry this operator inside of the pipe is going to extract the data extract the array from the object this one this this operator is going to go ahead and do the filtering and then this very last one is going to determine the average age and then because this is the last operator it's going to send it to the observable and we're going to see it over here terrific so now the last thing that we need to do of course is well handle some errors because remember we want to throw some sort of error if our average age is less than 18. so let's actually have another operator for this so we can say map here and then we can very simply say four so we'll say four here i mean say got this data from the third third operator and here what we can do is we can just have an if else statement so we can say if the value is less than or or just less than 18 let's just throw a new error i'm going to say you know average age is too young else if everything is okay i don't want to throw an error i just want to simply return the value so let's actually give this a go now let's give this another go and let's go over here and let me just because we're getting kind of busy here let's open up a new terminal and i'm just going to very simply say node index and you can see here at the very end well what happened was so we got this value from our uh third operator and then the fourth operator what it did was it did that check and everything was okay so we'll just return that value and it was over here so then then i send it to the observer and because everything was okay it hit the next method right over here and that's why we see observer got a value of 18. awesome now let's actually make our users a little bit younger so let's say over here the our 14 year old is now 10 so he decreased in age because that's exactly how the world works we decrease in age we don't increase in age we we we start off as a hundred and we slowly decrease until we die and until until we turn one and then we turn it to zero and then we just poof we disappear bad joke sorry it wasn't really a joke anyways okay let's just do node index so you can see here that well we got data from the third operator and the data is 16.6666 whatever and then over here you can see that the observer got an error so you can see here that because we threw an error inside of this operator over here the observer well it didn't hit this method it hit this method right over here and over here you can see the observer got an error and then what is the error well average age is too young so you can see that that's exactly what's going on and that's pretty much really all we have to know if you understand this you pretty much understand 99 of rxjs maybe not 99 but you understand most of it this is kind of the most complicated part the conceptual overview of this so let's actually take a look at this method and this method a little bit in more detail in the next section so far we have created our observable that is emitting data we also created our pipe that has our operators and then we also of course created our observer that is going to be the be all end-all and catch the data most of the time our data has been flowing inside of this next method and we've been console.logging it over here but at the very last instance we saw our data or in this case the error actually get executed by the error method and then over here we had the error message that we have right over here so what's going on here well anytime that our operator throws an error what happens is inside of the observer is going to be caught by the error method and of course we're going to have our logic here for handling that error in this case all we have is a simple console.log awesome so let's actually look into that a little bit in more detail we're going to look at this as well as this over here so what i'm going to do is i am going to go ahead and i'm going to copy all this data and i'm going to paste it in again and i'm going to change the name to users too this is going to symbolize another piece of data and i'm going to change the name or change the age of the very first object to 14 so that we can go back to 18 years of age and what i'm going to do now is right over here i'm going to do subscriber dot next users 2 and then i want you to predict what's going to happen remember the average age of the active users in this case is going to be 18. well in this case and let me just exit out of this and open it up again just to clean up all that rubbish if i were to do this you can see at the very end we got get value of 18. and what i'm actually going to do is i'm going to comment all this stuff out over here just the console.logs because it's getting kind of messy i hope you guys get the point so let's go ahead and let's do that and let's just do another note index and we get over here observer got a value of 18. awesome that is terrific then and that is expected now what i'm going to do is i'm going to go ahead and change this to users now in this case with this data the average age of our active user is going to be less than 18 and what should happen is well we should hit this error state right over here so i'm going to go ahead and i'm going to do node index and you can see here observer got an error of error average age is too young okay this seems awesome and this seems as expected now one thing that i want to note is the observable can emit multiple data so right now what we're doing is we're just emitting over here well one piece of data and of course that's the users but what we can do of course is do something like this so our observable can emit this data multiple times and of course this can be different data in this case it's the same but this can be different data and in this case what happens is well our observer gets hit three times the next method specifically gets hit three times so now what i want to do is show you a scenario where we have a combination of data that should hit the next method and a combination of data that's going to hit the error method so let's go here and let's say subscriber.next and we're going to say here user and this should hit the error method so let's go ahead and save this and well what do we get well we get everything is fine here everything is fine here everything is fine here here we hit the error method okay this seems all fine and dandy so this seems as expected but now let's actually change the order of this let's take this over here and let's actually put it as the second one so this is the second uh uh piece of the second thing that the observable is going to emit so users and this should give us an error so i'm going to go ahead and i'm going to do a node index on this and let's just do a quick clear let's do another node index or node index and look what happens so we only get this once and then we get this over here the error message so what's going on here well any time that our observable is going to emit data that's going to result in throwing some sort of error then what happens is any other emissions we're not even going to hit them we're just going to completely shut down this connection and we are completely done so we're never going to hit these two right over here so that is the default behavior of rxjs anytime that we hit any sort of error we're just not going to continue on we're just going to stop right there and then so that is just something that we need to think about when programming in rxjs now another thing that will do the exact same uh uh exact same functionality stop everything in its track is when we say dot complete so this isn't going to throw an error per se but here we're saying hey we are just completely done emitting data from our observable and as you can imagine inside of our observer that's going to hit the complete method so let's go ahead over here let's just say node index and you can say you can see that we get observer got a value of 18 and then over here we have observer got a complete notification and it doesn't hit it does not hit these two these two right over here so we don't see all that processing for these two uh pieces of data that came after the complete so i hope that makes sense in this video what i am going to be doing is showing you all of the different operators that we can utilize so far we have just been utilizing the map operator but of course there's multiple other ones that serve different functionality instead of utilizing the generic map so to look at all of the operators what we can do is go to the official page and i'll have this in the link in the description below and over here we have a list of all of the different operators and what's really cool about this is we have so many different operators that we can utilize so many that there's no way i'm going to be able to cover them all i'm only probably going to cover one or two of them but if you have a specific use case i highly encourage going to this page and looking through all of the different operators and utilizing the one that will most serve your purpose and over here you can see that there's stars and these stars are indicating some of the more popular operators okay so the first thing i want to do let me just zoom in here one more time is indicate that the operators are actually grouped into different groups we have combination operators we have conditional operation operators we have creation operator error handling operator filter transformation so combination as you can imagine are things that are going to combine our data together so you can see here we have a cat operator you can go ahead and click on this and you can actually see examples of how this works so this is an f operator and i'll talk about this one a little bit later but this is a an operator that's actually going to create an observable and it's going to emit the data one two and three and then what what the concat operator should do is essentially get that and concat it together so that is what is happening again there's a bunch and i'm not gonna be able to go through them all so what i'm gonna do is we're just gonna go ahead and utilize some of these operators but before i do that let's start talking about some of the other groups we have conditional operators and these are of course going to check for specific conditions and over here i want to focus on the creation operators these are operators that actually create observables that are going to emit some sort of data so you might be thinking it's kind of weird that we are just emitting this data manually and of course this is not how it's going to work in the real world instead what we're going to do is we're going to have some sort of operator and this operator is going to emit data the most popular to practice with is the of operator so this off operator is going to create an observable that is going to emit one two three four and five so that is a good example of that but another practical example for for instance is the from event operator so what this does is it listens to a specific event so over here you can see that it's listening for for a click event in our dom so anytime that we get a click event it's going to go ahead and well it's going to emit that event data and over here you can see that we're doing something with that with the map operator this is how typically things are dealt with inside of rxjs we use creation operators all right so we also have error handling operators we also have filtering operators that filter out specific data we have multicasting and i want to also focus on transformational operators these are operators are going to transform our data in some way and also we have utility operators so again there's a bunch of different operators that we can utilize so let's actually go to our application and i'm just going to utilize another operator so let's actually look at what we're doing here in the very first operator all we're doing is very simply just taking going into an object and taking the data from a specific property in this case the data property so you can see here we have this object and we're just going into this object and getting the array from the data property there's actually an operator that can do this for us and specifically this is going to be the and this is going to be in the transformation because we're transforming our data in some way is the pluck operator that's just going to very simply just pluck out a the data from a specific property inside of our uh inside of our object so that's very simply what it will do so let's actually just go ahead and let's do that right now so let's go over here we're going to say pluck and instead of using map instead of doing something like this we can say pluck so pluck and what pluck is going to do is it's not going to take in a callback it's just going to take in a string of the of the uh the the property that we want to get the value for in this case it is data so we can very just simply say data and that works exactly the same way as we have been doing with map so if i were to do a node index you can see that everything works completely the way that it has another quick operator that i might want to discuss let's actually look at some of the filter operators so filter operators or operators are going to filter now you might think okay well we can use that to replace this operator but what this does is it actually filters the whole uh the whole array that we get back so this isn't going to iterate through every single element in the array and iterate it out it's going to filter out the value that we get back depending on the condition that we specify so for example what we can do here is let's say let's say over here we can get the filter operator and let's say we want to completely get rid of the data if the length of that array is less than five so what we can do here is we can very simply say filter and then in here remember we're going to get back our data that we get back from pluck and so what we can say is this is going to be a callback and this is going to be users and let's just call this value and then we're going to say if the value dot length if the value dot length is uh less than or we want to continue on and return the data if the value dot length is greater than or equal to five so let's go ahead and let's save that and so right now if i were to do this everything seems okay and what i'm going to do is i'm going to completely remove this i'm going to remove the complete and i am going to change so over here we have this this is going to throw okay so none of this is going to throw an error but what i'm going to do is i'm going to change this to users and i'm going to change users back to 14 14 years of page so doesn't throw an error and let's just go ahead over here and let's just node index just to make sure that everything works fine however now for user what i'm going to do is i'm just going to make the length of this a little bit uh a little bit shorter so i'm going to get rid of this guy i'm gonna get rid of this guy also get rid of this guy so over here we have one two three four five let's get rid of one more let's get rid of this guy and so now look what's gonna happen so now what's going to happen is if i do a node index what's happening is this this this data that we are emitting is completely getting filtered out because it's not following this condition that we have specified inside of this operator so again there's multiple different operators that we can utilize i won't be able to cover all of them but they're all relatively intuitive and easy to understand all right awesome i hope you guys enjoyed my rxjs crash course and well i'll see you guys in the next one