Javascript Closure tutorial ( Closures Explained )

today we are going to learn about closures in JavaScript guys there are so many complicated tutorials out there in closure it's unbelievable why do people put complicated examples so here it is I'm creating something very simple something that you can understand something very simple and clear I'll bet you'll know the fundamental of closures in JavaScript by end of this tutorial usually when you create a function in most programming languages either you pass some parameters or you define some inner variables so if you look at this example here I have a function name add two I'm passing this parameter passed I have in a variable with value two and I'm returning past plus inner so in this case if I say add 2-3 mins it would add three plus two and it would return me five it's a very simple function that adds whatever number you passed it adds two to it and returns the value so if I run this example let's see if I click on a run here I'm using jsfiddle for it as you can see it the value is five but in JavaScript you can get by without passing any variables now you wonder how haben if you're not passing it then how do you get the value well you can define this variable outside like var past equal to three and I don't really have to do this I can just add two and if I run this let me clear this if I run this I do I get the same answer now you're wondering where is the closure in here I'm going to get to it there's this is a closure it doesn't look like it but it is a closure so I want to give you a very simple example of how close your work and I mind and then I'll give you another example how to use it in JavaScript variables are defined outside the function are automatically available inside because JavaScript uses something called lexical scoping means inner variable inner is not a accessible outside but anything that is defined outside is automatically available inside the function but how does it really do it the answer is closure I went to interview once and the guy asked me to give me an example of flow sure and I did this and he said no this is not closure and I did something following and I showed him how this is a closure he was expecting the answer he was expecting the answer to be inner function yes inner functions also when you pass it around it there also closure which we'll look at next but this is also closer this is a simple simplest closure technically any very any function where you don't were you using a variable from outside the scope are actually closures instead of running this function if I just want to look at the function up because functions are also objects in JavaScript so if I just want to look at it how it looks like I can say dir I don't have to execute execute this this will let me know inside of the object so if I clear this first and if I run this I would get this function add to now I'm going to open this a little bit and I'm going to expand this phone expand this here and if I if I expand this function scope now I'm using Chrome browser so if you're using Firefox it might be a little bit different but so for this example I would suggest to use Chrome and not a I don't work for Google or I'm not promoting the product but I think the chrome is really great for program so if I expand this function scope I would see something called closure here and if I expand the closure I would see that variable passed as a property and the value of that property is 3 so this is how the function add to using variable that is defined outside the function inside the function using the closure it's not a magic this is a very simple example so in order to execute add to function it will look through the variable it needs passed is not defined inside the function so what it will do it will look at the scope outside the function it cannot find it it would keep going further until it finds it if it cannot find it then it will be undefined but if you'd find at any point then it would add it to it now if I do something interesting if I change this variable passed here to let's say 4 I'm going to clear this and I'm going to run this again so before the definition it was 3 now it's 4 and when I console.log it what should I see let's look at it if I look at the closure it's for right now so that means if I run let me clear this and I'm going to win a console log here at 2 and I'm going to read on this here so initially it's 3 so it's going to print 3 here and Skinner print 4 it's going to print 3 plus 2 which is 5 and it's going to print here 4 plus let's look at another example a better example flo-jo this is a very simple example but we're going to look at a little bit by the way I'm going to save this example here in the jsfiddle so you can play around with it if you can if you can go to this URL and you will see the exact example and you can play around so let's look at this example it's it's similar to previous example but it's brick it's broken down into two functions one outer function which is add to and within this function I have another function called add as you can see the first function I have a variable passed and another function the inner function I have a variable called inner which is also passed but for for add to this is still inner so that's why I'm calling it inner and what ad does is passing it what ad does is it takes the past variable and it adds it to the inner variable and returns returns so this function returns pass plus inner and the add two function returns the add function itself so let's understand clearly within this add two function if you have a function that returns a value and add to return to function itself so if I do this if I do add to and if I pass somewhere past value let's say if I say a 3 what do you think it does it takes this past and then pass it here so it will return this function add what past value as 3 inner is still not defined so if I just console dir I would see it if i do this and run days i would see a function return and within this function if you look closely it has a closure so it preserved this three value and inside so I can use it like this now just pay attention to this I can actually create another variable called variable add 3 equal to MU add 2 3 based on these three I created this variable add 3 I can actually create another variable called add 4 and I would pass here for if I do the consult of dir for add 3 and add 4 and add 3 I would see closure that is 3 and an ad for I would see closure which is 4 so I have 2 functions now add 3 and add 4 now I can simply let me calm let me now all I have to pass is an inner so if I pass console dot log add 3 1 and console dot log add 4 1 what is going to do as you expected it would the first function would add three to one and the second function would call four to one and if I run this as expected I'm getting four and five this means i can create unlimited number number amount of functions i can create add ten at 200 as many as function as i can using closure it keeps the variable it needed to execute which is three in the first X in add three and four in add four it preserves this valuable inside the function as a prop as a property closure and then when you execute add three it uses it uses that closure to do the calculation closures are nothing but function with preserved data that's how I call it I know in JavaScript even the simple things are confusing but I think you cannot go to simpler than this at least that's what I believe so hopefully you learn something from it and don't forget to subscribe and like the video thank you if you want to play around if you want to play around with it please open this URL and you can mess with this tutorial if you like this tutorial please subscribe to my channel like the video and provide constructive comment and if you have a question regarding anything that I've covered in this tutorial please feel free to actually email me or provide a comment and if there is any topic that you would like to be covered then just email me and I will be able to provide a tutorial on that topic within a week or two

Channel: techsith

Views: 497,406

Rating: 4.8447275 out of 5

Keywords: JavaScript (Programming Language), Closure, Software (Industry), Tutorial (Media Genre), Scope, angular, advanced javascript, tutorial, lessons, techsith, techsithtutes, javascript closure, tuts, Web Development (Interest), front end programming, programming tutorial

Id: 71AtaJpJHw0

Length: 12min 51sec (771 seconds)

Published: Wed Nov 18 2015