32:T483,md`# We're Done! So What Now? Congrats! You've just been exposed to some of the really cool, mindbending, weird stuff that JS has to offer; it doesn't get harder (or more fun) than this. Still interested? \n If so, here are some next steps on your journey to learn React: * If you want to learn more basics thoroughly, explore this [Javascript course](https://observablehq.com/collection/@mmakutonin/it-280b-sp20) starting at [Lesson 12](https://observablehq.com/@mmakutonin/lesson-12-advanced-objects-i-prototypes?collection=@mmakutonin/it-280b-sp20) \n **or** if you don't mind doing some syntax googling * Watch my three-part introduction to React: [Part 1](https://observablehq.com/@mmakutonin/lesson-20-intro-to-react-react-native-and-expo-react-day-1?collection=@mmakutonin/it-280b-sp20),[Part 2](https://observablehq.com/@mmakutonin/lesson-21-react-day-2-this-props-and-react-event-handling?collection=@mmakutonin/it-280b-sp20), and [Part 3](https://observablehq.com/@mmakutonin/lesson-22-react-day-3-listing-this-state-up?collection=@mmakutonin/it-280b-sp20). \n Regardless of the route you take, the most important step is to * Get Programming!`33:[] 30:{"title":"A Painless Introduction to JavaScript for the Wary Backend Engineer","cells":[{"id":0,"value":"md`# A Painless Introduction to JavaScript for the Wary Backend Engineer\nThis is a brown bag talk created for backend engineers at [Seeq Corporation](https://www.seeq.com/) as a painless introduction to advanced JavaScript concepts. It draws on material [from a previously taught JS course for novice programmers](https://observablehq.com/collection/@mmakutonin/it-280b-sp20). And yes, we will be using memes.\\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`## Course Objectives (as in, cool stuff we'll be able to do a few scrolls away):\n* Know cool shortcuts for data manipulation in JS\n* Know what promises are and why we care about them\n* Know some really cool JS syntax\n* JavaScript will be exciting, not scary\n* Be ready to jump into classes and React!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## The Stuff We're Going to Skip:\nWe assume that you know the basic ideas behind the following things. If not, Please feel free to head over to [this course](https://observablehq.com/collection/@mmakutonin/it-280b-sp20). \\n\n| Javascript | Python | Java |\n|:----------:|:----------:|:-------------:|\n| Variable | Variable | Variable |\n| Object | Dictionary | Map |\n| Array | List | Array |\n| Functions | Defs | Methods (ish) |`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`## Step 0: String Operations and Observable Notebook Weirdness\nThough this section is not super conceptual, it's important to get comfortable with some of the data display functions we will be seeing in the rest of the notebook. Ready to dive in?\n#### Rules of Observable (not JS):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"//this is a code cell. You can edit and re-run it","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"{\n //if we want to conduct multi-line operations, we do them in curly braces\n var a = 1;\n var b = 1;\n return a + b; //we have to return a value out of a code cell to visualize it\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"four = {\n //we can store the outputs of code cells in notebook variables that are accessible outside of the cell\n return 1 + 3;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`#### String-jitsu in JS (SJ in JS):\nThere are a couple nifty ways of dealing with strings in JS. First, there are three ways of declaring string values:\n\\`\\`\\` javascript\n\"I am a string\"\n'I am also a string'\n\\`I am a template string\\`\n\\`\\`\\`\nare all strings and all equivalent.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"\"hi\" === 'hi' && 'hi' === `hi`","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"md` The thing that makes a template string unique is that we can inject JS values into it directly using \\`$\\{\\}\\` notation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"`Hi, I'm Bobby and I'm ${four} years old! My favorite number is three higher, though; it's ${four +\n 3}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`## Step 1: \\`...rest\\` and iterable destructuring\nSay we have the following data structures:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"programmer = ({\n name: 'Peter',\n boss: 'Bill',\n friends: ['Samir', 'Michael'],\n dreamJob: 'Construction',\n happy: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"extensibilitySquad = [\"Dak\", \"Marius\", \"Bryan\", \"Alex\", \"Steffen\", \"Cody Ray\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`What destructuring allows us to do is to take values out of these data structures and encapsulate them into separate variables, like so:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"{\n var [Dak, Marius, Bryan, Alex, Steffen, CodyRay] = extensibilitySquad;\n return `The members of Extensibility Squad are ${Dak}, ${Marius}, ${Bryan}, ${Alex}, ${Steffen}, and ${CodyRay}.`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`Now, in JavaScript we also have a \\`...\\` operator, that allows us to create a data structure made up of all the values we didn't destructure out:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"{\n var { name, boss, ...rest } = programmer;\n return rest;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`Now we can do some really cool data operations:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"superProgrammer = {\n return { ...programmer, boss: 'Self', happy: true };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"repeatedArray = [...extensibilitySquad, ...extensibilitySquad]","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"//We can even use ... in function calls!\nfunction sumStuff(...params) {\n var sum = 0;\n for (var param in params) {\n sum = sum + Number(param);\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"sumStuff(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`## Step 2: Scopes and Arrow Functions (A Better Way to Function)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`Arrow functions are a shorthand notation of writing a function. By default, they replace the old function notation, but have a few different rules when scoping:\n\\`\\`\\` javascript\nfunction (param1, param2) {\n //code here\n return 'something'\n}\n\\`\\`\\`\nwith`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"(param1, param2) => {\n //code here\n return 'something';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md` When we only have one parameter, we can shorten it by taking out the parentheses:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"param => {\n //code here\n return 'something';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"md` When we have no parameters, we need the parentheses back`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"() => {\n //code here\n return 'something';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"md` When our function consists of only a return statement (that is, only has one line), we can shorten the syntax by removing the curly braces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"() => 'something'","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`### WARNING: Scopes Ahead\nThere is a non-syntactical difference between arrow and regular functions. Before we can explore it, though, let's take a second to explore scopes.\nJS object attributes sometimes need to read information in other attributes. This can be done by referencing the object an attribute is located in with \\`this\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"{\n var exampleObj = {\n param1: 'Bob',\n curiousParam: function() {\n return `Param1's value is ${this.param1}.`;\n }\n };\n return exampleObj.curiousParam();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"{\n // I wnoder what will happen if we put an arrow function that references this...\n var exampleObj = {\n param1: 'Bob',\n curiousParam: () => `Param1's value is ${this.param1}.`\n };\n return exampleObj.curiousParam();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`Regular JS functions take on the scope in which they were defined- that is, if a function was defined inside of a particular object, \\`this\\` refers to that object anywhere inside that function. However, arrow functions **take on the scope in which they are executed**, which may lead to errors. Thus, most of the time arrow functions are used, they represent pure functions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`## Step 3: Filter/Map/Reduce\nFilter, map, and reduce are extremely useful higher order functions in JS (so called because they take it other functions as parameters). Let's explore how they work!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`### Filter\n

\\n\n\\`Array.filter\\` allows us to \"filter\" an array based on the value of entries in the array, using a function parameter to do the filtering.\n\\`\\`\\` javascript\nvar array = [...]\narray.filter(\n (someArrayEntry) => {\n if(keepArrayEntry)\n return true //keeps the entry in the return array\n else if(removeArrayEntry)\n return false //removes entry from return array\n }\n)\n\n\\`\\`\\`\nFor example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"animalArray = [\n {\n name: 'Bob',\n species: 'cat'\n },\n {\n name: 'Spot',\n species: 'dog'\n },\n {\n name: 'Spotty',\n species: 'cat'\n },\n {\n name: 'Jhonny',\n species: 'turtle'\n },\n {\n name: 'Sammy',\n species: 'human'\n },\n {\n name: 'Hello',\n species: 'kitty'\n },\n {\n name: 'Rover',\n species: 'dog'\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"animalArray.filter(({ species }) => species === 'dog') //gets an array of dogs","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"animalArray.filter(({ species }) => species === 'cat' || species === 'kitty') //gets an array of cats","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"animalArray.filter(({ name }) => name.includes('Spot')) //gets an array of animals with spot-like names","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`### Reduce\n

\\n\n \\`Array.reduce\\` allows us to \"reduce\" an array into some other type.\n\\`\\`\\` javascript\nvar array = [...]\narray.reduce(\n (accumulator, someArrayEntry) => someValue, //which becomes the accumulator for the next element's function call\n aggregateValue //(optional), if not present, defaults to the first element in the array\n)\n\n\\`\\`\\`\nFor example (using the animals array):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"//Get the number of cats in the array\nanimalArray.reduce((currentCount, animal) => {\n if (animal.species === 'cat' || animal.species === 'kitty')\n return currentCount + 1;\n return currentCount;\n}, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"//or, more cleanly:\nanimalArray\n .filter(({ species }) => species === 'cat' || species === 'kitty')\n .reduce((currentCount, animal) => currentCount + 1, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"//An aggregator doesn't have to be a scalar... This code transforms the array into an object:\nanimalArray.reduce((aggObj, animal) => {\n aggObj[animal.name] = animal.species;\n return aggObj;\n}, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"md`### Map\n

\\n\n \\`Array.map\\` transforms each element of an array into some other element.\n\\`\\`\\` javascript\nvar array = [...]\narray.map(someArrayEntry => transformedArrayEntry)\n\\`\\`\\`\nFor example (using the animals array):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"animalArray.map(animal => animal.name) //get and array of animal names","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"//add attributes to\nanimalArray.map(animal => ({\n ...animal,\n isAnimal: animal.species !== 'human'\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`### Review Exercises:\nLectures are pretty OK at teaching you fun stuff, but do-it-yourself reinforcement always helps. Let's do a couple of exercises together to cement our knowledge:\n\nAccountantKitty is having some more problems with her kitty arrays. Can you help her?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"kittyArray = [\n 'bob',\n 'sammy',\n 'hello',\n 'sammy',\n 'just a kitty',\n 'super kitty',\n 'mr. butters'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"md` ** 1)** AccountantKitty wants you to make a function that transforms the array of names into a string of names separated by commas. For example, \\n\n\\`toName(['bob', 'jim']) => 'bob, jim,'\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"function toName(inputArray) {\n //Code Here\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"{\n if (toName(['bob']) === undefined)\n return \"Your function will be unit tested here\";\n\n try {\n var arry = [\n 'bob',\n 'sammy',\n 'hello',\n 'sammy',\n 'just a kitty',\n 'super kitty',\n 'mr. butters'\n ];\n expect(toName(arry)).to.equal(\n 'bob, sammy, hello, sammy, just a kitty, super kitty, mr. butters,'\n );\n expect(toName(arry.slice(0, 3))).to.equal('bob, sammy, hello,');\n expect(toName(arry.slice(6))).to.equal('mr. butters,');\n return success();\n } catch (err) {\n return failure();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md` ** 2)** AccountantKitty wants you to make a function that transforms each string in an array into an object. The object should have two attributes: name and species. Species should always be 'cat' and name should be the string in the array. For example, \\n\n\\`toObject(['bob', 'jim']) => [{name: 'bob', species: 'cat'}, {name:'jim', species: 'cat'}]\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"function toObject(inputArray) {\n //Code Here\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"{\n if (toObject([]) === undefined)\n return \"Your function will be unit tested here\";\n\n try {\n var arry = [\n 'bob',\n 'sammy',\n 'hello',\n 'sammy',\n 'just a kitty',\n 'super kitty',\n 'mr. butters'\n ];\n expect(toObject(arry)).to.deep.equal([\n { name: 'bob', species: 'cat' },\n { name: 'sammy', species: 'cat' },\n { name: 'hello', species: 'cat' },\n { name: 'sammy', species: 'cat' },\n { name: 'just a kitty', species: 'cat' },\n { name: 'super kitty', species: 'cat' },\n { name: 'mr. butters', species: 'cat' }\n ]);\n expect(toObject(arry.slice(4))).to.deep.equal([\n { name: 'just a kitty', species: 'cat' },\n { name: 'super kitty', species: 'cat' },\n { name: 'mr. butters', species: 'cat' }\n ]);\n expect(toObject(arry.slice(4, 5))).to.deep.equal([\n { name: 'just a kitty', species: 'cat' }\n ]);\n return success();\n } catch (err) {\n return failure();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md` ** 3)** AccountantKitty wants you to make a function that takes an array of foods and gets only the cat-friendly ones for her shopping cart \\n\n\\`toCart(['steak (hooman)', 'tuna (cat)', 'veggies (vegan)', 'steak pate (cat)']) => ['tuna (cat)', 'steak pate (cat)']\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"function toCart(foodArray) {\n //Code Here\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"{\n if (toCart([]) === undefined) return \"Your function will be unit tested here\";\n\n try {\n var arry = [\n 'xyz (cat)',\n 'z (cat)',\n 'jimbo (dog)',\n 'arrrrr (pirate)',\n 'steak pate (cat)'\n ];\n expect(toCart(arry)).to.deep.equal([\n 'xyz (cat)',\n 'z (cat)',\n 'steak pate (cat)'\n ]);\n expect(toCart(arry.slice(0, 3))).to.deep.equal(['xyz (cat)', 'z (cat)']);\n expect(toCart(arry.slice(4))).to.deep.equal(['steak pate (cat)']);\n return success();\n } catch (err) {\n return failure();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`## Step 4: Promises\nTo get us React-Ready, there is one more significant JS concept we have to cover: Promises. To understand these, let's take a look at real-world promises. \\n \nSometimes, we want to use things that we don't currently have access to. For example, imagine an alternate plot in Romeo and Juliet, where Juliet wanted a rose and nobody died:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"{\n var romeo = {name: \"romeo\", hasRose: false}\n var juliet = {name: \"jules\", wantsRose: true}\n if(romeo.hasRose===true){\n romeo.hasRose=false\n juliet.wantsRose=false\n return \"Happily ever after!\"\n }\n else if(romeo.hasRose===false)\n {\n return \"Romeo fails\"\n }\n romeo.hasRose=true\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`Because Romeo only got the rose after it was too late, Juliet rejected him. What would have happened if Romeo was able to take an IOU on the rose, though?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"{\n var romeo = { name: \"romeo\", hasRose: false };\n var juliet = { name: \"jules\", wantsRose: true };\n if (romeo.hasRose === true) {\n romeo.hasRose = false;\n juliet.wantsRose = false;\n return \"Happily ever after!\";\n } else if (romeo.hasRose === false) {\n romeo.oweRose = true;\n juliet.wantsRose = false;\n }\n romeo.hasRose = true;\n\n romeo.oweRose = false;\n romeo.hasRose = false;\n return \"Happily ever after!\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"md`What happened here? Romeo has to complete to events: get the rose, and then give it to Juliet. In a perfect world, he'd get the rose before he has to give it, but our world isn't perfect. Promises **for humans** are ways to put a placeholder for values or objects (like a rose) or actions when they're needed before we have them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md` #### What about Javascript?\nWell, the same thing is true. In JavaScript, you have a lot of functions that depend on the output of other functions. You need to know if something worked or broke. For example, if you have to load a picture onto your page before the user can click on it and perform an action, if the picture loaded you gotta get the value of the picture, and if the loading fails you need to recieve an error! So what do we use? **Promises**. \\n\nPromises are objects that allow us to run synchronous operations (like getting database data or loading a picture) without interrupting the execution of the main JS program. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md` ### How do promises work?\n\nWell, promises allow us to chain together a bunch of operations or functions that have to happen in order and say: \\n\n\"OK, funcA does a thing then returns a value for funcB that returns a new value for funcC that does a thing that gives me a final output, and if anything happens in the middle I wanna know that an error happened.\" So we do:\n\n\\`\\`\\` javascript\nvar result = funcA(value) //which returns a promise\n .then(result => funcB(result)) //takes the promise and gives it as an input to funcB\n .then(newResult => modifiedResult}) //... can continue with .then statements forever..\n .catch((error) => rrorHandlingFunction(error)) //if anything above errors, handles the error.\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"//this creates a promise by fetching stuff from the cocktailDB API\naxios.get(//axios is a lightweight http request library\n 'https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic'\n)\n.then(({data}) => data.drinks[0].strDrinkThumb) //then we extract the image URL for the first drink\n.then(url => (html`

`)) //then we display the URL\n.catch(error => `There was an error: ${error}`) //and we can catch an error at any point in this chain","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`### Why are promises important?\nJavascript is an asynchronous language, which means that it doesn't wait for a line to execute before moving on to the next line of code. Usually this is OK, because operations in Javascript are much faster than the time it takes Javascript to read and execute the next line of code. For example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"{\n var firstThing = 22;\n var secondThing = firstThing * 2; //note that the previous line has already resolved before we get here\n return secondThing;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`Most of the cool things we want to do with JavaScript take time, though. Any time you've seen a loading page, or shopped on amazon, or typed into a webpage, you've probably interacted with a Promise that forced Javascript to wait for the result of an operation before trying to use that data. For example, say we are bored mixing cans of mountain dew and cranberry juice for \"variety\" and want to learn to make fancier non-alcoholic cocktails:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"{\n var cocktailList = axios.get('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic');\n var randomCocktailId = cocktailList.data.drinks[0].idDrink;\n var cocktail = axios.get(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${randomCocktailId}`);\n return cocktail;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`Why didn't the above code work? Because we didn't **wait** for the cocktail information to get to us, which left us without any data for the operation we needed to do on the next line. If, on the other hand, we use .then statements (as we did above), the code will work:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"axios.get('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic')\n .then(cocktailList => cocktailList.data.drinks[0].idDrink)\n .then(randomCocktailId => axios\n .get(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${randomCocktailId}`)\n .then(drink => drink.data.drinks[0])\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"md`## Promise-based Synchronicity in JS: \\`async\\`/\\`await\\` functions\nLong chains of nested \\`.then()\\` statements sometimes get hard to read. In those cases, we use \\`async\\` functions to simplify the format of our code by allowing us to \\`await\\` the resolution of our promises and treat them as a resolved value for further processing. Let's take a look at how this works using our cocktailDB example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"getDrink('mojito')","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"//In a regular function, we have to use .then() chains to handle promises:\nfunction getDrink(name) {\n return axios\n .get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name.toLowerCase()}`)\n .then(result => result.data.drinks[0])\n .then(({strInstructions, strDrinkThumb}) => (html`\n

\n ${strInstructions}\n `))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"//On the other hand, this is how the above function would be written using async/await notation\nasync function getDrinkAsync(name) { // the async keyword is needed before \n // the function declaration if we want to use await\n var result = await axios.get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name.toLowerCase()}`)\n var drinkCreationInstructions = result.data.drinks[0].strInstructions\n var drinkImage = result.data.drinks[0].strDrinkThumb\n return(html`\n

\n ${drinkCreationInstructions}\n `)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"getDrinkAsync('mojito')","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`Async/await syntax becomes even more useful when handling nested .then()s:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"(\n async () => {\n var randomDrinkId = await axios.get('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic')\n .then(cocktailList => cocktailList.data.drinks[0].idDrink)\n //We can use .thens()s inside of async functions... Actually, sometimes they help simplify your code)\n var randomDrinkObj = axios.get(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${randomDrinkId}`)\n .then(drink => drink.data.drinks[0])\n return randomDrinkObj\n})()","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`### Note: \\`async\\` functions return Promises\nSome might be confused about why we didn't await the second API call in the async arrow function above. It's really important to remember that async functions are just syntactic sugar, and while they make execution of code synchronous inside of the function, the entire function is simply treated as a Promise by anything outside of itself.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"md`## Imports (nothing important) below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"import {\n expect,\n success,\n failure\n} from '@mmakutonin/chai-unit-testing-in-observable-notebook'","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"axios = require(\"https://unpkg.com/axios/dist/axios.min.js\") //this allows our notebook to use the axios library","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}