2d:null 2e:["$","title",null,{"children":"Scope | fredericrous | Observable"}] 33:T655,html` `34:T47b,{ const baking = new Set() function bake(value, elem) { // ba baking.add(value) const className = 'moveToResult' if (elem.classList.contains(className)) return // afterAnimation is just a function to animate the addings of ingredients with a nice movement. // the function is declared at the bottom of this notebook const afterAnimation = animate({ elem, className, destination: '#result_issue'}) // innerHTML gets setted only when there are 3 different items in the Set afterAnimation(() => baking.size === 3 && (document.getElementById('result_issue').innerHTML = '🍕'), /* --animation-delay */ 1.8) } function setupBakery() { const ingredientsArray = Object.entries(ingredients_issue) for (var [id, value] of ingredientsArray) { document.getElementById(id).onclick = function(event) { // item is scoped to setupBakery lexical environment // var id and var value where hoisted and are declared before the for loop // therefore value is always equal to "undefined" bake(value, event.target) } } } setupBakery() return success() }35:T427,{ const baking = new Set() function bake(value, elem) { baking.add(value) const className = 'moveToResult' if (elem.classList.contains(className)) return const afterAnimation = animate({ elem, value, className, destination: '#result'}) afterAnimation(() => baking.size === 3 && (document.getElementById('result').innerHTML = '🍕'), /* --animation-delay */ 1.8) } // The below arrow function can be expanded to // function pressButton(value) { // return function (event) { // bake(value, event.target) // } // } const pressButton = value => event => bake(value, event.target) function setupBakery() { const ingredientsArray = Object.entries(ingredients) for (var [id, value] of ingredientsArray) { document.getElementById(id).onclick = pressButton(value) } } setupBakery() // click all the buttons //ingredients.forEach(x => document.getElementById(x.id).click()) // this throws //expect(document.getElementById('result').innerHTML).to.equal('🍕') return success() }36:T77e,html` Follow @fredericrous`37:[] 31:{"id":"bd0d6751fcdb646d","slug":"scope","title":"Scope","thumbnail":"21683c6bb23588cba68e7f24c110cd62296569b4baaa2000c6e361c14f56cebc","access_level":"public","create_time":"$D2020-03-11T10:35:17.388Z","update_time":"$D2020-03-29T21:56:44.105Z","view_time":null,"first_public_time":"$D2020-03-12T10:52:43.115Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"631be40688c47bfe","login":"fredericrous","name":"fredericrous","avatar_url":"https://avatars-next.observableusercontent.com/d0824bddc6a0c11c498f8f7a64e4cdd70e766ad16b980097975fc4f32a9a41c3","tier":"starter_2024"},"version":349,"publish_version":349,"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":0,"collection":null,"type":"notebook","body":{"title":"Scope","cells":[{"id":0,"value":"md`# Scope\n\nA Scope is the current context of execution.\nIt is the context in which values and expressions are \"visible\" or can be referenced. ([MDN](https://developer.mozilla.org/en-US/docs/Glossary/Scope))\n\nDepending on how a variable is declared with *var*, *let*, *const*, the scope behaves differently.\nLots of common mistakes can be avoided by not using *var* and privileging only *let* and *const*. Eslint has rules to enforce that _(link at the botom of this page)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Block statement\n\nIf you play around with block scopes on this document, you will notice Javascript, and especially the *scope* behaves slightly differently on observablehq. See [how observables work](https://observablehq.com/@observablehq/how-observable-runs) or this other article of [Introduction to Code](https://observablehq.com/@observablehq/introduction-to-code) on Observable notebooks.\n\nA block scope is made using curly braces *{* .. *}*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n const pizza = 'pepperoni'\n // this is a block scope\n {\n // I can define a const with the same name\n const pizza = '🍕'\n expect(pizza).to.equal('🍕')\n }\n // the block did not affect the upper variable\n expect(pizza).to.not.equal('🍕')\n // pizza is unchanged\n expect(pizza).to.equal('pepperoni')\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`actually on observablehq, javascript can either be executed and returned into a variable name, or executed in a block scope, as we did above.\n\nThe block statement work with *const* and *let* variables, not with var. Have a look at the Block statement reference on Mdn .`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`## If statements\n\nlike the block statement, we can define *let* and *const* variables with identical names inside if else statements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n const pizza = 'pepperoni'\n \n // for fun lets enter in either block randomly\n if (Math.random() < 0.5) {\n const pizza = '🍕'\n expect(pizza).to.equal('🍕')\n } else {\n const pizza = 'calzone';\n expect(pizza).to.not.equal('🍕')\n }\n \n expect(pizza).to.equal('pepperoni')\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## Loop statements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"{\n const pizza = 'pepperoni'\n for (let i = 0; i < 2; i++) {\n let pizza = '🍕'\n }\n expect(pizza).to.equal('pepperoni')\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`## Function scope\n\nWe saw with the scope that a variable can be redeclared with *let*. It is *shadowed*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"{\n let pizza = 'pepperoni'\n function bake() {\n let pizza = '🍕'\n }\n bake()\n expect(pizza).to.equal('pepperoni')\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`If a variable is declared globally. It can be accessed directly within a function. It can even be reassigned`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"{\n let pizza = 'pepperoni'\n function bake() {\n expect(pizza).to.equal('pepperoni')\n pizza = '🍕'\n }\n bake()\n expect(pizza).to.equal('🍕')\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`This is the same behavior for every scope we saw`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"{\n let pizza = 'pepperoni'\n {\n pizza = '🍕'\n }\n expect(pizza).to.equal('🍕')\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`## A Real World Example\n\nLet's get too a real world example where mastering the scope is important. Actually it is the same example but with different flavors\n\nEach example will have three buttons (🥣), (🍅), (🧀). When all buttons are clicked, it bakes a pizza 🍕!\n\nLet's create a css stylesheet first to make our buttons pretty`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`Let's declare the list of our ingredients`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"ingredients_issue = ({\n bowl_issue: '🥣',\n tomato_issue: '🍅',\n cheeze_issue: '🧀'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`Bellow is our interactive html. Click on an ingredient, it gets added to the question mark. However when all buttons are clicked it does not convert to a pizza as it should`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"html`\n

🥣

🍅

🧀

❓

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`### Solution 1\n\nThere are many possibilities to address the above error, the first is to use *let* instead of *var* in the for loop\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"{\n const ingredientsArray = Object.entries(ingredients_issue)\n for (let [id, value] of ingredientsArray) {\n // ... \n }\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md`### Solution 2\n\nAn even better alternative could be not to use for at all but foreach instead.\n\n*ingredientsArray.forEach(([id, value]) => {})*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"{\n const ingredientsArray = Object.entries(ingredients)\n ingredientsArray.forEach(([id, value]) => {\n // ...\n })\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`### Solution 3\n\nAnother solution to this problem is to use closures.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"ingredients = ({\n bowl: '🥣',\n tomato: '🍅',\n cheeze: '🧀'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"html`\n

🥣

🍅

🧀

❓

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"md`The **pressButton** function returns a function. Because we execute pressButton when we pass it a value, the new function that is returned is assigned to onClick. This new function has its variable *value* frozen. It does not change when the for loop iterates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`## Closures\n\nNow you have a first glance of what scopes are about, read some of the References I linked.\n\nTo go further have a look at my notebook on Closures or follow me on Twitter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## References\n\n__Scope definition on MDN__ \n\n__MDN - Variable Declarations__ - \n\n__You Don't Know JS Yet: Scope & Closures__ - *Chapter 5: The (Not So) Secret Lifecycle of Variables* - https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch5.md\n\n__ESLint Documentation__ - *require let or const instead of var (no-var)* - https://eslint.org/docs/rules/no-var\n__ESLint Documentation__ - *Suggest using const (prefer-const)* - https://eslint.org/docs/rules/prefer-const`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`## Misc Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"hideElement = id => (after, delay) => setTimeout(_ => {\n document.querySelector(id).style['visibility'] = 'hidden'\n after()\n}, delay * 1000) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"distanceBetweenCircles = (elem1, elem2) => {\n const e1Rect = elem1.getBoundingClientRect();\n const e2Rect = elem2.getBoundingClientRect();\n const dx = (e1Rect.left + e1Rect.right)/2 - (e2Rect.left + e2Rect.right)/2;\n const dy = (e1Rect.bottom - e1Rect.top)/2 - (e2Rect.bottom - e2Rect.top)/2;\n return Math.sqrt(dx*dx + dy*dy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"animate = ({ elem, value, className, destination }) => {\n elem.innerHTML = value\n const x = distanceBetweenCircles(document.querySelector(destination), elem)\n document.documentElement.style.setProperty('--translate', x/2 + 'px')\n elem.classList.add(className)\n return hideElement('#' + elem.id)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"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":9,"value":"success = () => {\n return html `✓ success`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"