Making sense of Closures using functions and Leaflet.js

Closures can be difficult to grasp and they are not an easy concept to understand. There are certain levels of understanding in coding and Closures should be ranked as an advanced topic. There will come a time in your coding career where you will be asked what are Closures? How are they useful for coding applications? For these moments, this tutorial will walk you through understanding Closures, with the help of functions and leaflet.js.

There will be a moment when you want to create a more advanced function. These types of functions could return something that is valuable or try to grab another variable that is outside of the lexical scope. In this type of a situation, Closures could be useful.

To start off, let’s begin with a simple example

It’s confusing, why can we print the words “Harrison and Alastair are from Toronto.”, from the tellLocation function even though the variable whereWeAmFrom comes from within the setLocation function. As long as variables are instantiated from the same scope, then we will have access to them in other areas of our code. This is premise of Closures.

To dive into our code in the sequence that they are executed, the two location functions are being called in the global scope. Also, the variables name1, name2 and whereWeAmFrom are declared in the global scope. In the setLocation function we are assigning the variable whereWeAmFrom to the value of when printName is run, with the parameters of “Harrison”, “Alastair” and “Toronto”. The tellLocation function logs “Harrison and Alastair are from Toronto.”

This example makes use of the global scope to understand Closures. The variables that are declared globally are accessible because they are global variables. Since the functions are also declared globally, this means that the functions and variables are declared within the same scope. Looking at the function tellLocation, we can have access to the variable whereWeAreFrom, which has been changed within setLocation and can log the sentence “Harrison and Alastair are from Toronto.”. Normally, this wouldn’t make sense since whereWeAreFrom is set to an empty string in the global scope. However, Closures give us access to the whereWeAreFrom variable since it was declared globally along with tellLocation and setLocation. This is the premise of Closures, we can gain access to multiple variables that are declared within the same scope.

I wanted to briefly show that example before delving into Closures with functions and Leaflet.js. The following example was some code that I was working through for a student during a coding boot camp. The situation that we were facing was how to access a coordinate from one function that is mutated, in a different function. It was a difficult problem and one that I am sure will be encountered regardless of your level of coding. In this example, we have two global variables, coordinates and getMap. We also have functions getLocation, giveMap, giveLoc, showPosition and zoomTo. The issue in our code was that showPosition was given coordinates which we needed to use in the zoomTo function. Facing this problem, I remembered that returning values from a function was useful. I used this to get the coordinates and the map from the showPosition function and then set the values to the global variables. This allowed zoomTo to use the coordinates and map because they were accessible globally, even though they were being mutated and changed within the showPosition function.

I was surprised and overjoyed that I had fallen upon the semblance of a solution to the problem, yet I did not fully understand why it worked. That was when I started to look into Closures, which is why I started to write this article.

I hope that the article made sense and was useful to you. Thanks!