Intro To Programming Syllabus:Lesson 1-1: Javascript BasicsLesson 1-2: Variables, Types, Boolean Algebra, and ComparisonsLesson 2-1: for and while loopsLesson 2-2: Intro to Objects, Functions, and this.Lesson 2-3: ArraysLesson 2-4: Scopes, bind, Arrow Functions and Default Function ParametersLesson 3-1: let and constLesson 3-2: Destructuring and ...restLesson 3-3: Higher Order Functions (HOFs)Lesson 3-4: Application Programming Interfaces (APIs)Lesson 3-6: Prototypes & InheritanceLesson 4-1: IIFEs, Factory Functions, and ModulesLesson 4-2: ClassesLesson 4-3 Class InheritanceLesson 4-4: Export/ImportLesson 5-1: Intro to React, React Native, and ExpoLesson 5-2: this.props and React Event HandlingLesson 5-3: Lifting this.state upLesson 5-4: Functionalizing React (an Intro to Better Practices)
Lesson 3-5: Promises & async/await
{
var romeo = {name: "romeo", hasRose: false}
var juliet = {name: "jules", wantsRose: true}
if(romeo.hasRose===true){
romeo.hasRose=false
juliet.wantsRose=false
return "Happily ever after!"
}
else if(romeo.hasRose===false)
{
return "Romeo fails"
}
romeo.hasRose=true
}
{
var romeo = { name: "romeo", hasRose: false };
var juliet = { name: "jules", wantsRose: true };
if (romeo.hasRose === true) {
romeo.hasRose = false;
juliet.wantsRose = false;
return "Happily ever after!";
} else if (romeo.hasRose === false) {
romeo.oweRose = true;
juliet.wantsRose = false;
}
romeo.hasRose = true;
romeo.oweRose = false;
romeo.hasRose = false;
return "Happily ever after!";
}
//this creates a promise by fetching stuff from the cocktailDB API
axios.get(//axios is a lightweight http request library
'https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic'
)
.then(({data}) => data.drinks[0].strDrinkThumb) //then we extract the image URL for the first drink
.then(url => (html`<img src='${url}' style='height:300px'/>`)) //then we display the URL
.catch(error => `There was an error: ${error}`) //and we can catch an error at any point in this chain
{
var firstThing = 22;
var secondThing = firstThing * 2; //note that the previous line has already resolved before we get here
return secondThing;
}
{
var cocktailList = axios.get('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic');
var randomCocktailId = cocktailList.data.drinks[0].idDrink;
var cocktail = axios.get(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${randomCocktailId}`);
return cocktail;
}
axios.get('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic')
.then(cocktailList => cocktailList.data.drinks[0].idDrink)
.then(randomCocktailId => axios
.get(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${randomCocktailId}`)
.then(drink => drink.data.drinks[0])
)
getDrink('mojito')
//In a regular function, we have to use .then() chains to handle promises:
function getDrink(name) {
return axios
.get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name.toLowerCase()}`)
.then(result => result.data.drinks[0])
.then(({strInstructions, strDrinkThumb}) => (html`
<img src='${strDrinkThumb}' style='height:300px'/> </br>
${strInstructions}
`))
}
//On the other hand, this is how the above function would be written using async/await notation
async function getDrinkAsync(name) { // the async keyword is needed before
// the function declaration if we want to use await
var result = await axios.get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name.toLowerCase()}`)
var drinkCreationInstructions = result.data.drinks[0].strInstructions
var drinkImage = result.data.drinks[0].strDrinkThumb
return(html`
<img src='${drinkImage}' style='height:300px'/> </br>
${drinkCreationInstructions}
`)
}
getDrinkAsync('mojito')
(
async () => {
var randomDrinkId = await axios.get('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic')
.then(cocktailList => cocktailList.data.drinks[0].idDrink)
//We can use .thens()s inside of async functions... Actually, sometimes they help simplify your code)
var randomDrinkObj = axios.get(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${randomDrinkId}`)
.then(drink => drink.data.drinks[0])
return randomDrinkObj
})()
//This has one error:
function oneError() {
const quote = axios.get('https://api.chucknorris.io/jokes/random').then(data => data.data.value)
return quote + "is the quote"
}
//this has two errors
function twoError() {
async function bob() {
const res = axios.get('https://api.chucknorris.io/jokes/random')
.then(function(data) {
return data.data
})
return 'Bob makes a joke: ' + res
}
return "Bob cometh. Now bob is hither. " + bob()
}
//This has two errors too!
function anotherTwoError() {
const someArray = [1,2,3,4,5,6,13]
const onlySingleDigits = someArray.reduce((input) => {
if(input/10 > 0) {
return true
}
else {
return false
}
})
const sumOfDigits = someArray.map((agg, el) => el+agg)
return [onlySingleDigits, sumOfDigits]
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
