Opening the Door on Closures

Please read my previous post “Let’s Talk About Scopes Baby…” before you continue on as a proper understanding of Scopes is necessary to grasp the beauty of the closure.

Time to tackle Closures, an extremely useful tool when it comes to programming in JavaScript. Their usability varies depending on who you are and you’re personal preference when it comes to coding, but they do help when it comes to the readability and styling of your code which are VERY important factors to be considered.

Closures are functions that consist of a function within a function, so an outer function and an inner function. Below is a basic example of a closure function:

Screen Shot 2016-03-12 at 9.00.55 PM (1)

Below is what is printed to the console:

Screen Shot 2016-03-12 at 9.00.55 PM

Notice how

 console.log(innerCall);  

simply logs

 [Function] 

to the console. If I call the .toString() method on innerCall this is what is logged :

 

Screen Shot 2016-03-12 at 9.31.40 PM

Essentially the variable innerCall now contains the function that was returned from the outerFunc function, making it invocable. The cool thing is that the variables from outeFunc are still available to innerCall so when it is invoked it has access to it’s own variable and can access the outer functions variables by reference. Below is an example of how this could come in handy :

Screen Shot 2016-03-12 at 10.18.53 PM

Pretty straight forward right? I hope this has shed some light on closures and their uses, if you have any questions feel free to comment.

 

Let’s talk about Scopes Baby…

Scopes are one of the most important concepts you can learn in the Javascript language, or any language to be honest. If you find that your Javascript functions aren’t working the way you would like them to there is a strong possibility the culprit is your scoping.

So what is a Scope?

A scope has to do with where functions and variables are accessible within the program that is being executed. I’m going to tackle the two most import types of scopes that will aid in proper functional Javascript programming with a third more advanced concept to follow in a future post.

Global Scope

The Global scope is the main window or window object, any variable or function that is declared within the global scope is accessible anyplace in your code. For example, think of the global scope as a fish tank, within the fish tank there is a castle (function) and two fish (variables). You as a human can access anything within the fish tank and manipulate it however you please.

Local Scope

Now that we have an understanding of global scope we can now apply the same logic to the local scope. The keyword is ‘Local’ which means the lexical environment has been scaled down, so instead of the javascript engine looking at the lexical environment of the window it more concerned with what is contained within a function. Going back to the fish tank example from before, the castle (function) within the fish tank has its own environment that cannot be seen by anything OUTSIDE the castle. Now the fish can swim inside the castle or swim outside the castle but anything that is SPECIFICALLY within cannot leave the environment.

Below is code snippet that ties my fish tank example and code together.

Screen Shot 2016-03-02 at 12.09.56 AM.jpg

Keep in mind you cannot see the window object (fish tank) but it’s there.

Now there is one more Scope that is a little more involved when it comes to it’s understanding and that is the infamous Closure Scope. I will be covering this concept more in depth in another post, just to make sure I get to all the ins and outs of the subject.

If you have any questions about this specific example please feel free to contact me or leave a comment.

 

Let the journey begin..

I’m Dion and today I officially have thirteen days before I step foot into Telegraph Academy ! My emotions are pretty much all over the place, for the past year I’ve made it my goal to gain an understanding of Javascript, Html, and CSS that would allow me to pass Telegraph Academy’s technical interview, and  I must say it paid off. Though I will be attending the upcoming cohort I would be lying if I didn’t say that imposter syndrome is very much a reality but I’m determined to not let it get the best of me as I’ve come entirely too far to do so. This blog will serve as a tool to solidify what I’ve learned so far and exhibit new concepts I find interesting, I want to be able to look back at the end of this program and see how far my thought process has come in addition to my skills…Let the journey begin!