A practical example of using closures in JavaScript When I was looking for a job as a web developer a while ago, I searched everywhere for a list of all the web agencies in Paris. I wanted to compare every one of them and crawled the web for a detailed and exhaustive list that I never found. So I saw no other solution than to make it myself. I started wondering where those agencies could be referenced and accessed easily on the web, without getting lost in the 5+ million results of a search. google Googles Places is a good way of finding businesses by keywords in any given area I realized that almost every web agency was referenced as a Place on Google Maps. And guess what ? , and more specifically , allows you to do all sorts of amazing things, including searching for places with a keywords filter, and fetching the place’s name, along with its corresponding website urls, photos and user ratings. Google Maps API Google Places API If I could find a way to fetch as many results as possible for the Paris area using Google Places, a great part of the job would be automatically done, and save me a valuable amount of time. I managed to get up to for the Paris area, which I know for a fact is not the total number of web agencies (some of them are not registered on Google Places, others simply don’t appear in the results for unknown reasons), but allowed me to find some interesting results I wouldn’t have found otherwise. This is what it looks like : Spoiler : 186 results The map: Web agencies in Paris The list (abridged): Data fetched from Google Places seemed to have everything I needed for my purposes : once a search has been made and results are returned, the allows you to fetch the name, website url, photos and rating of each Place. I would have liked to be able to evaluate the size of each agency by number of employees, but hey. Google Places API Place Details request Initiating the search I set up a project on localhost (I would need to use PHP later to write the results in a file), and followed the API documentation to initiate the map (get it ) and make a Radar Search request (get it ) : JavaScript here here A Text Search or a Nearby Search request would let you access directly the response parameters you need, but with one major restriction : they will return a maximum of 20 results per query. Each search can return as many as 60 results, split across three pages, which means that you can call a data and get a , but then you are stuck. next_page_token grand total of 60 results Getting around the 60 results query limit The request lets you search for up to , but with less detail than is typically returned from a Text Search or Nearby Search request. You basically get and ID for each place, but not much more details about it, not even a name. Radar Search 200 places at a time This means that you will have to iterate through your results to call the by passing the ID of each of the Places you found. The Place Details request is where all the parameters we look for are returned. Place Details request This will take place in the callback of our function: service.radarSearch This works… partially. I by looping through the results although the total number is 186. Why is that ? only get 10 detailed results Getting around the 10 queries per second limit : and closures setTimeout Well, the problem with the Place Details request is that it lets you query . The execution of the code takes way less than one second, so it seems that we hit a wall here, doesn’t it ? only 10 results per second What if we used the function to query one result per second, therefore never reaching the limit of 10 results per second ? setTimeout The setTimeout function used inside a for loop is . a well-documented case of unexpected behaviour in JavaScript This is where , allowing us to store every value found throughout our 186 results and storing each of them in the array for later use: the will be of great help closure agencies In the end, the full JavaScript code snippet is : I can now use it to fetch the results I want and use the data, and the result is pretty fun to watch : Fetching one result / second Of course this would not work for a real-time application, but for the purpose of fetching some data about specific places I wanted to find, this worked like a charm :) Want to learn more about the basics of JavaScript? Check out my other articles: Hoisting in JavaScript: a Quick Guide Understand JavaScript Variable Scope with ease Get your head around “this” How to use JavaScript closures with confidence Grasp “By Value” and “By Reference” in JavaScript I hope you enjoyed this article, feel free to comment and like this article so that others can find it easily on Medium !
