Published
Edited
May 22, 2020
1 star
//this is a code cell. You can edit and re-run it
{
//if we want to conduct multi-line operations, we do them in curly braces
var a = 1;
var b = 1;
return a + b; //we have to return a value out of a code cell to visualize it
}
four = {
//we can store the outputs of code cells in notebook variables that are accessible outside of the cell
return 1 + 3;
}
"hi" === 'hi' && 'hi' === `hi`
`Hi, I'm Bobby and I'm ${four} years old! My favorite number is three higher, though; it's ${four +
3}.`
{
var [Dak, Marius, Bryan, Alex, Steffen, CodyRay] = extensibilitySquad;
return `The members of Extensibility Squad are ${Dak}, ${Marius}, ${Bryan}, ${Alex}, ${Steffen}, and ${CodyRay}.`;
}
{
var { name, boss, ...rest } = programmer;
return rest;
}
superProgrammer = {
return { ...programmer, boss: 'Self', happy: true };
}
repeatedArray = [...extensibilitySquad, ...extensibilitySquad]
//We can even use ... in function calls!
function sumStuff(...params) {
var sum = 0;
for (var param in params) {
sum = sum + Number(param);
}
return sum;
}
sumStuff(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)
(param1, param2) => {
//code here
return 'something';
}
param => {
//code here
return 'something';
}
() => {
//code here
return 'something';
}
() => 'something'
{
var exampleObj = {
param1: 'Bob',
curiousParam: function() {
return `Param1's value is ${this.param1}.`;
}
};
return exampleObj.curiousParam();
}
{
// I wnoder what will happen if we put an arrow function that references this...
var exampleObj = {
param1: 'Bob',
curiousParam: () => `Param1's value is ${this.param1}.`
};
return exampleObj.curiousParam();
}
animalArray.filter(({ species }) => species === 'dog') //gets an array of dogs
animalArray.filter(({ species }) => species === 'cat' || species === 'kitty') //gets an array of cats
animalArray.filter(({ name }) => name.includes('Spot')) //gets an array of animals with spot-like names
//Get the number of cats in the array
animalArray.reduce((currentCount, animal) => {
if (animal.species === 'cat' || animal.species === 'kitty')
return currentCount + 1;
return currentCount;
}, 0)
//or, more cleanly:
animalArray
.filter(({ species }) => species === 'cat' || species === 'kitty')
.reduce((currentCount, animal) => currentCount + 1, 0)
//An aggregator doesn't have to be a scalar... This code transforms the array into an object:
animalArray.reduce((aggObj, animal) => {
aggObj[animal.name] = animal.species;
return aggObj;
}, {})
animalArray.map(animal => animal.name) //get and array of animal names
//add attributes to
animalArray.map(animal => ({
...animal,
isAnimal: animal.species !== 'human'
}))
function toName(inputArray) {
//Code Here
}
function toObject(inputArray) {
//Code Here
}
function toCart(foodArray) {
//Code Here
}
{
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
})()
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.