Time causes bugs. This is because we often don't know how to handle the many different scenarios that emerge when dealing with asynchronous code. A main goal of this course is to help your feel comfortable attacking bugs due to time so you can build the advanced features that main your app shine.
Hey there!
I feel like a missed a lesson between video 5 and 6.. I am not familiar with operators, and it is not clear that the operator is being called on the first run.
Defining a function that takes a function, and returns a function that takes a function is a bit rough without explanation haha.
Would it not be possible to pass these two functions as parameters to operator?
Ex: const operator = (broadcaster, listener) => ...
I am guessing it has something to with the scope/closure.
Thanks !
That's my feeling too. The explanations for broadcaster and listener were clear, but there was a whiff of handwaving for the operator - it did feel if 30 seconds was missing between 5 and 6
It became clear in the following section :)
Just a bit unnerving to start us off.
I spent hours trying to fully understand this and my notes are below. I hope they help...
/* https://stackoverflow.com/questions/42893344/how-to-understand-chain-multiple-in-javascript?noredirect=1&lq=1 It's a higher-order function in that it returns another function. This is actually pretty easy to read once you're used to this notation. When you see multiple =>s, read each of them but the last one as return a function. Whatever is on the left-hand side of the =>, can be closure'd so to say in the returned function. The last => is the actual action you want to perform. */ // 1. A function is assigned to timeoutByValue (the first arrow function). // 2. A function is returned. That function creates a closure over broadcaster. // 3. That returned function is executed with listener as an argument. // 4. Consider it rewritten as: // >> const fn2 = timeoutByValue(broadcaster) // >> fn2(listener) let timeoutByValue = (broadcaster) => (listener) => { // 5. This block represents the execution of the second arrow function. // 6. Here, broadcaster() will be executed with an anonymous arrow function (using value for return). // 7. The broadcaster function will "callback" 3 times thru the anonymous arrow function (aka value). // 8. Each callback creates a 1 second timeout, and each is a closure over value. broadcaster((value) => { //-- callback goes here... setTimeout(() => { listener(value) }, value * 1000) }) } console.log("RUNNING: timeoutByValue") timeoutByValue(broadcaster)(listener)
//-- The equivalent, but with separate assignment/execution -- //console.log("RUNNING: timeoutByValue Equivalent") //const fn2 = timeoutByValue(broadcaster) // fn2 now contains a function that closes over broadcaster //fn2(listener) // fn2 is executed with the callback
//-- Written as functions (this might help) -- const timeoutByValue2 = function (broadcaster) { return function (listener) { broadcaster((value) => { setTimeout(() => { listener(value) }, value * 1000) }) } } //console.log("RUNNING: timeoutByValue2") //timeoutByValue2(broadcaster)(listener)
Here is a gist for my previous comment...
https://gist.github.com/chadrey/c1f27ef4b62e4e2fa967e3c6a62c86a7