Session 6: Advanced JavaScript 1/4

ECMAScript history, functions, callbacks and promises

ECMA Script

"The ECMAScript specification is a standardised specification of a scripting language developed by Brendan Eich of Netscape; initially named Mocha, then LiveScript, and finally JavaScript." (Wikipedia: ECMAScript)

• 1999: ECMAScript Edition 3
• 2009: ECMAScript Edition 5 (Features @ w3schools)
• 2015: ES Edition 6 / ES2015 (Features @ w3schools)
• yearly updates: ES2016 (7th ed.) to ES2021 (12th ed.)

Command Line Heroes, Season 3 Episode 3: Creating JavaScript
(and the whole season 7 for how the web came about)

More background at the Wikipedia: JavaScript & Browser wars

Callbacks

Functions which are passed as parameters to other functions

so they can be called later

            // e.g. for events, here we just don't pass it to a function
            // but store the "event handler" in the element's onclick property
            const doSomething = function () { alert('something!') }
            document.getElementById('myButton').onclick = doSomething

            // or timers
            let timeoutID = setTimeout(() => {console.log("time's up!")}, 5000)

            // or intervals
            let counter = 0
            function count () {
              counter++
              console.log(counter)
            }
            const counterInterval = setInterval(count, 1000)
          

Promises

... promise to keep you out of the callback pyramid of doom:
Using Promises

            doSomething().then(doSomethingElse, displayError)

            doSomething()
              .then(result => doSomethingElse(result))
              .then(newResult => doThirdThing(newResult))
              .then(finalResult => {
                console.log(`Got the final result: ${finalResult}`);
              })
              .catch(failureCallback);