Comments (5)
Hi there @gitmrwick !
I pondered this one for a while, then I remembered a weird bit of JS behaviour that is probably what is causing the confusion here.
Quoting from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Description:
Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed.
So if you remove the declaration of products
from the top of the code, the next time we meet it is on line 10. At that point, we are assigning a variable to it without declaring it, so it gets raised up to being a global variable. Which is why everything seeming still works.
But if you try properly declaring it on line, i.e. change line 10 to let products = json;
, you'll see that it stops working.
Having undeclared variables is a bad idea for a number of reasons, so you should avoid it.
from learning-area.
Hello, thanks for the quick response.
This so-called global variable that is declared but not initialised is not available at, say, line 191, it continues to be undefined. Thus the only actual value that gets assigned to it is in the non-global scope of the anonymous function of the promise of the fetch. If there is an assignment during declaration then that initial value is what would be available on line 191.
For my purposes, and perhaps to reduce or eliminate this confusion for anyone else, I would prefer that the json is passed in a an argument to initialise() and this argument then gets assigned at line 38 to the local finalGroup variable. Eliminating the need for global variables in general is extremely good practice.
The scope of everything here is also obfuscated (at least for me) by the chained promises (a method I am coming to prefer as I learn more about fetch.) The scope of a declared variable inside the anonymous function that calls initialise() does not carry to the new function, since the initialise function is defined outside the anonymous function, OK - but a variable declared outside of everything that gets assigned to inside this anonymous function does carry its assignment through the call and then when exiting initialise() on line 190 this scope somehow is no longer valid.
A condensed version of what I prefer, if you agree, I am happy to make a pull request:
https://gist.github.com/gitmrwick/a19fee790f6af240db69f91555ab3300
from learning-area.
Just realised something while looking closer at my debugging: the debug statement of the global variable after the initialise function (thus outside of the local scope) comes to the console before the debug statements in the fetch() or the initialise() - so perhaps what is happening here has less to do with scope and more to do with interpreter order. The fetch is performed after the rest of the script.
from learning-area.
so perhaps what is happening here has less to do with scope and more to do with interpreter order.
Hrm, perhaps, but I still think your gist suggestion seems like better practice than what I am doing. I've not looked at this code for a while, but I suspect I was probably using a global here to try to keep things simpler for beginners ... but it isn't really.
I'd be happy to examine/test a PR if you are happy to spend the time submitting one. I do wonder whether it would also require some changes to the selectCategory()
function — this also has products
used in it.
Thanks for taking the time to explore this.
from learning-area.
OK, PR made and tested, it looks good to me. Hopefully this will make things more clear for future learners
It is a simple change, but it helps me quite a bit to focus just on fetch!
from learning-area.
Related Issues (20)
- Form example looks ugly. HOT 7
- oojs.html example shows HTML0204 lint warning HOT 5
- Learning area
- Left sidebar doesn't show scrollbar at specific font sizes. HOT 1
- html/forms/html-form-structure/payment-form.html STYLING ISSUE HOT 3
- Guides > Tools and testing > Cross browser testing > Handling common HTML and CSS problems (Issue)
- [revise] fix payment form code snippet HOT 1
- [type="number"]
- Test your skills: Advanced HTML text — Task 2, paragraph 2: Copy discrepancy HOT 19
- Error Message is Cut Off at the Top when the Example is at the Bottom of the Browser Window HOT 10
- javascript/introduction-to-js-1/first-splash/number-guessing-game.html line 64 is different than any material covered by the tutorial HOT 3
- Standardize lang attribute usage in HTML tutorial on MDN to 'en-US' or 'en-us' HOT 3
- Auto-generated method stub
- Auto-generated method stub
- Width capped at 90% and height capped at 160px in javascript/building-blocks/tasks/styles.css HOT 3
- Label is covered by Text Area in learning-area/html/forms/your-first-HTML-form/first-form-styled.html
- My first issue HOT 1
- new day
- Site
- Where are my divs? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from learning-area.