Published
Edited
May 22, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//this is a code cell. You can edit and re-run it
Insert cell
{
//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
}
Insert cell
four = {
//we can store the outputs of code cells in notebook variables that are accessible outside of the cell
return 1 + 3;
}
Insert cell
Insert cell
"hi" === 'hi' && 'hi' === `hi`
Insert cell
Insert cell
`Hi, I'm Bobby and I'm ${four} years old! My favorite number is three higher, though; it's ${four +
3}.`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
var [Dak, Marius, Bryan, Alex, Steffen, CodyRay] = extensibilitySquad;
return `The members of Extensibility Squad are ${Dak}, ${Marius}, ${Bryan}, ${Alex}, ${Steffen}, and ${CodyRay}.`;
}
Insert cell
Insert cell
{
var { name, boss, ...rest } = programmer;
return rest;
}
Insert cell
Insert cell
superProgrammer = {
return { ...programmer, boss: 'Self', happy: true };
}
Insert cell
repeatedArray = [...extensibilitySquad, ...extensibilitySquad]
Insert cell
//We can even use ... in function calls!
function sumStuff(...params) {
var sum = 0;
for (var param in params) {
sum = sum + Number(param);
}
return sum;
}
Insert cell
sumStuff(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)
Insert cell
Insert cell
Insert cell
Insert cell
(param1, param2) => {
//code here
return 'something';
}
Insert cell
Insert cell
param => {
//code here
return 'something';
}
Insert cell
Insert cell
() => {
//code here
return 'something';
}
Insert cell
Insert cell
() => 'something'
Insert cell
Insert cell
Insert cell
{
var exampleObj = {
param1: 'Bob',
curiousParam: function() {
return `Param1's value is ${this.param1}.`;
}
};
return exampleObj.curiousParam();
}
Insert cell
{
// 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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
animalArray.filter(({ species }) => species === 'dog') //gets an array of dogs
Insert cell
animalArray.filter(({ species }) => species === 'cat' || species === 'kitty') //gets an array of cats
Insert cell
animalArray.filter(({ name }) => name.includes('Spot')) //gets an array of animals with spot-like names
Insert cell
Insert cell
//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)
Insert cell
//or, more cleanly:
animalArray
.filter(({ species }) => species === 'cat' || species === 'kitty')
.reduce((currentCount, animal) => currentCount + 1, 0)
Insert cell
//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;
}, {})
Insert cell
Insert cell
animalArray.map(animal => animal.name) //get and array of animal names
Insert cell
//add attributes to
animalArray.map(animal => ({
...animal,
isAnimal: animal.species !== 'human'
}))
Insert cell
Insert cell
Insert cell
Insert cell
function toName(inputArray) {
//Code Here
}
Insert cell
Insert cell
Insert cell
function toObject(inputArray) {
//Code Here
}
Insert cell
Insert cell
Insert cell
function toCart(foodArray) {
//Code Here
}
Insert cell
Insert cell
Insert cell
{
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
}
Insert cell
Insert cell
{
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!";
}
Insert cell
Insert cell
Insert cell
Insert cell
//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
Insert cell
Insert cell
{
var firstThing = 22;
var secondThing = firstThing * 2; //note that the previous line has already resolved before we get here
return secondThing;
}
Insert cell
Insert cell
{
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;
}
Insert cell
Insert cell
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])
)
Insert cell
Insert cell
getDrink('mojito')
Insert cell
//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}
`))
}
Insert cell
//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}
`)
}
Insert cell
getDrinkAsync('mojito')
Insert cell
Insert cell
(
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
})()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more