{
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]
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.