No, I don't know what closures are...yet
Tags: javascript
Published: 2017-12-15 12:02:32

---
title: No, I don't know what closures are...yet
published: true
description: closing in on closures
tags: javascript
---
I want share an interesting lesson I learned on closures. The journey to this lesson all started when I commented on a PR and the author of the PR said he added the extra `()` to a function `this.handleToggle` as the function was a closure. This scratched my brain for a while. I mean, I knew what closures were or at least an idea of it. I decided to write it down in my note book as I would come back to it later. I then remembered a friend of mine recommended I start [here](https://github.com/getify/You-Dont-Know-JS) when looking into js. I quickly went to this github repo and looked for the chapter on closures. The text book definition I thought I would find was not there. However, Kyle Simpson used examples and explained "to me like I am 5" I grasped the concept.

An interesting code snippet that baffled me though was this

```javascript
for (var i=1; i<=5; i++) {
    setTimeout(() => {
	    console.log( i );
    }, 100 );
}
```
which you might think prints out 
```console
1
2
3
4
5
```
This actually prints out 6 five times on the console. Try it out. Weird ? Not really. I simply wanted to see the above output. I played around with it and still got 6 five times on the console. Why did not continue reading is because I thought I knew that what I read at first was enough to try out the loop example without reading further. I even added a 0 to have to timeout not have any delay. No luck! I continued reading Kyle Simpsons book and found out he had a solution to this. It turns out what I (and many developers may have done) was trying to 

` imply that each iteration of the loop "captures" its own copy of i, at the time of the iteration. But, the way scope works, all 5 of those functions, though they are defined separately in each loop iteration, all are closed over the same shared global scope, which has, in fact, only one i in it.
`

Kyle Simpson provided a solution by either using an IIFE or the ES6 sibling of `var`, `let`.

using an IIFE
```javascript
for (var i=1; i<=5; i++) {
	(function(j){
		setTimeout(() => {
			console.log( j );
		}, j );
	})( i );
}
```

using `let`
```javascript
for (let i=1; i<=5; i++) {
    setTimeout(() => {
	    console.log( i );
    }, 100 );
}
```

I approached a senior dev and he explained the same issue only that emphasized how dangerous `var` can be. `var` was hoisting the value of i and therefore the the value of 6 is always printed. What I forgot ask is this. For the first code snippet, is the whole loop running such that var does get to 6 and then run all the `setTimeouts` later and then display 6 as the value of i ?


Finally what closures are:

Those who like to hook onto a definition, I did a little digging and a post by Eric Elliot who explains it well [here](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36).

Eric Elliot
`
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. 
`

I got access to one of Kyle Simpson videos and he explains as follows

`A closure is when a function 'remembers' its lexical scope even when that function is executed well outside it the lexical scope.`

I hope they make sense and I encourage you to read up more on 
["You Don't Know Js, Closures"](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md)
[Master the JavaScript Interview: What is a Closure?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)