Press "Enter" to skip to content

Closures – Part 5 of Functional Programming in JavaScript


hello you whippersnappers what are we

talking about today

I’ll let to be excuses speak for that

just finish the last video enjoy your

vacation why thank you I did very much

observe my slightly more tan face and

since you’re asking for suggestions

how about closures to be us losers it is

in case you’re a noob you are dropping

by this is a series where we learn

functional programming using javascript

you can watch the other episodes in this

series by clicking there so what are

closures in JavaScript functions are not

just functions they are also closures

what that means is that the function

body has access to variables that are

defined outside the function let me show

you have a look at this code we are

assigning a variable here I called me

and we’re assigning in the value Bruce

Wayne and we’re then learning function

or greet me which console logs hello me

exclamation mark and then we call read

function here let’s run that hello Bruce

way notice that we are not passing in an

argument here we’re just calling it

without any arguments we are directly

referring to the me that is assigned

outside of the function scope the reason

that we can do this is that JavaScript

functions like Whitney or closures we

cannot do this in languages that does

not have support for closures in the

language without support for closures we

would have to pass the name

and argument the function instead

because such a language does not have

access to the the outer scope of itself

like that let me go back to the original

I really like to stress here that greet

me does really have access to the outer

variable scope it does not snapshot the

value of me at the time it is declared

for instance if I reassign me to be

Batman here and run it it will say hello

Batman so greet me does not copy the

value of me it actually reads whatever

the variable is at that time from the

outer scope and it will do this even if

greet me was and a synchronous function

being called from I’ll say an AJAX call

back or something like that greet me

will remember this outer context that

it’s declaring even if greet me is

called from a completely different part

of the application or a different module

it will still refer to this specific

context you all being healthy skeptics

you’re probably now asking yourself why

is this useful what is the point of

closures closures actually have quite a

bit of use cases but I’m going to give

you one that I think illustrates why

closures are useful let’s look at this

function together it’s called send

requests and we start by assigning a

request ID to a variable we then use

just a yin stand a jQuery AJAX function

we call an Earl and when that is

successful we alert the string request

request ID protect I’m not gonna run

this I’m gonna let your imaginations

execute it but what will happen is that

since all functions in JavaScript or

closures including the callback to

it will have access to the request ID

that we flared even though this callback

is executed way later this really

illustrates a good use of closures it’s

when you start a task and you want to

specify something that happens when that

task is done with stuff that is

available to you when you start the task

closures makes that easy and readable in

a language that does not support

closures you would probably have to have

some kind of data object that you passed

into the Ajax function which it in turn

passed into success and if it didn’t

have that you would probably have to

create some kind of request objects with

properties and stuff instead of just

simply doing function this kind of thing

becomes sort of a key if you don’t have

closures we have talked a bit about what

closures are I have showed you a

practical example of why they are a good

thing but closures is one of those

things in JavaScript that this permeates

the entire language there are more use

cases than the one I showed you more

than will fit into this video or even a

second one closures is just one of those

things that you have to use a lot on

your own in your code for you to really

internalize it

however Mozilla having just writes

JavaScript documentation overall has a

super super good page on closures on

their side and I have linked it down in

the show notes you should go there and

check those examples out and start using

closures in your code to get a feel for

it and that is it for today as usual I’d

love to hear from you

either down below or at mpj me on

twitter

tell me what you thought about this

episode or ask me a random question or

maybe tell me what you think that the

next episode Monday should be about and

speaking of that episode make sure you

don’t miss it

subscribe by clicking my face in the

corner until next Monday stay curious and subscribe

Please follow and like us: