 So, yeah, so welcome to the session, so we are basically going to talk about some, you know, techniques, some functional programming techniques that we can, you know, use JavaScript for. So, I don't have a lot of, you know, a lot of text, so, so those are my, you know, so that's the agenda, but really, right, which is going to cover these things, you guys just sitting down. So, very briefly, you know, that's the agenda, right, so that's what we're going to look at. So, it's kind of funny that, you know, today we use JavaScript as a language for, you know, for so many different things, right, for so many different scenarios. Obviously, you know, building web applications, you know, adding intelligence on the client side, on the browser side, I think this is probably the primary use case. Now, we find that, you know, JavaScript is slowly migrating and, you know, kind of, to all other environments as well, you know, we haven't cracked on Node.js here, so, you know, JavaScript as a server is a pretty big, pretty big thing. So, you know, here in this session, we're just going to, you know, kind of talk about some language features in JavaScript, you know, kind of explore some of the functional aspects of JavaScript, right, what are some of the functional techniques that you can take a part of your job in JavaScript, so we'll just, you know, kind of walk through a bunch of demos, yeah. So, this is pretty much the only slide in my session today, other than some pointers to some resources and stuff. So, with that, let's quickly, you know, get started. So, it's kind of, you know, interesting how JavaScript, you know, and it's a lot of, you know, some of the principles of fundamental aspects of languages, the language itself is rooted in functional aspects, you know, functional principles. So, the first thing that I want to kind of talk about is the fact that functions in JavaScript are, you know, first-class citizens of the language. So, what do I mean by that? So, pretty much throughout this session, I'll be using a little console that I put together here. So, it's just a little audio, how visible this is. So, this is just a little console that we'll be using to explore various aspects of JavaScript. Basically, some of the things that you can do here is, you know, you can type this word here, so I can say, you know, alert something, and I can hit control enter, and then it just runs the script. You know, using alerts for print keyword statements is kind of annoying. So, you can say, you know, print something, and, you know, it brings the text of the right-hand side over there. So, if you have some errors here, then the errors show the bottom right-hand corner over there. So, those are some things that I can do with the console. So, we'll use this to kind of explore various aspects of the language. Functions are a first-class citizen of the language, right? So, what do we mean by that? You know, it's useful to think of functions in JavaScript as, you know, as being equivalent to pretty much like a variable, right? So, if you create a variable, assign a value to it, what all can you do with a variable, right? So, you can obviously declare it. You can assign values to it. You can pass variables as parameters to functions. You can return variables from functions, right? You can construct, you know, JavaScript objects where variables are members. You can create objects and have variables as members, and, you know, a bunch of things that you can do. Turns out in JavaScript, this is probably a little comprehensive to folks who are coming from other languages, right, from C++, C sharp, Java. It turns out that functions can be used in pretty much all of these ways, that we just spoke about, right? So, for example, so what can you do with a variable? So, you can define one, right? Obviously, this is something that you've probably done, right? Pretty straightforward stuff. So, all I'm doing here is declaring a function, and I'm calling it, right? So, that's nothing major. All right, so, you know, functions are... I mean, this is nothing, right? You've done this, favorite functions to validate your forms and whatnot. So, it turns out you can do, you know, a lot of things with functions that you can do with variables. So, for instance, I can take this function, assign it to another variable, right? So, I can say var f equals 2, and I can call it through that, you know, and that works this way, right? Again, nothing major, no big deal. What else can you do? So, for instance, I can have a function like this, right? And do that. So, let me get rid of that. So, here what I'm doing is... And you can see that, oh, you're still here. So, what's happening here? So, I've defined a function called cb, which takes one parameter. Here is basically another function. It's browser-based, right? And what's plus-plus? It's browser-based. I just wanted to know if it's browser-based. Oh, yeah, yeah. The problem is this thing goes away, if I make it... Okay. Right, so, here what's happening is, you know, we are basically passing a function to another function, right? So, cb is taking one parameter and passing a function to that. Turns out you can call that function just like, you know, any other function, right? So, within cb, what I've done here, in cb, I'm passing this as a parameter, and again, this is just one step extra, right? We created a variable, assigned a function to that variable and called it through that. We're just passing it as a parameter to another function. Now, there are, you know, more interesting things. You know, as you keep exploring this, it gets weirder and weirder. For instance, what you'll do is variables. You can return variables from functions, right? So, you can do that with functions. I mean, you can do that with functions, too. So, for instance, you know, let's create some sort of increment or something like that, right? Let's say, make INC and say return function of something. Here I say return equals INC. Now, let's say INC 5 is make INC of 5. Now, what will INC 5 have here, right? Any guesses? Right. So, INC 5 is simply points to a function which takes one parameter and whatever parameter you pass to it, it'll add 5 to it and return that, right? So, for example, if I say print INC 5 of 10, what's it going to print? Difference 15, right? So, what's going on here? So, in this case, when I call make INC, make INC is actually returning another function from within that function. Just like how you can do it, you can return values from functions. Functions can be returned from functions this way, right? And the interesting thing here is one thing that if you are really thinking about it. So, INC is a variable that is basically a parameter to making and then from within that function and returning that, right? Now, at this point, when this particular line is going to execute, making is already done. About making function, it's executed and that's it, right? Now, what about this variable, INC? It should have, it's gone, right? Once that function leaves scope, all the variables that are declared within that, the parameters, everything's gone. But, when I call it here, when I say INC 5 of 10, what am I doing inside that function? I'm saying, what do parameters request INC, right? What does that work? Closures, right? So, probably I can just touch through this. Yeah, so that's the concept of closure, where whenever you declare a function, all the symbols, all the variables that are in scope at the point of definition of that function become part of that function's closure, right? Which means that those symbols, those variables are accessible to that function inside that function. So, for example, you can imagine that when INC 5 is instantiated, there is this hidden object associated with INC 5, which has all the variables that were in scope when that function was defined. So, whatever this function defined, this function is defined from within main INC, right? So, at that point, whatever is accessible to that function, let's say, you know, in order this function, is accessible to that function even after that, right? Because you can imagine, like, you know, how you might declare member variables in a static programming language like C sharp or C plus plus. So, whatever member feels that you declare inside a class, is basically the state for that class, right? And you create an object of it, and when you pass that object around, that state goes around with that object. I mean, pretty much the object is defined by state. It kind of is similar to that. So, whenever this function is created, and whenever I'm calling it and so on, you can imagine that there is this hidden member, which is called as a closure, where all these, you know, symbols that were visible when that function was defined are part of it. And, you know, like, you can keep doing that. For example, I can create another increment or make INC of 10, right? This would, if I say, I know, 20, then this would 10, 30, right? So, here the point to remember is this is a completely separate object from INC 5, right? Those are two individual objects, and this gets its own closure, INC 5 gets its own closure, right? In INC 5's closure, the value of the variable INC is 5. In this case, it's 10, right? And that's retained across calls. So, this is very, you know, really the concept of a closure. So, what are some of the use cases for closure, right? Obviously, this is one. Like, one other place where I found it very useful to use closure is, in INC 5, there is this feature called as getters and setters. How many of you are familiar with getters and setters in ES5? About five, six people. So, very, okay. How many of you are familiar with the concept of getters and setters? That's everybody, right? So, it turns out that with ECMAScript 5, you can define getters and setters, you know, basically properties, you know, how you do in Java, right? You define getters and setters methods. In C sharp, you create properties. And, you know, each language has its own way of implementing it. Turns out in ES5, you can do the same thing, which is, I think, a pretty awesome feature. So, for example, if you create an object like this, right? I don't know. Let's say, let's call this person or something. And here, now what I can do is, I can define some properties. For example, I can say name. I can do is, I can create two functions here, right? I can say get and I can say set. So, let's say in get what I do, I just print some diagnostic messages. So, I say print name.get, right? And here, I'd say print name.set plus v. Now, what I can do is, I can say person.name equals something and probably in get, I'll have to return something. Because that's what get do. It gets something. So, I'll say, right? It doesn't matter. I'll just import some values for now. And here, I'll say print person.name. Right? I'll just clear the console. It would slightly differently. Anybody see what's wrong with this? That's embarrassing. Not get. Sorry? Print person.name equals print person. No, no, no. Person.name. This is the name is the property and get and set are the two set of functions. Let's try something else. Let's say value is that, this thing is basically the property descriptor. So, object.define is an ES5 method where basically you pass the prototype as the first parameter. So, that means that person's prototype is whatever is the first parameter of object.define. The second parameter is basically a set of property descriptors. So, which basically is just a last object where each property name, I mean, in that object, the name, you know, basically this particular field name is basically the name of the property, right? So, when you say name here, your person object is going to have a property called name and the value here is the value of that property. And there are a few other descriptors like configurable, one more is there. Any configurable value and what is the code that we descriptor? So, that's a different property, right? That's a different property. It should be object.create. So, that's the issue. Early morning brain freeze. So, there we go. Now we are back in action. It's just a different API. So, this is object.create, what I was trying to show you. There is another method called define property and define properties, which you can use to change the properties on an existing object. Here what I'm doing is I'm trying to create an object, right? So, basically I'm saying that person is an object whose prototype is that empty object. It need not be empty, it could be another object. And then I'm basically defining a property called name and I define the method, I mean, the getter and the center. So, when I assign a value to this, you can see that name.set gets input and the value is obviously true. And then I call this, you know, I'm returning one. So, obviously this is not the correct implementation here, right? So, I don't want to put a hard coded value, right? That's not the point. So, the value should actually get stored somewhere. So, I find that, you know, one way that you can do it is you can implement this with a closure. So, one thing that I do is I would define the immediate function like this, from which I would return my descriptor. Yeah, but for people. So, immediate function is basically an anonymous function that gets invoked immediately. There's also, you know, sometimes people use the term self-executing function, which I think is technically incorrect. It's not a self-executing function, you know. A self-executing function is a term that you probably use to refer to a recursive function, sorry, a function that calls itself. So, this is not, that's not what's happening here, right? We are not defining a function which is calling itself. We are defining a function which is getting caught at the point of definition. This is like taking a difference. So, this is an immediate function where I'm defining the function and invoking it immediately, right? So, the function, this particular expression that you see here is the function definition and then the open, back, and close bracket to call that function, right? So, it gets defined and gets called immediately. And what does that function do? It returns a regular object, right? So, whatever I returned earlier, they're the same thing. It returns that. Basically, it returns the property descriptor. So, now what I can do is I can go ahead and define my packing store for this property right here. So, I can say, I don't know, name val or something where, you know, I'll put a default value here. So, from here I can return name val and here I can assign to name val. So, now what happens is, so, let's say I put this here. There should be a Singaporean here. So, that's what the object of create, right? So, it is. Yeah. All right. So, you have, so you can see that name.get gets called. get gets called and the value is basically default. So the first name that you're seeing is from the getter and the value is default that's coming from the table name there and then I'm getting set to foo and then the next. So basically now it works like a real property but the backing store is basically, you know you might be wondering why I'm doing it in such a roundabout way but I mean I could have created another, you know as you would do in C++, you would create another member and then you would use that as the backing store for a property. Now you can't, it's probably not a good idea to do that here because there is no concept of, I mean if you're doing C++ or C sharp, you would probably use a private member, right? To hide the fact that this field is protected, I want to do some validation maybe on assigning a value. You can't do that with JavaScript, right? If you make a member, the member is accessible. So you know this is one place where you could use a closure to provide a backing store for a getter set up on your object. You could use closures as private state which is just a, I'm probably gonna demo that but it's basically the same idea, right? So here, whatever is part of the closure for a particular function is accessible only within that function, right? So you can see how you can use this concept to implement the equivalent of a private member in an object, right? So you can, you know, so you know you're probably used to creating classes like this, right? So you say, you know the facility find a constructor function, you know you have your parameters and then you know say this dot a equals value and so on and so forth. You define your types like this, right? So what if you wanted to create a private feed? So you can go ahead and do this, you know, like and then you can, you know, access that inside that function. So for example, have something like and this dot print here, so that's a private, I mean that's a public method inside person. So when I say log p equals new person, you know I assume that I pass the constructor parameters and so on, now through p, right? There's no way I can access pvd, right? p dot pvd is not going to work now. Why? Because it's not a member of that particular object. It's simply part of the closure of the constructor function, right? So it's basically completely different. So this is another, you know, potential application for closures where you can simulate private members in objects. So with that, let me quickly go to the... One question, please. Yes. I'm not saying object dot create. So create is something that is governed by your... No, no. This or this. I mean, the console really gets print clear and just manages all of it. So object dot create and it must be five p. All right. So the question is, I think that is, why don't I just specify what attributes I require and all that closure and everything is taken care of while I'm working? No. It's not by framework. Object dot create is part of like ES5, ES5 is the standard name for JavaScript. Object dot create is part of JavaScript. It's a language. Basically, the idea is, you know, JavaScript is a prototyping language, right? The fact that you can do that, whatever the function person, what equals you person, was done to make Java people happy, right? JavaScript itself is not designed that way. JavaScript is basically a language which uses prototyping inheritance where, you know, the functional, I mean, the fundamental implement that you're using to incorporate reusability in your code is by prototyping inheritance, right? That's different from type inheritance that you do in static languages like C++ and Cshar, where you're inheriting from types. Here, you don't inherit from types. You inherit from other objects. This is what object dot create does. So that's something that, you know, the standards what you wanted to introduce with ES5 kind of move away from, you know, trying to do what static languages do and do what JavaScript is really good at doing. So even when you say what equals new person, it's actually doing prototype inheritance under the covers. Maybe in the advanced JS session, I'll talk about that. So yeah, so that's one other application for closures. I mean, obviously that's just a couple of things that I've covered. Closure is a very powerful thing that you can apply in many other scenarios. In fact, you know, the next thing that we'll talk about partial functions, partial function application. So that's again, a functional programming technique or a feature for which I will need internet. All right, so let me just talk about that first. So imagine that you have a function like this, right? They add A, B, C, right? A very trivial function where all it does is it says A plus B plus, nothing major. Right now I can say a print add one, two, three and it prints that. Now, you can create a function, right? Which is basically derived from another function. So what if I wanted to create a variant of add where the first parameter of add is permanently bound to a particular answer value? So for example, I want to create a version of add where I can do something like this, add, let's say add five, right? I want to be able to say add five. In this case, essentially what's gonna happen is five plus two plus three is gonna happen, right? The first parameter of add is permanently bound to the constant five. So this idea, this concept is called as partial function application. It is- Can we put a variable out there? Unless you add, can we put a variable? No, so I've not spoken about the implementation of that yet, I'm just trying to describe the concept. So we'll see how you can implement partial function application. The idea is, you know, if you have an existing function which takes n number of parameters, it is possible to define a variant or derive another function from that where one or more parameters of that function are, you know, bound to one particular answer value. It's again sometimes referred to as currying which is incorrect. This is not currying, this is partial function application. Currying is a concept in functional programming which refers to a different concept. Where the idea is, if you have a function that takes n number of parameters, you transform that into a sequence of function. So you can say, you know, it was something, currying is a different concept. So, like for example, you can do something like, let's say a curried add version is there, then I can do this. So here the idea is, C A after one would return another function where it will, you know, basically take any function which takes n number of parameters and transform it into an expression where all the functions take one parameter. And I'm not gonna talk about currying, it's slightly confusing and frankly, I'm not sure how useful that is. I found partial function application to be something that, you know, is something that you might really make use of in your programs. Currying is higher order function. Yes, exactly. So how can you implement partial function application, right? Actually, I had made a blog post about it and if I had it, I will just take on the code as I'm gonna have to sit and write the code here. Till eight, is it? Hope this works. I'll be having some luck. All right, so what I'm gonna do is I'm gonna just take this definition here and paste it into my console here. Before I tell you what that function does, let me show you how you can use it. So I can say bar add five equals partial find of add, right? And essentially the idea is you can call it like that, right? Now I can say print add five and two comma three, oops. That's a nice thing about JavaScript, no? If there's no, you can define anywhere, everything will work. All right, so what is happening here? Essentially, to partial find the first parameter is the function add, which takes three parameters. And I have said find the first parameter to the number five. And now I say add five and pass two in three. So basically it returns five plus three plus two, eight plus two, 10. Now what is happening here, right? So what does partial find in this case do? It's nothing, not rocket science. So there's a lot of validation and things, forget about all that. The key aspect is right here, right? So as we saw a little earlier, this is basically a function that is returning another function, right sir? Functions are first plus citizens of the language. You can do pretty much anything, you can do very good functions. And what does this function do? It basically takes all the parameters that were passed to that function. So basically here we can see there are two things, right? The first thing is this function called partial find, which takes a variable number of arguments. The first two arguments have to be the reference to the function and ignore context for now. It's not very important. The first parameter is the function which are doing the partial find two. And then what I basically do is I take the rest of the arguments. So basically I take the arguments that were passed to partial find. I assume that arguments from position three and up are the parameters that have been permanently bound to a constant find. So I basically transform my arguments array into a JavaScript array, arguments pseudo array into a JavaScript array, and I get the values from position two or whatever parameters are passed. And in the actual function which gets called, what I do is I just take the values that were passed to that function and build another arguments array and call the original function. I know I'm probably not making a lot of sense. See, here you get that. Like here basically I'm building a parent's array by taking my arguments. So this little line of code that you see here that is there because of the weirdness in JavaScript, the arguments is like a magic variable that's there in all functions, right? So if you have a function taking n number of parameters, the arguments is the keyword that you can use to access all of them in a non-deterministic fashion. If you want to create a function which has, oh okay, which has a variable number of parameters you can use arguments to access them. So basically I'm converting that into an array because arguments is not a JavaScript array. It is basically an object that looks like an array. You can access its members, do an indexer, it has a length property, but otherwise it's not an array. Here what I do is I basically take from that array, whichever the values are, which are constant, right? Which needs to be permanently bound to a particular constant value. And this arguments is the arguments for this function, right, when it's actually called. So this is the arguments which are really good. So I basically integrate through these arguments and build my actual parameters, right? So what does it have, this arguments array? It has the first parameters that were permanently bound and then I push the other arguments that are being passed to this function and then I finally call the original function, which is the f that was passed there and pass these arguments here. So it's just the, you know, I know that sounds very complicated, but it just does the work, it just implements the functionality. So this allows you to, you know, sorry, that there are two returns because the first one, we are returning the function, right? So this is what happens. Okay, yeah, yeah. So here we have add five and the second returns inside add. And you can keep going actually. So for example, I can say add five, 10, right? Equals, partial, find. So this is like we can compose on top of add five and I can say 10. I guess things have to be passed. Why is null required on 10? The null is basically the context for that particular function call. What do I mean by context? So in a function, you can access your this member, right? So you can say this dot something. So in case you want to call a function and bind the context, which is that this member to a particular object, then you can pass the second parameter for that. But isn't that a problem because once you bind, let's say you're going to do it multiple times, the first bound context will always be the bound context. You can't override it. That's true, yeah. Probably that's a design problem. So it's not a very useful thing to do here. Yeah, I think they can just get it on context. I mean, his point was once you bind the function to a particular object as the context and that kind of binds it permanently to that, right? So probably not very useful. That point of binding context is not enough. So does the company provide you a bound context? They can provide you the context as the context. Yes, I mean, but the idea is, you know, if, as he says, we don't bind the context there, you can use just ES5 bind to bind to whatever you want. But if it does give you a bound function, then you cannot add later bind it to the tree, or give it a great binding. But I mean, by using context, I mean, if the advantage bind to tree, bind it here. Huh, but see, for example, here, right, I'm not binding this to anything, right? I've given null, but what can I do? So let's say I have some object here, right? I can do something like, you know, var at equals add 510.bind of obj, right? Now, the context in F is, Gobi. Oh, okay. Thank you. I have, Till 10, what about? Yeah, so it's like 10 more minutes, okay? Okay. If there are any, okay? So let's just show this one more thing. So here you can, you know, I can bind further, right? So I can say 20 or whatever. Now it prints 35. So here, basically, the first two parameters of my original add have been bound to 5 and 10. So to 5 plus 10 is 15. So basically, here I've composed the top of two, right? So we can keep going like that. Obviously, you have zero parameters, you can't go beyond that. So this is actually another use case for using collosures, right? Here, a lot of stuff is being passed around through collosures. There are a couple of other techniques that I want to talk about. Memoization and throttling and devouncing and all. But I don't think I'll have time for that. Do you have questions? Practical links for the partial bind. Partial bind. Exactly. It's exactly this, right? So whenever you want to create, you want to kind of build an abstraction on top of an existing function, right? Any kind of scenario? Building higher-order functions, as you were saying. Code reuse can be a really good example. Code reuse can be a good example. Yeah. Like maybe the constant, you know, it's not very useful to put 5 there, right? Maybe you have some runtime logic that determines that value. But you want a variant of a function where that particular parameter is permanently bound to that value. Maybe you dynamically compute that value. You could use it there. Maybe you can continue the memorization we have about it. Yes. Or probably what I know is a talk about throttling and devouncing is more exciting. But we have only 5 minutes. So, you know, this is basically another technique that is, again, enabled by the functional nature of the language. So let's say you have some event source, right? Most of the time, what are we doing with client-side programming in JavaScript? We are like handling events, responding to events, right? Dev development is about event-based development. You're responding to events all the time. What if, let's say you have a scenario where the event source is kind of generating the events at a greater frequency than is desired. There are events like that, right? For example, mouse move, Windows crawl, right? And you want to do things in response to that. In fact, I have to read about this in a blog post where Twitter ran into an issue. So you know how it works in Twitter web applications, right? They implement something called infinite scroll. So you can keep scrolling the page. As you hit the, as you near the end of the page, it loads the next page of tweets from all the pages that you've ordered, right? And then it's going. So you can keep on scrolling infinity. How do they implement that? They implement it by handling the scroll event of your, of your window object. In the initial implementations, it turned out that this kind of, you know, really dragged the performance of the site, of reader.com, right? And when they investigated what they found was the font scroll was just getting fired like crazy, right? And in each of that event, they were doing some logic, probably it was never the logic as well, where they were trying to fetch the next layer of things in response to that, then can scale very well. So if you have a situation like that, maybe I'll just show you the demo here instead of showing you the code, which I don't think I'll have time for. So here's an example of that, right? So I have basically implemented a scroll on this, on this page. Now, let me just show you what happens if I don't throttle it. So I'll just take out this called throttle here. So now when I scroll, you can see that it's like, generated the events like crazy, right? Every time I, you can see by the way that the process is going up. Now what I'll do is I'll slightly change this code to call a function that I've defined here called throttle. Just refresh that. So now when I, you know, I'm just like scrolling the page. Now it's a little bit more disciplined, it's like more controlled, right? Essentially what's happening here is, the event source has been throttled to kind of mask through that event only once every two 50 milliseconds. So no matter how frequently the event is getting raised, your handler will get called only once every two 50 milliseconds. And the code for that here is, you know, I can, it's really straight forward. Like from the original handler, I just wrapped it inside throttle and passed the, you know, the duration for that. So it's throttled. Yes. So in this here, I have a throttle. It's again, not rocket science. You can probably figure it out. This again is there when logged. Take a look at it. The other thing, a similar sort of technique is called debouncing. The idea here is, this is debunked, okay. So, same way, what I'll do is I'll just take, if I can't do that here. So let's say, you know, this is another example scenario where let's say you have an online collaboration application, right? You know, how many of you have used Google Wave? So you know how it works, right? Like, the really fancy new feature was that if you're typing something, other people who are collaborating with you at that point in time can see what you're typing. But as you type, other people can see it. So if you wanted to implement that, how would you do it? So here again is an example of an event source if you're a really fast type, typist, where that event can generate it, can get generated faster rate than you would like. Right? In that case, you probably want to do something similar to throttling, but throttling will not work there. So there is something, you know, debouncing is a technique where you might use that. So for example here, right? I'm going, okay, let's see. So basically what I've done here is whatever I type in this text box, it's going to print that here. It's going to say sending whatever I type, right? And the idea here is to provide as real-time an experience as possible for these people who are collaborating. Just imagine that when you see sending, that message is getting sent, all the other participants who are on that application. So the idea here is, one thing that I've done is every time I press a key, I could handle the key press event and send it to the other attendees, right? That will not scale very well because if I type fast, too many events get generated. My server is going to just start crying on the, so what can you do? So here I could do something like this, right? I am going to type very, very fast. And now you can see that as soon as I stopped typing, the something happened there, right? That's the point when it got sent, right? So the idea here is to look at this code here, it's very similar to the throttling code, except what I've done is I've got a different function called dvance and this is my handler. And I'm doing this append here, right? Whenever my handler gets called, I take the data up into my evl list, but imagine that I send it across the network to other things. What dvance will do is here you can see that there's a duration, a 250 millisecond, right? So as I'm typing, so if I type really, really slowly, I am typing slowly. So here when I type slowly, you can see that the characters are actually being sent character by character. But if I type like really, really fast, right then you can see that really, really fast. So do you see the difference in the behavior here? Basically, if the time difference between two consecutive events is less than 250 milliseconds, then all the events get, you know, kind of apicoist, right? And only one invocation happens for your actual function. If it is greater than 250 milliseconds, then obviously your fall happens, which is why if I type really slowly, then, so if I type really slowly, then it happens because the interval between those two events is greater than 250 milliseconds. The interval is, you know, less than that, then. I don't think I have time to show you the code. Again, it's not too complicated. One moment. Yes. So I'll use that one more minute to tell you where you can get that code. So those are a lot of URLs, which if you write really really fast, you can go down. Or what you can do is just click on that. Click on at least slash maybe RNG. That's my blog address. Can you share the slides to answer them? Yes, let's share the slides. So you'll have these links as you get to the post.