During this online workshop recording, Matt will explore Callbacks and Higher Order Functions and go under-the-hood of JavaScript, so you can confidently tackle new problems and work through blocks.
We’ll cover:
– Building functions like map, reduce, and filter from scratch
– Using higher order functions to keep code clean even in complex situations
– How to diagram through higher order functions and callbacks scenarios
Join us for live workshops every week here:
Learn more about Codesmith here: codesmith.io
Stay connected to our community!
Codesmith:
Learn JavaScript for Free:
Free Events & Workshops:
Follow us to stay updated!
Facebook:
Instagram:
Twitter:
LinkedIn:
#learntocode #javascript #programminglanguage #callbacks #higheroderfunctions
[Music] Hi y'all hello welcome Good to see you all uh welcome to jobs With the hard Parts uh I am Matt thanks Ted for the wave uh appreciate it uh I'm Max Matt Severn I'm the lead instructor For the part-time remote immersive Program Petrie as it's called affection Le if you can if you didn't hear me Bantering with Apollo about it it's so Good to see him Um uh cool so what that means is now That I'm a lead instructor of Petri that Means I went through the program Apollo Was uh p32 I went to P3 beta so we're Talking years ago at this point Um I graduated I became a fellow and Then I moved on to an engineering Instructor and now I sort of run the Program uh that also means I'm on the Engineering team for code Smith I work On code Smith IO CSX some of the other Internal tools and I work for other Companies outside of code Smith creating Automatic automated workflows crud Applications and on and on and on I do Want to hear from you a little bit I Want to know who I'm working with so I'm Going to go as around the room as I can We I am want to be cognizant of time Um because we do have some JavaScript Material I want to get to so if I don't Get to everybody that's cool but I do Want to talk to some of you so if I call
On you Um if you could please tell me where You're tuning in from how many hard Parts you've been to and your favorite JavaScript resource that would be Awesome uh and Gary you're in the upper Left hand corner of my screen so you win Tell me about yourself my friend uh Where you're tuning in from how many Hard parts you've been to and your Favorite JavaScript resource Okay so I'm tuning in worth Um this is my first hard Parts uh work And what was the third question about Resource Well so far I find coach Smith the CSX Platform has been really helpful so I'd Say that Cool yeah it is great information there Um as you start finding what feels like Gaps in the CSX curriculum or something That's not fully explained look at the Things like MDM to round out that Knowledge it's not an accident that we Don't give you all the pieces that you Need to solve problems that is the hard Learning starting right there did you Say Fort Worth you cut out a little bit Uh yeah Fort Worth okay cool cool are You a Cowboys fan do you follow football At all Uh I don't really follow football and They've been kind of bad Well they've been like they've been a
Tease but good for you football doesn't Doesn't help you do anything in life Um oh Shannon are you volunteering I can volunteer I had a question to Build on that but I know Which you're going to Um I actually I'm in the Bay Area in California Um I just did the last couple weekends I Did the JavaScript for beginners course Which is really great Um and also kind of getting to know Resources CX CSX and MDM but I was Actually curious about CSX because I Found myself going through and getting More often than not getting frustrated And then kind of getting down on myself That I couldn't figure out you know Certain problems and then I was like Trying to work on it and then like an Hour or two would go by so a I'm Wondering how common that is and I'm Trying not to like give up on myself and Like turn away from coding just because I'm frustrated and be I keep telling Myself that and like when you get to Those points what are there other Resources in that moment that you found Are really helpful like do you have Go-to ones and those moments that you Recommend we check out Yeah uh great Phenom how many people are Experiencing the same thing Shannon is So many hands uh absolutely
[Laughter] What did you say I said thank you for The validation yes absolutely I'd say It's very common I went through the same Thing when I went through the program Um and and that is somewhat by Design I Talk about the hard learning in code Smith for those of you want to come to Be immersive you can expect more of the Same uh Shannon have you ever heard the The term imposter syndrome Oh totally yeah that's what often Happens when folks are especially in Engineering like it's it rears ugly head In engineering almost more than any Other field like that voice that's Telling you you can't do this you're not Going to get there it's just frustrating Bang your head against the wall you're Never gonna get the answer that's a big Old lie you are gaining so much that you Don't even realize you're gaining when You're going through these couple hour Long sessions not solving a problem the Neural Pathways You're Building as You're trying to tear down a problem and Getting a brick wall and hitting a dead End and reading documentation and not Understanding what it's saying and Getting so exhausted because you've Looked up four words in a five-word Sentence like yes absolutely that Happens all the time but the amount you Are gaining like the under the hood
Energy and neural Pathways and problem Solving brain that you're building there It's sort of like going to the gym right I keep going back to football I don't Know why uh maybe it's because there's a Game on and I'm thinking no I'm not but Like those athletes go to the gym and Lift a bunch of weights that doesn't Directly help them catch a football Right they still have to go on the field In practice but they're building those Muscles so they can do that with Excellence when you're banging your head Against the wall sometimes you're not Getting any closer to an answer but You're building the muscles that are Going to make you a great engineer Because that's 90 of the job having even If you're an expert trying to build Something is so complex you're still Going to be banging against your wall Trying to figure out how to do certain Things and so you're going to have that Those mental palaces to be able to Withstand that those mental calluses are Going to serve you when you have to Learn something that was never taught to You which happens in engineering all the Time oh you're a JavaScript engineer Great here's our project in Python help Me do it and because you go through These processes you have the ability to Teach those things you start building up Your own network of resources to turn to
In your own your own Um best practices when you hit these Blocks so this is not lost work Resources that I go to Um mdn is a great one Um stack Overflow sometimes if you just Type in the problem that you're having It'll flat show up and stack Overflow And that's why getting this vocabulary Is so important writing like can't solve Problem help doesn't get you there but If you're talking about I don't know What the second arguments the second Part of the signature of a for Loop is Typing in like that and you'll get an Answer right away uh so just plugging Those things into Google are going to Get you there mdn is going to get you There Um these workshops are going to help you There jsb is going to help you get there All these things together I think are Going to be Tools in your tool belt and You're just going to pull out you're Going to start to feel which one you Want to pull out at certain times I know It's not like the most like targeted Answer but I promise I appreciate the Just What I Am what I'm feeling I'm not Alone right because I think I think the Younger version of myself would have Just been like oh I suck at coding I'm Not meant for it and then give up right So it's encouraging to hear that other
People like also are uncomfortable one Struggle but they get there right so That's awesome yeah I you could have Literally um the the folks gosh I just Kicked off scratch projects with my Midco horse so they've been with me now For four months and I could have plugged You right into that group of people Who've been working on this for four Months just built full stack Applications pretty incredible ones uh And you could have said that sentence And they all would have been like oh Yeah I'm going through that right now You would have fit right in so it kind Of never goes away But your ability is increasing even if You don't realize it good to know thanks Guys yeah if it helps to think about Where you I don't know how long you've Been on this journey you've been through Jsb think about the things you knew Before jsb and the things you know now You know more you're able to do more and That's all each and every single day if You learn one new thing it was a Successful day and you just have to keep Reminding yourself comparing yourself to When you started or you yesterday and That's when you start to see how much You're actually growing That's a great point Thank you awesome Awesome question y'all uh well Shannon You all didn't ask you but awesome
Sharon uh so cool to see uh and I'm Sorry where did you say you're from I'm from a town called Pinole in the East Bay so I'm about 30 minutes from San Francisco Bay Area Bay Area that's Right Uh I was just there a couple weeks ago And I like as I was taking off there was An earthquake Huh like a four pointer so like uh two Weeks ago two three weeks ago I missed It interesting hopefully hopefully you Missed the triple digit uh wave we had So you but you guys came in on the tail End on the tail end of that heat wave Yeah Uh good stuff uh Patricia Um hello I am Patricia I am also from The Bay Area as of yesterday Um I was actually born here but I've Lived for 23 years in Minneapolis Minnesota and I just moved back to be Close to my family so I'm living at my Brother's Um my brother spent his whole career as A software engineer I spent my career doing bookkeeping in a Natural Food Warehouse Um and as I was making the plans to move Back here I was like I need to get into I just need to get Into something different I need to do I Need to like try new things and Um
And so I have also taken I took the JavaScript For beginners but back in April So I actually feel and then I've been Like in this crazy packing moving thing For for many months so I feel definitely Kind of rusty and I'm relating hard to What Shannon was saying like I was Trying to do a little brush up before This today and I was like I was like I Remember I remember what these terms I Remember reading these things but I Don't remember how to do these things Um and definitely the the W3 Um school resource is one of my Favorites and I've also been having some Good luck Um a couple times Googling things for YouTube like you like I'll Google Something and then I'll find like a YouTube tutorial that'll relate to the Thing so Um great stuff great stuff also one of My uh favorite teachers an online Teacher m-o-s-h mosh code with Masha Yeah he's one of the that's one of the YouTubers I've been watching cool yeah I Recommend him as well if you haven't Encounter time great uh stuff Patricia The good thing is if it was ever there Uh it comes back quick even if it's Rusty I'm always forgetting things and Then like I look at two sentences of Something in documentation and I
Remember all of it all of a sudden so it Does come back quick Um one of my really great friends is in Minnesota Minneapolis Oh yeah and um has anyone seen um the New Netflix series about Jeffrey Dahmer How about one person my best friend is Like uh the poor guy is such a a Doppelganger for the guy that plays Jeffrey Dahmer like right you were like Dude you want to change your look sorry You got to change your life not the time Uh that's not relevant to anything you Just said Minnesota and it made me think Of it yeah so cool well I'm glad you're Getting close to family that's always a Great thing and I'm glad you're here Shaking off the rest Thank you cool Um Kevin Hey there me yeah or yeah okay yes Okay uh I'll go first uh I'm actually Kevin yes Kevin without the Hendrix you Go ahead and then we'll do Kevin Hendricks back to back Kevin Awesome I'm actually from San Francisco As well uh the Bay Area Um this is my third I believe third hard Parts And then just I I love mdn uh that's Really good reference point Cool cool glad to have you a lot of Bay Area folks here tonight uh I've never Actually been to San Francisco when I
Was there I was in like near Cupertino I Went to the Apple campus they didn't let Me in fools they don't know what they Were missing uh so glad to have you uh Kevin h Art hey there I'm uh from Knoxville Tennessee uh this is my first card Parts Um and uh I I love mdn a lot just Reading how things uh work in in Specific technical terms is always nice To find you can get some get some hidden Gems out of that um that sometimes get Glossed over in just tutorials with Examples Yeah I'd say ambient Yeah yeah I remember when I started I Hated mbn because I never made any sense To me and then the farther along I got In my journey the more I love because it Was so specific Um good stuff how far is Knoxville from Chattanooga It's about an hour and 45 minutes okay So they're gonna start building the new Volkswagen id4s in Chattanooga the 2023s And Um uh Gosh I almost said I should just know Yeah okay so I'm just gonna do it y'all This is kind of a secret but not really So my wife is pregnant Um we're just getting out of the first Trimester so like we're getting out of The the place where we're all worried
About it and so we're looking at cars we Have this little itty bitty Honda Civic And I'm trying to get 94 well I did get 94. and I was so mad because 2022 Doesn't get the federal tax rebate Because it wasn't built in America and That ended in August if I would have Bought it in August I'd have been fine Now only the 2023s are going to have the Federal tax rebate because they're going To be building something new to Tennessee but I can't wait that long I Can't wait till 2023 to get a car so I'm Just out 7 500 bucks and I am steamed in Case you can't tell thank you y'all Thank you knock on wood still well we're Out of the first trimester but you know I'm always like thinking about Stuff it's like someone told me that When you become a parent your heart is Just outside of your body for the rest Of your life And like I feel that already and the Baby's not even born yet Um oh oh wait where was Paulo's Um Where did she go we're right here hey You can't if he heard that he can't tell Anybody it's still kind of a secret it's Not Petrie doesn't know yet okay Okay cool I'm gonna wait until much Farther along before we tell the Community there Thank you so uh gosh okay let me do two
More I'm I'm getting away with uh murder Here and you all want to talk about JavaScript Um so I'm gonna keep running down my Line here unless folks really want to go They can throw their hands up I can do Two more Um so I'll start with Carter Hi I'm Carter hi everybody Um I'm from uh Denver Boulder Colorado Area uh this is my second hard Parts my First was on recursion Um my favorite resource has been mdn as Well along with free code camp and CSX Free code Cameras lots of great stuff to practice There Um Boulder Colorado I haven't I've only Been like in that area once not even Boulder it was closer to Denver but I Have no stories there except uh it was Like in the mountains in our hotel we Were at a casino or something my wife Was doing a performance there and so I Just went with her for the weekend and So the hotel was in the mountains and so Our our rooms in the top floor and just To see what would happen as soon as we Got the elevator I ran as fast as I Could all the way down the hall to see If like the the oxygen would be passed Out uh it did nice I love it Um cool thanks Carter so glad to have You here uh Emily
Um I am from Fond du Lac Wisconsin Um this is my first JavaScript card Parts And my favorite resource is also NBN Um although I did get my start using Free code Cam and It has a very special place in my heart I still go back to it sometimes Um and CSX I'm really enjoying the Platform Yeah cool glad to have you and yes isn't It funny the way that your first Resource like borrows your way into mosh Was my first resource and so I'm like oh Mosh where would I be without you Um I love it uh are you are you a Packers fan No We can be friends I I'm originally from Detroit so I'm not allowed to be friends With anyone who's who loves Green Bay What about bears I don't have a problem with them we've Both been bad for a long time so so Your hairspam yes yeah the city of Chicago is beautiful I love it there Um yeah yeah I love it it's like a Beautiful nothing like Detroit can't Even make the comparison Um lovely lovely city cool uh all right Y'all welcome are you like ready to do Coding yet like shut up Matt talk about JavaScript holy crap it's been 45 Minutes yeah okay so we're gonna get
There right now first of all everyone Who just spoke up thank you so much for Sharing I know it's really not easy to Talk in front of people especially when You don't know each other Um but that is something I would like us All to start getting used to I'd like You to start expecting that when you Come to hard Parts this is going to be a Group activity uh both in just getting To know each other and working through The problems That means that I'm like I said going to Be working with you to technically Communicate our way from problem to Solution through code uh and I know Working together talking out loud to Each other that is going to uh Foster Some anxiety within I know that a great Deal of anxiety uh believe me uh Standing up in front of a room of 70 People that I never met before talking About such a broad topic as computer Science and JavaScript I feel it too Um But what helps me get my anxiety under Control when we're talking about these Things is something that I would like us To embrace in this room tonight uh Something I tell myself every time I'm Reading a room I think it's vitally Important that we achieve some Assemblance of this here tonight and That centers around these three words I
Don't know Oftentimes they bring with them a sense Of defeat uh I think they're definitely Brave words to say in front of a room of Strangers but most people when they say I don't know they they think I don't Know something and I should therefore I Feel inadequate Um instead I would like us to think of Those words as I don't know something And now I have the opportunity to learn It uh I don't know is literally the Reason all of you are in this room if You knew everything you wouldn't need to Be here this would be a waste of your Time so please do not fear those words Tonight if we're working together if I Call on you I don't know is a perfectly Acceptable answer uh all of us have it About you will ask me a question tonight That I will not know the answer to I'm Almost 100 sure 99.9 someone will do it That's okay we are all here to grow even Better than saying I don't know is Trying to use the things that you do Know to work your way towards an answer You don't because that is engineering Even if you don't end up with the answer That I have in my brain when we're Talking about this stuff that's okay Watching someone trying to deduce an Answer work their way to an answer we Can learn so much by watching People's Cognitive processes getting from point A
To point B even if we try to hit Z and Q In between It's still great to know where the logic Went a little bit sideways so please do Not fear I don't want to say guessing Out of the blue but do not fear working Your way towards an answer that you Don't have I'm right here to help you I'm going to make sure we stay on track As much as you trust me to stay on track After I've gone on like 15 different Tangents uh I promise when it comes to The code I'm a lot better but uh just Have that courage tonight give Yourselves that permission to not know Give yourself that permission to work Towards these answers even if you're not Sure what they are cool All right and with that callbacks And higher order functions so callbacks And higher order functions seems simple To folks who have been around JavaScript For a while but it's one of the more Misunderstood Concepts in JavaScript and It is so important and it enables things Like map like filter like reduce these Array methods that you might be playing With at this point in your journey Asynchronicity the web is built on Asynchronous JavaScript asynchronous JavaScript would not exist without Callbacks so this is a Cornerstone of The web it is an important concept and One that not a ton of people are able to
Articulate they'll say here that's a Callback function but they don't know Why it's a callback function we're going To unpack some of that here tonight it Also makes your code a lot more Declarative Um have we heard those terms before Declarative verse imperative Declarative programming essentially Means a lot more readable Um imperative programming is a lot more Step by step uh I'm gonna write a for Loop that's going to iterate over an Array that's going to do you know go Through all the way all uh through each Element in the array until I hit X and Then I'm going to push those I'm going To take those elements and put them into A function and then the results of that Function I'm going to push to an array And then I'm going to return that array Or that's imperative code or I can say Array.map which does the same thing That's the declarative version of all That same stuff does that make some sort Of semblance of sense there declarative Is a lot more readable even though you Don't know all the steps that are going On in between Uh so callback functions higher order Functions make your code a lot more uh Declarative and it's a big piece of the Code Smith technical interview which Might be why most of you are here
Um cool in order we're going to talk Through a lot of JavaScript tonight in Order for us to walk through functions There are some principles we have to get Under our belts number one functions I Keep throwing that word around what is a Function a function allows us to store Logic like a recipe for X for executing For producing some results if you could Pull the page out of your recipe book And just run it every time you wanted Cupcakes that's what a function allows Us to do but in programming it's a way For us to store logic store a set of Steps that we can just run over and over And over again Uh functions help us stick to an Important principle in programming known As dry Dr y does anyone know what that Means Uh I saw Carter's meat hand come out First feel free to use your virtual Hands I'll try to catch it if you throw Up your meat hand I'll try to catch it But no problem take it away Carter sure Yeah it uh just means don't repeat Yourself don't repeat yourself Absolutely functions allow us to store a Logic so rather than rewriting those Steps every time I want to get that Result I can just rerun the function try Do not repeat yourself Um then we have this thread of execution So JavaScript is single threaded it runs
Left to right top to bottom singles Product means it can only do one thing At a time so the threat of execution is A conceptual device that allows us to Track where we are in the execution of Our code we'll sort of take on the role Of the threat of execution tonight as We're stepping through code Um typically it's the JavaScript engine That's running the thread and tracking Your code and everything but tonight We're gonna we're gonna take on that Mantle and then walk through code And then we have the concept of memory So we have functions storing Logic the Threat of execution tracking where we Are in code and then memory a place to Put stuff that we want to use later a Way to sort of persist data Right if I didn't have memory I wouldn't Be able to recall anything all I could Do is just use what's right in the front I mean memory allows me to store things Away that I might need later sometimes You'll hear it referred to as a context Or a variable environment or a lexical Variable environment you can think of an Execution context uh as the conceptual Space where we're going to run our code Where we're going to execute code we're Going to track the thread of execution In that execution context we will quite Literally have the context for running Our function which means a memory to
Store things like variables and Constants that space for where we're Going to actually run through the code Than our thread of execution Um as it works its way through functions So all of these things together Could be nice yeah all these things Together kind of make up an execution Context this will allow you to persist Store data Um in case you can't tell You can come to expect this terrible Penmanship with me I haven't even Written words yet and this is already a Mess just do your best I'll try my best To at least make it so you can indicate What something was but by and large You'll have to remember and listen to What I'm saying Okay now I need to volunteer though Because to introduce you to these Concepts so they're not just Concepts But you actually have some experience With them we're going to walk through This bit of code and I need a volunteer Austin was ready to go I dig it all Right Austin there are three things I Need to run any bit of JavaScript Knowledge or logic do you know what Those three things are To run any bit of JavaScript knowledge Don't listen any misspeak I need to if I Want to run JavaScript code I need three Things do you know what they are
Memory Yeah execution what specific you Actually write memory is one of them What specific memory might I be Referring to here Uh Global memory Global memory on fire Absolutely we need Global memory a place To store stuff what else do I need Uh Global execution context Global Execution context acts absolutely And then a call stick and then a call Stack 100 percent It sounds like you've done this before That's not a knock that's great Um yes Global memory a place to store Stuff in our Global execution context at Global execution context we're actually Going to track the threat of execution And which lines of code we're Interacting with and then the call stack Which tracks which execution context in Which we're operating so take it away You've got the three big ones what am I Doing uh let me Give you some lines of code here Okay so we will start by using keyword Let to declare a variable labeled num And assign that the value of three Uh and again where am I going to do that Then that's going to go to uh Global Memory absolutely spoiler alert there Keep going And then we are going to declare a
Function label multiplied by two Uh in global memory and then assign it The value of its function definition Okay So I'm gonna declare a label in global Memory and assign its value the function Definition I've got that what's next We are going to skip down to line seven And declare constant label output and Assignment the evaluated Results of Invoking multiply by two and passing a Num oh my variable number oh my goodness Did you all hear that communication that Was so crisp that it's exactly what we Are doing here quick question we skipped Down to line seven why did we do that Uh because We do we haven't invoked the function Yet so we don't go into its definition Or coding block Absolutely 100 right And then I love declaring a constant Different from a variable we can't Change this one and its value is going To be equal to the evaluated result of Invoking multiply by 2 passing a num the Variable num as argument so was its Value going to be there's going to be a Time delay here even if it's only a Tenth of a millisecond or something What's the value going to be well I'm Waiting to get this evaluated result Uh undefined boom nailed it nailed it I
Wish you were in the immersive right now I'd be giving you so many MacBooks but Alas I only give those away to folks in Immersive okay so uh we're invoking a Function we need to do a bunch of stuff Austin what do I need to do here So we are going to push multiply by two Onto the call stack first yeah I dig it and then we're going to open a Local execution context cool we are but I'm going to make sure we annoy Ourselves a great deal when we do this Each and every single time tonight so Like I said hard Parts is a group Activity so we are never going to open An execution context alone whenever it's Time to open a new execution context Whoever's doing it is going to lead us In they're going to say and now we're Going to open a new and everyone's going To unmute and together loudly Obnoxiously we're going to say execution Context uh and if you don't do it that Way you're gonna break my heart and I Will cry So Austin you have to lead us in it's a Big responsibility it's the first time We're doing it tonight and let's see how Much energy these folks have let's see How much participation they have Um so we're going to open a new Execution execution Oh that was a stellar first go you all I Am impressed I think that's the best
First go I've ever had uh you warm my Heart sorry and my cat is playing fetch Now she brought in a little ball and she Wants me to throw it and I threw it and She brought it back Okay take it away Austin Oh I gotta do the thing you're like Matt Open the contacts cool so we now have a Local memory And we are running multiply by two And then we are going to uh in local Memory input number is going to be Assigned to num which is three Cool so uh yes our threat of execution Enters our local execution context we Encounter our first line of code which Is well essentially this right here Right so we're going to match our Parameters in our arguments right so uh You're absolutely right the value of num Is going to be the value of input number So where am I going to find the value of Them In our Global memory in global memory What is that value Three And where am I going to save this Parameter input number Uh in local memory in local memory So we have Um input number And we're assigning the value of num Which is three Does that make sense to everybody
Sweet okay take it away Austin what's Next And then we have a constant result which Is going to equal the evaluation of Input number times 2 which I guess we do In the local execution context we Evaluate that there or does that just go To local memory uh great question let's Start with the constant you said we're Declaring this constant where am I Declaring this and where am I going to Save it So we're going to declare it in local Memory yes so when declare that constant Result and what is its value yes we need To do this operation so the first thing I'm going to do is Javascript is going To encounter a word that doesn't know It's not a reserved keyword it's not for It's not return it's not function it's Not a word that it knows so it's going To go huh what the crap is this right What is input number and where is it Going to look for input number In local memory yeah and actually Specifically you're right in this case Local memory specifically generally JavaScript will always look in the Closest memory that it has so right now We are in this execution context the Closest memory to this execution context Is local memory so it's going to look There does it find input number in local Memory
Uh yes it's three it does it's three so Cool now it has a value for this then JavaScript is going to encounter Encounter the multiplication symbol and It's going to say what am I multiplying It by to JavaScript will evaluate this Entire line before it actually does Anything so you're right in that this Will probably be six before we actually Save it all in the memory I don't know The exact order there but JavaScript Will look at the entire context of the Line before it actually does stuff Conceptually for our intents and Purposes yes we're going to evaluate This in our in our our local execution Context We're going to return that result Outside of the Uh local execution context cool so I see The return keyword that means I want to Spit out something out of my function What am I going to return I'm going to Look for results I'm going to find it in Local memory and I'm going to get that Value 6 and where do I return it out Into Is going to go it's going to be assigned To Output To Output in global memory fantastic uh What's next Um and then we hop multiply by two of The call stack I love it And then we garbage collect our local
Execution contacts cool yeah the threat Of execution will enter re-enter the Global execution context once we pop This off and then I'll say you're wrong You're not wrong this does get garbage Collected the way I tend to say it Though is that this now becomes eligible For garbage collection because we don't Actually have any control over that Process JavaScript is going to do that In the background whenever the heck it Feels like it Okay Uh great what's next you're on fire now We will then declare a constant called New output and assign it the evaluated Results of invoking multiply by two and Passing in 10 as its input cool so where Am I going to declare new output Uh in global memory in global memory New outputs and you're at and what's the Value going to be one waiting for this Result Uh undefined undefined fantastic and Then okay we're doing some things what's Going on here what happens now We are then going to going to push Multiply by two with input of ten onto Our call stack And then we are going to open up a new Local links Executions Oh was that Ned Ned was on it Austin Tried to like sneak one by us and then
It was like no no sir no absolutely I Realized halfway through local I was Like oh yes Yes uh just be happy we're not doing Recursion oh my goodness does it get Annoying in recursion Uh Local memory and multiply by two Sweet what are we doing now Then we are going to read let the line Left to right it's going to hit input Number and that's going to go into local Memory and be assigned 10. We are going to match our parameters and Our arguments uh so where am I getting This value 10 Foreign Yeah between the params whenever we Invoke a function whatever is between Those parens is the arguments this Parameter is going to be a placeholder For that incoming argument collectively All the arguments are all the parameters Are known as a function's signature Great stuff What's next now we are going to declare A constant result in local memory and Then assign it the Value the value of the evaluated result Of Input number which is 10 here times two Represents one okay right yes Awesome stuff what's next And then we will return that result
Outside of our local execution context Cool so I'm going to return I'm going to Say result what the crap is that I'm Going to look at my closest memory I'm Going to find the result I'm going to Say that value is 20 and I'm going to Return that out of the function and Where does it end up again did you say It I might have missed it it's going to Be assigned to new output in global Memory new output absolutely Because the next execution context where We're returning this out of is global That's how I know to look at Global Memory all right uh what's next We're going to pop multiplied by two the The function off of the call stack and Then our threat of execution is going to Return to the global execution context And then That local execution context will be Eligible for garbage collection look at That picking up terminology on the Fly Absolutely all right what's next We are done we are done he says he asks Do we are we done what do we think Yes we are done Austin fantastic job Deft communication amazing work all Right yeah great stuff those are the Concepts Global memory Global execution Context call stack these are the things We need to get started and then Executing code line by line savings Functions and invoking functions
Different things all done beautifully Okay All of that together allows us to write And run code Functional programming buzzword here is A paradigm it's a method for writing Code uh there are conventions and rules That we follow for a variety of reasons When we're trying to decide how to write Code Um functional programming is a Methodology that encompasses a lot of Those rules object oriented programming Is another methodology for writing code One of the concepts associated with Functional programming pure functions Fewer functions that means no side Effects when I first started learning This I'm like great what's a side effect Like I took a pill and now my foot is Three times bigger than it's supposed to Be what does it mean what that means is Nothing outside the function is affected By anything inside the function the Function doesn't reference anything Outside of itself it's completely Contained it has no effects outside of Itself whenever you run it Um pure functions have no side effects It takes in an input and it produces an Output without affecting anything else Which means that it will always given The same input it will always always Produce the same output it's not relying
On a network request it's not relying on A piece of logic that is outside of Itself nothing impacts the environment Inside so whatever if you give me the Same input it will always produce the Same output Um higher order functions are another Lovely concept provided to us by Functional programming map filter reduce These array methods I mentioned earlier They are higher order functions why why Because because they are we'll get to That we'll get to why here in a little Bit Um they're going to make our code more Readable and there's not much else to Say about that Um just give your future self some love By writing readable code as soon as you Can start adopting a declarative Programming style and I promise future You is going to be very very happy uh Chin do you have a question Yes can you can you give me an example About the side effects I'm still have a Hard time understanding what that means Sure Um so if I wrote a function say multiply By two Right Say I'm writing a function multiplied by Two and in the function Logic for Multiply by 2 I call another function multiply by
Three This is relying on logic that exists Outside of the function Does that make sense yes Uh in web development you're mostly Going to see it in terms of network Requests like inside my function I'm actually making a server call Yes and so now I the result depends on Whenever that server call returns so if My server call fails my function can Fail through no Faults of my own Oh okay now I get it okay got it okay Yeah that makes sense okay perfect thank You so much great great question great Question and if it makes sense now but Doesn't make sense later feel free to Ask that question again or ask for more Clarification absolutely it's it's a Challenging concept if you're not Familiar with like um full stack Architecture uh Shannon How common or uncommon kind of Proportionally or pure functions to Higher order functions is higher order Like 90 90 of what you'll see in pure Functions is like 10 is a pretty split It's a it's situational it'll depend on What you're trying to write there are There are functional programming Aficionados out there that are like you Have to write everything in functional Programming functional programming is The only way to write things and so they
Are constantly striving for peer Functions obviously you need to make Network requests so that's impossible to Exist solely on pure functions but then There's the oop folks who are like Oriented programming is the only way to Write programs it's the only way that Makes sense so like the farther along You get in your journey uh you're gonna Develop your own opinions and like to Write things the way that you like to Write things when it comes to higher Order functions you can have higher Order functions that are pure you can Have higher order functions that are not Pure it's all about how you want to Write them higher order functions came About because people were trying to Achieve peer functions That was that a bunch of Gobbledy goat Did that make any sense at all I was Thinking of like two groups in a bar Arguing over which is better on how to Write things it was great welcome to Software engineering that absolutely Happens 100 Okay awesome Uh you're in the Bay Area right go to Any bar like around and hear those big Companies and I'm sure you'll hear You'll hear people arguing about this Technology or that technology it'll Happen that's great Yeah that's also why you can Google one
Thing and come up with 30 different Answers and 30 different approaches for The same thing which is incredibly Frustrating uh early on Um cool so let's start unpacking all of This stuff like we have functions pure Functions saving logic why do we do any Of this what's the point of a function How does it make our code Drive Um well let's find out I should I Console I'll ask for a volunteer I need A volunteer to help me feel some pain We're going to explore the reason why we Have functions here in programming why Are they a concept I need a volunteer Who wants to help me write a function I dig it Um okay so you're gonna help me write a Function it's gonna uh we wanna Do what the slide says so what am I Going to write help me do it Okay Um You have to bear with me my technical Speech is almost non-existent right now Right now it's it's on its way it's Improving it's in process yes So we are going to Clear a function Cool so what do I want to write if this Is my code if this is my screen what do I'm going to write here uh I am your Keyboard tell me what you want me to Spit out
Um We'll put Oh crap You already said it I'm just being I'm just being anal retentive Um I'm having a total brain part right now I'm trying to remember if I need to put Anything before the word function Um ah well just do what you think and Then I'll we'll find out if you're right Or wrong Um pumpkin So you want me to write the word Function And then That's a great question We'll do 10 but 10 written out t-e-n lowercase And then Foreign But with an uppercase s Oh my goodness you are so precise and so Correct it's it's uh it's remarkable yes Yes Camel casing it y'all this is so good uh In the time she took to think about how To name things so important especially As you're writing bigger applications Naming things is really hard but it is So important to help your code have some Semblance of readability it's actually a High level skill awesome stuff what's Next what do you want to see me write
Um we're going to do a Parenthesis Uh sorry open and close oh wait no we're Writing it out so we don't need to close Windows yet no you're right you do want This And then the curly brace Let technical communication on point Okay what's next No input returns so Foreign But I feel like that would be Too easy and I'm missing something Let's find out uh does this meet the Requirements of what is on the uh the Slide here what do we think yes it meets The requirements I'm satisfied I'm not Going to say one way or the other Because I'm going to equivocate no throw It off the bus Everyone is an agreement You nailed it Ellie Really yeah he nailed it you killed it 100 100 Absolutely uh yes this is all we were Asked to do create a function 10 squared And you nailed it with such technical Precision that I'm like like into Writing words you're even talking about How you want to case the name uh great Stuff absolutely this is exactly how you Do this uh Round of Applause for Ellie Thank you so much all right next up Adding another volunteer
Uh Patricia We're going to write another function This time we want a square nine how am I Going to do this Um okay so here again takes no input so You're going to write function And then a space and then Um as Ellie said and thank you Ellie you Did awesome so lowercase uh n-i-n-e And then capital S and the word squared And then open and close parentheses And then open curly brace And then on the next line Return Nine times nine Um Semicolon Oh my goodness y'all then on the next Line close curly brace Yes absolutely even the clean code she Doesn't need eslint y'all she's going to Add her semicolons on her own a great Practice I have questions why I mean would anyone Ever write a function this simple like Why would you ever why would you need a Function if the function only does one Exact precise thing Someone might be getting ahead of us Ourselves okay hmm Hold on to that thought hold on to it uh While you're holding on to that thought I need help again because I'm just real Bad at this y'all uh I need to volunteer
Who wants to help me out Go buddy I'm gonna pick someone Ari Sure okay so let's do it hey so I'm Gonna type function And then I'm gonna write eight squared Eight typed out as capital Open and close parentheses Curly brace And then in the new line return Eight times eight Semicolon And then another curly race I just take my word for it that was Everything you said what you see here is Everything you said Um cool so is this it do we agree does This work Everyone agrees Um is there a problem here are we Sensing Patricia I think Patricia's Sensing a problem anyone else sensing a Problem with the way that we're writing Our code I'm seeing some nods I'm seeing Some hands up cool what principle are we Violating here Dry dry yes sorry Ryan you got usurped Yes the dry principle do not or don't Not Denari don't repeat yourself don't Repeat yourself yes we're violating that Principle Did you all hear that I have two cats and they're mad that I'm Not in bed right now
Um so yes These are doing the exact same thing we Are repeating ourselves it's the same Logic over and over and over again Whatever number we have we are just Multiplying it by itself uh Patricia are These functions useful Um They feel not very useful you're trying To be so kind we need to think of these Functions no they're not useful it's Just as easy for me to write this or This uh or this Right it's just for me to write those Things uh these are not useful functions So now Patricia you're off the hook how Can I fix this how can I fix this how Can I make this better Ryan Um we could write a new function called Uh function and just call it num squared And pass the function a parameter Called num And then have that function return num Times sorry multiplied by num And then when we pass an argument to That function it will return The argument squared Where we think you are Yeah yeah Ryan excellent job even though You forgot the semicolon um I guess I Can still pass it Uh no excellent job absolutely so what We can do is generalize the function I'm
Running the same logic here in all of These three so to fix it I just Generalize it now this takes in any Number and then multiplies that number By itself Uh So now we have a parameter we can give That parameter a value we that that Label will be multiplied by itself now I Can read you the big point is I can Reuse this logic wherever I want to I Don't have to rewrite it each and every Single time I can just pass this in And it will automatically return the Result for me so I'm not rewriting this I'm not using these same three lines of Code over and over and over again I'm Writing these three lines of code once And then with one line of code I'm Executing that same logic This is the purpose of functions we all Felt the pain of what life would be like Without functions we'd have to write That out each and every single time this Is what functions allow us to do Shannon Question Yeah that's my build on what you were Saying earlier about there can be Multiple ways to get the same result Could you do return num squared or num Raised to the power of two would that be The same Yeah something like that yeah Yeah yeah or there's also like a mass
Function like exponent times there's a Number of ways to do things Okay so We've still got the same yeah yeah yeah And people have opinions on that too you Wrote that that way I wrote it this way It does the same thing doesn't matter And sometimes it even makes your code Less efficient if you're if you're Really playing around with things give You the same result but if you have a Message for a loop or you're using this Function instead of doing it manually so There are ramifications here in this Case the super simple example not that Big a deal but it is something to be Cognizant of that's why this is so hard Software engineering is as much an art As it is a science because this stuff Does matter at Advanced levels But great questions y'all great Questions y'all are really on point you Made me think like you were a bunch of Uh very new folks but you're knocking Everything out of the park and asking Great questions so it's lovely to hear Stephanie Um since you mentioned it I know it's Not like completely um related to what We're talking about today but Um I know there's that segment on Recursion and I remember reading a lot Of people saying that you should avoid Recursion when possible because of the Memory sort of um demands that it makes
So is there like in sort of professional Programming nowadays like is there Certain situations where you do like you Should use recursion There are a ton of situations where you Should use recursion and I'll say you Should avoid naive recursion not all Recursion is bad naively written Recursion is is what's complicated and If you're curious about the hows and Whys of that hang out afterwards and uh We can chat about it okay okay thank you Great question Uh any others All right cool so we generalized a Function here let's start building our Way towards higher order functions we've Got the pieces in place for how this is Going to work now let's start looking at The value that it brings to Um to our code and that Journey starts Right here with this function Um Bianca I'm gonna ask you a question She's like oh no please don't maybe you Should not I don't know Just looking at this function the name Of this function before we even start Diagramming it out what do you think This function is going to do It's going to copy the array and Multiply each element by two oh my Goodness remember that time I said Naming things is really important when Ellie was doing a great job thinking
About how she wanted to name things this Is why without looking at any of this Logic right away I know what I'm trying To achieve here and that is gold for Professional engineering when you're a Professional engineer your time is money To companies so if I spend five minutes Trying to figure out what this is doing That's five wasted minutes as opposed to 30 seconds reading this title and Knowing what it's doing already That is time saved that is money saved That is five minutes working on a new Feature that's gonna make the next Jeff Bezos So keep that in mind when you're naming Things there really is an art to this Stuff uh great names make for readable Code make for professional code that's Not just function names that's variable Names too Um I was looking at a solution today and Someone had named a variable this in a Solution and I said I know you're Referring to money there but that is a Terrible variable name you should not Name something that Especially because if you're in Something like uh um jQuery that has a Very different meaning Um cool all right so now I need a Volunteer I won't make Bianca do it Unless she wants to volunteer but we're Going to diagram this bad boy out
I can start out and then someone can Jump in or you can just do it all you're Up Bianca take it away Jesus Christ okay Never mind Uh so First we're going to declare a function Labeled copy array multiplied by two In the global memory and assign a Function definition Uh copy all right and multiply I'm just Going to shorthand it uh save your eyes And give it a functionality great what's Next Um we're going to declare a constant my Array and assign it to the array one two Three uh in global memory Cool And then we'll declare a constant uh Result and assign it the evaluated Result of invoking copy array and Multiply by two with the argument my Array Oh my goodness that was quite the Sentence right y'all right y'all Amazingly well done what's the value Going to be while I'm waiting for that Evaluated result uh undefined undefined Sweet so talk me through it what's Happening next Um then we'll push copy array and Multiply by two with the argument my Array to the call stack and open a local Execution contacts contacts gotta help Us out there can't do that on your own
Open a local Airport Oh that was beautiful especially because It's so reluctant yeah notice the team Met your reluctance with passion that Was great thank you everyone Um and then we'll pass the threat of Execution into the local execution Context cool Um what's next then we'll pair our Argument my array with the parameter Array and assign it uh and yeah and Assign the value of my array to array And store in local memory Cool uh so The value at my array is going to be Stored under a new label array in local Memory do I have you correct yes cool Um And then I'm sorry I'm debating whether Or not I want to talk about primitive And reference types I'm not going to I Don't want to muddy the waters if you Have questions about primitive and Reference types hang out afterwards and Ask me that question Um okay what's next Um then we will Uh what is it now we're going to declare A constant output and assign it an empty Array in local memory Um Cool everyone tracking that now we're Inside this execution context so now We're evaluating the function code
Cool Um oh sorry go ahead you're on fire go Ahead uh and then we'll initiate a for Loop by opening another local execution Context or not question great question Not really it's blocked so it doesn't Have its own world right I can't access I out here but I can't access I inside The curling Rockets uh I've looked and I've looked and I've looked for how this Works under the hood and I've come up With NADA just so it all I know is that It's block scoped it has a little Execution context but it's not truly a Function so where is it saving the value Of I I really don't know so it's still Inside the same local execution yeah That's how we'll treat it but you're Right in that it is it does have its own Scope okay so I guess we'll initiate a For Loop Um and uh initialize I and assign it the Value zero Um And then we will uh what is it Enter the for Loop and then I don't know How to verbalize this part we'll push The uh push the array at index I uh Times two to Output Yes that's a great way to verbalize that Uh I forgot the condition we were Supposed to we're supposed to check to See if I met the con if we met the Condition I is less than the length of
The array cool and is it uh yes what is The length of the array three three how Do you know that because array is one Two three and there's only three spots There's three elements in the array yes This property on the uh array Um class will give you the total number Of elements in the array absolutely uh Is a for Loop new to anybody do we all Understand for loops It's okay if you don't Sweet okay uh and Bianca you are Absolutely right everything you said is Correct uh I did just want to write this Stuff out uh you didn't skip anything uh If This Were the immersive would have Been like you're on fire go ahead girl Uh all right so keep going Um you are right in that we are going to Take the array at element I multiply it By two and then pass that in as the Value to Output dot push but I do want To unpack it just a little bit so I'm Going to write our Array right I'm just gonna for easy ease Ease sake that's not a word I'm just Gonna put it here nice and mix it we can All see it and I'm also going to Target Um let it be known that we have some Indices here now everybody knows that Arrays are zero indexed Great So what elements Bianca are we accessing When we hit line four here uh we access
Element at index zero so one okay and What are we doing with it We're multiplying it by two And we're pushing it to Output at the Same index Or it doesn't matter it's the first spot Yes so we're going to get that result And then we're going to push that to our Output array which is here in local Memory That makes sense to everybody any Questions on that All right take it away what's next Um then we will increment I to one and Then we will check to see if we meet the Condition and I is still less than three So we enter the for loop again so we Then we would Push the value a little sorry we will Access the array at index one which is Two multiply it by two and push that Value to the output array Great Awesome uh what's next then we increment I again add to two and then we check to See if it meets the conditions it does So we will access the array at index two Which is three and we will multiply that By two which is four and push that to The output array one more time I'm sorry oh Wait what am I oh I don't know how to Multiply sorry Um excess uh index uh error the array at
Index two which is three multiplied by Two which is six and push that to the Output right uh you're in good company I Can't math either Multiplying the index not the value but Yes absolutely 100 right cool what's Next then we increment I to three and it No longer meets the condition so we exit The for Loop And we return output to result and store That in result In the global memory All right what's next then we pop Um copy array and multiply by two off The call stack and we Um Pass the thread of execution out of the Local memory and could And now the local execution context is Eligible for uh garbage collection Does is that the terminology yeah you Say it like you don't know but you do You're absolutely right Um cool what's next Um then we're done we're done amazing Work uh Bianca you acted like you didn't Want to do this because you were unsure Yeah you knocked it out of the park uh Such wonderful communication tonight uh Just a point of order when we are Invoking output.push here it does get Pushed onto the call stack but because We don't actually have access to that Source code where it's it's it's a
Fool's errand to try and diagram it out Uh but amazing stuff any questions on What uh Bianca just did Cool cool So What if now I wanted to copy an array And divide by two Who does this uh seem similar at all to Anybody Some nods some nods I'm not sure you're All convinced so let's feel this pain I Need to volunteer Everybody throws their hands up at once Um was that a hand was it how do I Pronounce your name Yes and it's not not cool Awesome I love it uh well take it away Uh okay so we think that Global memory You're gonna declare a function label is Copyright and divided by two and assign It to A function definition Love it What's next and then things we are not Involved involved in this function so We're gonna skip to I think that it lies Eight Nine declare uh nine okay where you're Gonna declare a costly with label my Array and assign it to an array with Value one two three Cool What's next after that you're going to
Declare a constant uh label name result And apply to the evaluated value of the Implication of the function copy array And divided by two Passing in the input my array And what's the value right now well I Wait for that evaluate the result Uh Well so because we are in What's the value of result well I'm Waiting for the evaluated results of Copyright divided by two Uh So I don't have them I look I need to Run this logic before I get this so JavaScript Yeah you're right I'm gonna do that with My array here but this is going to take Some time for me to evaluate this result And so JavaScript needs to put a value Here while it waits for this evaluated Result my question is what is this value This placeholder value that's going to Sit here Maybe someone I don't know what'd you Say I say Envy find you said exactly the Right thing 100 undefined oh my computer Doesn't know so yes it's going to put That value there undefined which is a Primitive falsy type absolutely Undefined I love it I love being like I don't know I'm just let me try to deduce my way to
The answer that's exactly it absolutely Okay what's next Well then we gonna open a new Uh not great work there you let us in Beautifully if it weren't for Ned I Think we'd have fallen off the cliff There so so y'all gotta Step It Up Ned's Running away with the game Um Sweet Uh let's make a little bigger local Memory All right What's next Um so they in the local memory you're Going to declare a consonant output and Apply it to an entry array Almost one step we're missing what's the First thing I want to do oh can I open a New contact I need to pair the parameter In the argument Cool so what's happening here the Parameter array to the argument my array Which is an array with value one two Three Foreign Context I have a placeholder here what Value is this placeholder going to have Let me look at what my function was Invoked with my array what the crap is That that's not a reserved keyword I'm Going to look in my nearest memory Because we're in the global execution Context at this point my nearest memory
My rate is a value there great I'm going To grab that array and plug it in local Memory with that address Uh awesome stuff not keep going Yes and next we're going to declare a Constant in output and apply to an entry Array Okay Okay and now we're going to initiate Your for Loop uh the first we initialize I equal to zero Since the array length is three very Less than three so we continue to go Inside the for loops uh so we think the For Loop we gonna push the result of Array index I divide by 2 the array Index 0 is 1 divided by 2 is 0.5 so We're gonna push 0.5 to the output array Cool I dig it everyone follow the work Sweet what's next Then we're gonna increase I by one so my I equal to one Foreign What's next Then continue we increase I by one again So now I equal to two 2 is still less than three so we Continue with the for Loop so now uh at Index two array at industry with three So three divided by two is one point Five so we're gonna push 1.5 into the Apple array What's next [Music]
Now we're going to increase the I one More time so I now equal to three Things Free is not less than three so now our Four Loop is done uh We're done with the for Loop So now we're gonna proceed to line six Where we're gonna return the airport to The global memory and gonna match it to The result variable in the global memory What's next Because we're done with the functions so Now this function copy array and divided By two is eligible for garbage Collection uh and we also pop this Function app because that Foreign I'll just say that we pop um copyright And divide by two off the call stack our Thread of execution Exits uh the the execute local execution Context and then that local execution Context becomes eligible for garbage Collection they all kind of happens at The same time but my brain disorders it That way because it makes the most sense Nothing you did was wrong there Um that's just max superimposed order if Any of you want to adopt it uh great Stuff okay what's next [Music] Yeah she and that's like Just ask that question and I was like Are we done yes absolutely you knocked
It out of the park congratulations I got A bunch of uh some Ringers in here Tonight you all are practiced hands Wonderful communication here every step Of the way everything I'm nudging you in The direction of is so nitpicky Um How many folks are intimidated by how Great the detective communication has Been tonight Cool all of you with your hands up you Should volunteer to go next because These folks all started somewhere uh and Trust me it's not a worry it's not a Worry that's what I'm here for right now You're all making my job so easy uh Great Okay cool so we've copied array And multiplied by two we've copied an Array and divided by two I think we're Fine in the groove how about we add Three I need to volunteer I need to Volunteer to walk through this again do I have one These functions look this Ryan's like oh Really Like look at Ryan's face everybody can You see it he's like uh no really you're Gonna make us do this again Why are we feeling this pain right Because the functions look the same In fact there's only one piece of the Code that's different every time we run This and that is right here the argument To push
All of this other logic Is exactly the same Have we encountered this problem before Remember When All of these functions were the exact Same We ran the same logic over and over and Over again how did we fix that We generalized the function we Generalized the function Can we do something similar Here Can I generalize this Set of instructions so that I'm not Breaking this rule this do not repeat Yourself rule how can I make this better How can I solve this and help ourselves Well yes we can generalize our functions The only thing different about our logic Was whatever we wanted to put in here so If I wanted to put in a different set of Steps a different way to Mo to Manipulate my array elements each and Every single time I could generalize That I could generalize that with a set Of instructions A function that then all I have to do is Invoke So Just in case I wasn't clear What Amanda what am I going to pass in this Is a parameter we always match our Parameters in our arguments what am I
Going to need to pass in here as an Argument to make this go A function in this case the function is Multiply by two It it should nail in the code absolutely Yes uh in this case multiply by two but In any case I could pass in anything if I wanted to turn all of these array Elements into Strings I could do that With a different function whatever set Of instructions I want to pass in here Are going to be used to manipulate my Array elements and I'm going to produce A new array full of those manipulated Elements that's the goal if anyone's Confused don't worry we are going to Walk through this so can I get a Volunteer Amend I was hoping it would be you Because you're like on the hot seat why Get off it when you're already killing It take it away what am I gonna do Are you talking all right because you Might have been muted and I wasn't Looking To declare a fun ction Called copy array That takes the Two parameters array and instructions And that's going to be saved in the Global memory As a what As the function definition nailed it Cool what's next
Uh and then you are going to Clear a function multiply by two Uh and function definition is saved and 2 multiplied by two in the global memory I dig it And then you are going to clear a Constant result In the global memory Um Which is the Return value of copy array and Manipulate with the arguments Uh an array And multiple two Okay yes uh what is the value of result Going to be while we're waiting for this Uh return value of copyright manipulate Undefined undefined cool so uh man is Exactly right so now we're going to Invoke copy array manipulate passing in The arguments of an array one two three And a set of instructions so what JavaScript is going to do It's going to obviously save this Constant in local and Global memory in This case it's going to know it's going To read copyright manipulate it's going To go huh what the crap is this oh it's A function definition great what's the Next character that I'm going to read It's a parenthesis which means I'm Invoking this function cool so whatever Comes in here is going to be a set of Arguments the first one is going to be
An array great the second one multiply By two huh what the crap is this I'm Going to go to my nearest memory I'm Going to find it and I find a function Definition and then afterwards I see a Closing parent so nothing so I am just Going to pass this in to my new context What's next Amanda Um So you're going to open up a new Execution Oh man like the conductor that she is The Maestro waving Us in uh expertly Done okay absolutely uh be quiet Matt And open the context All right what's next and then uh Copyright and manipulate also gets put Onto the call stack I love it love it Cool what's next and then we're going to Match the arguments to our parameters So array is going to be An array one two three And instructions is going to be the Function definition of multiply by 2. So the function definition I just got Uh dist by notability There we go Cool Everybody following what's happening There Any questions on what's happening there Cool I copied this function just know
That's not exactly what's happening I Did it to make things a little easier For us to understand this is actually The exact same function definition it's Not a copy I just now have two labels Pointing at the same function definition If you're curious about how that works Hang out afterwards and you can ask me Uh take it away man that what is going On We're declaring a constant by the name Of output Um Which is equal to an empty array Does this feel familiar at all Besides the part where I throw my pencil On the ground and discuss Cool right we've encountered this logic Before Go ahead what's next Then we're going to Enter a for Loop So we're going to initialize I To zero And then we're going to check if it's Less than the length of our array Um and since Zero In fact less than three we're going to Continue into the body Um and so We are going to Push the Result
Of Invoking instructions with the argument Of Array at the index I so in this case That's One Um And so we're going to put two because of The result of multiply by two uh and Push two into output you're absolutely Right but let's break it down go a Little slower keep a little more pain Here yes you picked the winner we are Going to do this each and every single Time so JavaScript is going to encounter This line output.push it's going to Encounter instructions what's JavaScript Going to do It's going to look for instructions And where's it going to look In the local memory does it find it Uh Yes cool right pardon my uh my Handwriting and my abbreviation yes it Does find it what is the value there of Instructions in local memory It's uh return input times two It's a function definition right So what's the next character so we have Instructions it's a function definition What's the next character JavaScript Sees Uh parentheses the paren and what does That mean JavaScript has to do
Uh Look inside Well whenever we have a function Definition followed by open and closing Print We have to invoke it which means we're Going to do what Oh we're gonna open up a new execution Absolutely so we're gonna in what Function definition are we actually Running here Yeah multiply by two that set of Instructions so I'm actually going to Write it as multiply by two when it gets Pushed onto the call stack over here So now we're we're getting deep here Y'all we have a couple of things going On so here's my multiply by two Context down here Okay now what happens next Okay so Let me start here where's our threat of Execution It's in Inside the Um multiply by two function yeah you can Always tell the threat of executions Working on the top stack frame so yeah Multi well maybe you can't tell because Of my atrocious handwriting but if I Could write like a human being you'd be Able to tell this was multiplied by two That's where our thread of execution is So what's step one whenever we open up a
New execution context so it's going to Match the parameters to the arguments Cool and so do that what are we going to End up with Um One as our input Right does everyone follow how we got There The argument is array at index I I is Zero so our value is one and we are Pushing that matching that with our Input and now what's next And we're going to 2 multiply by 2 over Turn Two Cool so yes I'm going to return input What's input I'm going to look at my Nearest memory My nearest memory says input is one I'm Going to multiply that by 2 I'm going to Return that value out and where do I Return that value Um You're going to push it to Output Eventually yes I'm going to return it Out into this execution context so a few Things we need to do now Multiply by 2 is going to get popped off The call stack our threat of execution Re-enters Re-enters copier and manipulate Multiply by 2 becomes eligible for Garbage collection And now we have a returned result in
Evaluated results in here which we were Never even really saving to memory now We have an argument for output.push Which is two and because we don't have The source code we're not going to dive Into it but know that it does end up on The call stack So 2 ends up here Question uh sorry Amanda take it away What's next Uh we're going to increment I by One So I is going to be one And then On the next line we're going to Open up a new uh almost what do we do After we increment I by One Oh Um we Check and see if it's less than our Array length cool is it Yes yes awesome cool now uh you're just So Advanced uh you want to like Jump Ahead to all the all this fun stuff uh Making you go step by step painfully Cool so you're right what's next now Now we open up a new execution execution Contacts Appreciate it I only heard two people do It so until the room does it I can't I Can't go on Oh my goodness the sloppier the better And that whoever that was at the end It's like execution context you're my Favorite you're absolutely
Uh cool so yes we're gonna open up that New execution context Um and what am I pushing on the call Stack Amanda Uh multiply by two Absolutely Cool and what are we gonna do now step One in here Uh we assign our arguments to our Parameters so input is going to be uh 2. To write I at index or sorry array index One is two so that's going to be our Value And then we're going to return two times Two Just four Cool so a bunch of stuff's gonna happen Now we are returning the value of 4 out Of this uh what are we going to do in The meantime Um it's going to be pushed into the Output array And then multiply by 2 is going to be Popped off for the calls back You all saw that right I was moving it And then jump right back notability Hates me uh yes this gets popped off the Call stack gone what's next Um and then it's eligible for garbage Collection it is eligible for garbage Collection along with all of my commas All right what's next Um and then we increment I by n so I is Now two
And then we check to see if I is less Than the length of our array which it is And then we go and we open up a new Way I appreciate you doing your best Um yes absolutely I'll choose the right shade of purple This time Uh sorry man if I saw your thunder there And put something on the call stack Without you telling me to You can beat me up later Cool okay what's next Um So we match our arguments to our Parameters so input is now going to be Three And then we're going to return three Times two which is six Um six is going to be pushed into our Output array And then multiply by 2 gets popped off The call stack And um The execution context is eligible for Garbage collection Fantastic Our thread is back in copyright Manipulate what's next and then we Increment I by One I is now three which Is not less than the length of our array So we exit the for Loop And we return output to our variable Result in the global memory
Gotta preserve the mess that I made Uh absolutely Cool what's next Uh that's it Almost a couple things I want to do First oh the I guess copy array manipulate gets Popped off the calls And it's execution context is eligible For garbage collection Oh my goodness what's next whoops Uh Now that's it now that's it absolutely We have beaten the final boss Bowser Spitting Fire throwing hammers we threw Him in the lava we're at Princess Peach We defeated the final boss you all Amazing stuff Amanda excellent work Everybody else amazing execution Contexts Any questions And anything you just saw Oh that might have been a martyr Reference I neither confirm nor deny yes Absolutely so we were able to generalize That small set of instructions uh big Question though how do we do that how Were we able to pass in this function Definition This function definition in as an Argument right How does it happen well in JavaScript Functions are objects they are first
Class objects which really just means You can do to them what you would any Other object in JavaScript which means You can assign it to variables you can Pass it in as an argument you can return It out of a function anything you can do With an object you can do with a Function functions in JavaScript are First class objects which means I can Bundle it up and ship it all over my Code as I see fit Uh Jim Since we're talking about side effects Won't that be a side effect since it's Coming from outside Ah I never said this was a pure function Remember about higher order functions Okay order functions yes Um multiply by two definitely a pure Function copyright and manipulate Debatable we could talk about this Because this is a pure function Can I rely on this to be a pure function As well Pure within pure I don't know it just depends it depends On what you pass in for instructions What it does great eye great call out There Uh cool So Now that it came up thank you yeah yeah No you're right now that it came up
Though we've been talking about callback Functions we've been talking about Higher order functions which is which Which is which here Many volunteers Jin just had your hand Up which one is my high order function Which one's my callback Um the high order function will be copy Array and manipulate And then Um I want to say the Um Uh the Callback Multiply by two Gen sounds incredibly confident in that Answer uh how do we feel do we agree on The fence disagree Most everybody agrees And I do too absolutely the higher order Function is a function that takes in a Function a callback is a function that Gets passed in to another function and Essentially gets called back right any Function I pass in To another function that's going to be a Callback a higher order function is any Function that takes in another function And that's it the concept really is that Simple it's a piece of vocabulary a Function that takes in another function Is a higher order function a function That's passed into another function is a Callback function easy peasy Um
So there's really nothing else to say There for anybody who is super Eagle-eyed out there and are really Parsing this logic you might know this As another name Array.map think about what a radon map Does you give it a function it puts all The elements of your array through that Function and returns an output array of Those modified elements That's the logic here this would be the Imperative version of array.map this is The declarative version of array.map so So map that method is a higher order Function whatever function you pass in To map into the argument array dot map Instructions This is the Callback And there's not much more to it than That this concept is powerful a lot of People use it not a lot of people really Understand what it is why it's there and How it works it makes for declarative Code readable code that professional Code you're going to use it in the code Smith interview quite a bit and it is The backbone of asynchronous JavaScript Without this concept that we explore Here tonight the web would not function So imperative for asynchronous JavaScript And knowing this concept is a great Thing whether you want to come to code Smith or whether you just want to didn't
Go around in your basement making all Kinds of amazing stuff any way you slice It this is a good thing to know and now You all do All right y'all thank you so much for Your time Gabe you look like a super Villain right now and I dig it uh have a Great night uh if you have any other Questions I'm honestly at the CSX slack You can reach out there if any of you Are interested in coming to Petrie I Hope you are I would love to work with All of you uh so please well actually What I'd love is for you all to reach Your goals so whatever those goals are If we can do anything to help you get There please let us know Um thank you so much everyone have a Lovely night [Music]
