2d:null 2e:["$","title",null,{"children":"Closure | fredericrous | Observable"}] 33:T4a9,md`# Closure Closure is a lexical context that has bound variables. Another way to define it; A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment) ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)) A more graphical way to define it; Closure is an inner function, that's accessible outside of its outer function's scope, with its connection to the outer function's variables still intact. Basically it's just a function that returns a function. The function returned has still access to the variables from the first function. This feature is heavily used by functionnal programmers. It is also at the core of the module pattern that nodejs implements with the good old *exports* keyword To understand Closure, it's best to begin by understanding Scope, I made a notebook about this [https://observablehq.com/@fredericrous/scope](https://observablehq.com/@fredericrous/scope), if you are confortable with Scope, let's continue with examples. ## Practicing with an example Let's experiment with some data we already know 🍕. We'll declare *pizza*, an Array cut in 6 slices 🍕.`34:T77e,html` Follow @fredericrous`35:[] 31:{"id":"ffca687e935cbed2","slug":"closure","title":"Closure","thumbnail":"9d39af761264117499c57434ef6a37d8ea24d477a03cb097e23266fa931f9af3","access_level":"public","create_time":"$D2020-03-11T17:12:38.030Z","update_time":"$D2021-01-13T11:29:28.777Z","view_time":null,"first_public_time":"$D2020-03-12T12:00:36.923Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"631be40688c47bfe","login":"fredericrous","name":"fredericrous","avatar_url":"https://avatars-next.observableusercontent.com/d0824bddc6a0c11c498f8f7a64e4cdd70e766ad16b980097975fc4f32a9a41c3","tier":"starter_2024"},"version":161,"publish_version":161,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3521d10409c706a","login":"fredericrous","name":"fredericrous","avatar_url":"https://avatars-next.observableusercontent.com/d0824bddc6a0c11c498f8f7a64e4cdd70e766ad16b980097975fc4f32a9a41c3","tier":null}],"members":[{"type":"individual","id":"c3521d10409c706a","login":"fredericrous","name":"fredericrous","avatar_url":"https://avatars-next.observableusercontent.com/d0824bddc6a0c11c498f8f7a64e4cdd70e766ad16b980097975fc4f32a9a41c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Closure","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"pizza = Array(6).fill('🍕')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`Let's declare the function *freshPizza* that will return a function.\n\nWhen evaluated, the *freshPizza* function assigns, to the *slices* variable, a shallow copy of the *pizza* array. It then returns a function expression. This later function, when called, removes a slice 🍕 from the *slices* array it kept reference to and then returns the number of slices left.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"freshPizza = function() {\n // private field\n let slices = pizza.slice()\n return function() {\n if (slices.length)\n slices.pop()\n return slices\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`Let's call *freshPizza* function a first time, assign it to variable *eatSlice*.\n\n*eatSlice* is now a function that the first time it's called returns 5 slices 🍕 of *pizza*, the second time it is called 4 slices 🍕, then 3, 2, 1 and 0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"eatSlice = {\n const eatSlice = freshPizza()\n const pizzaLeft = eatSlice()\n expect(pizzaLeft.length).to.equal(5)\n return eatSlice\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`In the above example, eatSlice was called one time, there are therefore 5 slices 🍕 left. In the bellow example, we call eatSlice again leaving the number of slices in *pizza* array to 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"{\n const pizzaLeft = eatSlice()\n expect(pizzaLeft.length).to.equal(4)\n return pizzaLeft\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`If we call eatSlice again, there should only be 3 slices left. However code executes in concurency and not in order on observablehq, so I won't call it more on this notebook but try it yourself!\n\nTo go further, I made a codepen using mocha at . It uses fruits instead of pizzas, it's healthier, you'll see.\n\nFor other readings, follow me on Twitter!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## References\n\nClosure definition on MDN - \n\nArray Slice method reference on MDN - \n\nShallow Copy definition on Wikipedia - \n\nFunction Expression definition on MDN - \n\nSope and Closures on You don't know JS *Get Started* - https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch4.md#pillar-1-scope-and-closure- \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"expect = {\n const chai = await require('https://bundle.run/chai@4.2.0') \n return chai.expect\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"success = () => {\n return html `✓ success`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"