Functional TypeScript | Episode 1 | Higher Order Functions + Closures

hi so welcome to the first episode of functional programming type script um here we're going to discuss the foundations and the basic concepts of functional programming so who's the series targets words um it's targeted towards people who have a decent understanding of programming they've probably done some javascript so they've probably done functional programming but they can't for example answer what is functional programming in in a sentence or they are not super solid on the foundations of why do we do things this way why do we care about stuff like purity what does the closure really mean um stuff like that so that's what we're really going to dive into is is get to the foundations and really understand it um so that being said this isn't necessarily a beginner series but i think it won't be too complicated either so let's start with the first question what is functional programming this is the notoriously poorly answered question in our programming community if you look it up on google define functional programming in computer science functional programming is programming where programs are constructed by applying composing functions this sounds like what you already do like what's the big deal you know like everyone's making a big deal of stuff and then you look at these things like lisp and it's just like oh my god that looks terrifying and then let's see functional programming languages are specifically designed to handle symbolic computations see that doesn't i'm already lost uh how do you explain functional programming building programs with composing pure functions avoiding shared state immutable side effects declarative or imperative uh all this is true but it's not helpful when you're getting into stuff so i think we can think of it in a much more of simpler uh an easier way to explain this stuff there are three core tenants to functional programming so one we have higher order functions plus closures and this is what we're going to be talking about today two immutable data plus purity three declarativeness higher order functions all this means is functions are on the same level as any other data type like strings you can assign the variables you can pass them to functions functions can return functions immutable data means you can't change anything there's no array.push there's no ray.slice you can't update an object i think one important thing to note is like when i say can't or whatever that's like the technically correct version of functional programming but of course you do this all the time so these are more like virtues of being a functional programmer you want you want to be immutable you want to you want to do this stuff purity kind of goes hand in hand and then declarativeness so the best way i've heard declarativeness described is that the structure of the code looks very much like the structure of the data we'll we'll dive into two and three in a different video today we're talking about higher order functions and closures higher order functions there's two basic concepts so one function equals data you can assign functions to variables so let's make a a simple function here that's called great takes a name and uh just logs out hello name so if this function is data that means that we can assign this to a variable greet one equals greed let's just make sure this works uh great one hello marcelo another way to look at this is actually if you're familiar with arrow functions we can define greet as actually uh in this so we can define greed as this a function is this and then you're assigned to variable greet and actually in other functional languages this what we had before is actually just shorthand for this and javascript is not exactly this way and we'll actually keep it like this just for now but it's important to know that so what else does it mean if function is data that means that a function can take a function so let's look at the most naive example of this we're going to do apply greeter which takes a greeter and uh this kind of is redundant right now this is not super useful but just to prove the point um right so it takes a function greeter and then it takes a name to apply it so if we do apply greeter greet we can do the greet one uh in marcel let's try that and it works okay what else does this mean so we can pass a function to a function let's actually look at the most common example of this and that's when we're working with lists so let's first look at the imperative way of doing this let's say we have a list of names which i'm just gonna bring over marcel vince jost margaret let i equals zero i'm sure you've done this a lot in high school university or whatever i'm uh i think we know to not use this stuff anymore but it's it's good to realize why we don't do these things so we do greet names at i and this is this is okay but it's like all this stuff you don't care about right you just care about you're greeting every person here you don't care about the index we're not using it we're only using it to access the name it's a lot of extra stuff they don't care about and yes we can do for let of and that's a lot better but it with uh with higher order functions becomes even simpler so the alternative is actually just doing names for each greet so now it's actually a lot closer conceptually to what you think about you're greeting each name right so let's build our own for each so we'll search in error functions so we take an array and we take a function actually we're going to have a generic thing here so t is a t array and function is something that goes x arg which is type t and returns uh any so in here we're gonna basically be going down to a for loop so let a lm of array f of lm and let's see if this works let's get rid of this and it works so notice that we are going down to some imperative thing here but the point is to deal with like a bit higher level of abstraction where you're just thinking in terms of you know for each names greet and it turns out this is a really good abstraction and you end up never having to write a four loop ever again higher order functions we didn't get to returning functions but that gets more interesting when we talk about closures right so closures basic concept two closure equals function that depends on outer state okay so let's look at this greek function we want to make it a bit more generic by not having to rely on hello we want to pass in what what type of grading to do you know they might say good morning they might say greetings uh so let's do make greeter um so this takes a greeting which is a string and then we return a function and it takes a name and it logs out the the result so it takes a greeting and it greets that name hello greeting equals make greeting right so i'm going to get rid of that marcel hello marcel but now we can do stuff like uh greetings you could say like why don't we just make this greet actually take a greeting here right like we can add uh we can do greetings in here and then do the same thing but the part that sucks about that is every time you call greet you have to pass in hello so this is actually really useful let's move on to a bit more practical example and something that you probably see a lot day to day in typescript it's the core concept of decorators the idea of decorators is basically it's a function that takes a function and returns a function so let's look at an example called log one used we take an f with a function and we take a name which is actually a function name and we return we return a function that is basically just going to do it's just going to log when it was used okay i will type this later let's see an example this log logged greet equals so you want to kind of decorate the the greet function so that means what we're going to do is just take that greet and make sure it logs this every time it's called so hello let's try this called greet at blah blah blah and this f dot name here you might be thinking that's a bit funky um the reason why i left this as a function is because anonymous functions don't have names um this will actually become a problem in a second uh but it's just kind of useful this there like there's a reason why decorators in typescript are not just functions taking functions and i think that this is part of it it said called greet at blah blah blah hello hello um [Music] so this is cool and we can actually keep changing these right like let's say you want to do like notify slack notify slack let's actually just rename this to log to keep it short notify slack same deal f dot name and just because i don't have slack ready uh actually here we might take a channel too let's put it so reality this would be something like slack dot send to channel channel message equals equals this right let's make a mock here slack channel message and we're just gonna do a console log sent to channel right and now we can do this expected two three arguments got one uh right right we wanna do like um greet or greets logs i'll look up like app blogs okay sent to applause message and actually this this kind of sucks so the name here kind of broke this is actually a problem with anonymous functions and maybe i'll leave this as a as a question for the audience let me know in the comments uh why this doesn't work for now i'm gonna fix it by putting it in here this is kind of a yeah called great at blah blah so this syntax not amazing and that's why we have decorators so you can you would do stuff like um notify slack uh my my api doesn't really work for this um but you could do stuff like this it's a bit more concise and looks nicer but yeah this is the core concept of decorators yeah so let's just quickly review what we did first higher order functions basic concept function equals data second concept closures depends on outer state all right so that's it for higher order functions and closures all right so that's it for higher order functions and closures next time we're going to be talking about immutable data impurity let me know in the comments if there's anything i missed if there's anything you want to see but yeah thanks for tuning in

Channel: Marcel Rusu

Views: 741

Rating: 5 out of 5

Keywords: functional programming, currying, higher order functions, lambda, typescript, programming, javascript, haskell, foundational

Id: 90h7lC4usn4

Length: 14min 24sec (864 seconds)

Published: Mon Aug 03 2020