Time is a Hidden Variable in JavaScript

Share this video with your friends

Send Tweet

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.

~ 4 years ago

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 !

Richard Dyce
Richard Dyce
~ 4 years ago

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

~ 4 years ago

It became clear in the following section :)
Just a bit unnerving to start us off.

Chad
Chad
~ 4 years ago

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)

Chad
Chad
~ 4 years ago

Here is a gist for my previous comment...

https://gist.github.com/chadrey/c1f27ef4b62e4e2fa967e3c6a62c86a7