Published
Edited
Mar 18, 2021
4 stars
import { chart, viewof year } from '@mbostock/phases-of-the-moon'
viewof year
chart
html`
<h2>
My favorite color is <span style="color:red">red</span>.
</h2>
`
2 * 3
a = 1
b = a + 1
3 + 5 + 1 / 4
"abc".concat("def")
3 > 5
3 === 3
0 == "" // 0 is not "", but this evaluates to true
{
let string = "abc";
string[0] = "b"; // assign "b" to the first character, which throws an exception.
}
{
let x; // x is set to undefined by default
let y = 2;
let a = "first",
b = "second";
let c = false;
}
{
let localVariable = 3;
}
localVariable
globalVariable = 3
globalVariable
{
let localVariable = "check this value";
return localVariable;
}
console.log("value of globalVariable is", globalVariable)
{
let a = 1;
console.log(a);
a = 2;
console.log(a);
a = 3;
console.log(a);
a = 4;
return a;
}
{
let a = 1;
if(a === 1) return "a is one."
else return "a is not one."
}
{
let a = "abc";
if(typeof a === "string") return "a is a string."
return "a is not a string."
}
{
let sum = 0;
for(let i = 0; i < 10; i++) {
sum += i;
if(i >= 5) break;
}
return sum
}
log = {
let x = 64;
let count = 0;
while(x > 1) {
x = x >> 1;
count++;
}
return count;
}
arr = {
let emptyArray = [];
let numbers = [1, 2, 3];
let strings = ["a", "b", "c"];
let heterogenous = [1, "a", undefined, null, 5];
return heterogenous;
}
{
let sumOfNumbers = 0;
for(let i = 0; i < arr.length; i++) { // arr is the array that we assigned in the above cell.
if(typeof arr[i] === "number")
sumOfNumbers += arr[i];
}
return sumOfNumbers;
}
typeof arr
Array.isArray(arr)
{
let me = { name: "John", age: "25" }; // define an object
me.id = 153; // associate a value 153 with a key "id"
me["id"] = 153;
delete me.age;
return me;
}
visLab = ({
director: {
name: "Jaemin Jo"
},
students: [
{name: "John", id: 111},
{name: "Zoey", id: 112},
{name: "Chen", id: 113, graduated: true},
]
})
{
let a = false;
let b = a;
a = true;
return b; // false in a is copied to b. Since the value is copied, modifying a does not affect b.
}
{
let a = {bee: 5}
let b = a;
a.bee = 6;
return b; // a and b are referring to the same object. Modifying the object through a affects the value of b.
}
{
let a = { bee: 5 };
let b = a;
a = 5;
return b; // Assigning a different value to a does not affect the value of b. The object remains intact.
}
visLabJSON = JSON.stringify(visLab)
JSON.parse(visLabJSON)
url = "https://raw.githubusercontent.com/altair-viz/vega_datasets/master/vega_datasets/_data/cars.json"
cars = (await fetch(url)).json()
function add(a, b) { return a + b;}
add(5, 3)
(a, b) => {
return a + b;
}
add2 = (a, b) => {
return a + b;
}
add2(3, 5)
add3 = (a, b) => a + b
() => {}
stringOnly = (arr) => {
let result = [];
for(let i = 0; i < arr.length; i++) {
if(typeof arr[i] === 'string')
result.push(arr[i]);
}
return result;
}
stringOnlyShort = (arr) => arr.filter((ele) => typeof ele === 'string')
stringOnly(['abc', 3, 4, null, 'def'])
stringOnlyShort(['abc', 3, 4, null, 'def'])
{
let arr = [1, 2, 3];
arr.push(4);
arr.push(5, 6); // pushing two elements at the same time
return arr;
}
[1, 6, -3, 4, 0].forEach((ele, i) => {
if(ele % 2 === 0) console.log('Element', i, 'is', ele, 'which is even.')
else console.log('Eelement', i, 'is', ele, 'which is odd.');
})
[1, 2, 3, 4, 5].filter(ele => ele % 2)
["cat", "call", "cone", "cell"].filter(ele => ele[1] === "a")
["ant", "bed", "cat", "dinner"].filter((ele, i) => i <= 2)
{
let arr = [1, 2, 3];
arr.filter(ele => ele % 2); // filter is called but arr does not change. filter returns a new array with odd elements in arr but not modifies arr.
arr = arr.filter(ele => ele % 2); // to change the array itself, assign the result of filter to a variable
return arr;
}
[1, 2, 3].map(ele => ele * 2)
[{name: "Cat"}, {name: "Dog"}, {name: "Tiger"}].map(ele => ele.name)
[1, 2, 3].map(ele => {})
obj = ({
title: "Intro to Javascript",
numStudents: 50,
classtime: "Every Thursday",
isOpen: true
})
Object.keys(obj)
Object.values(obj)
Object.entries(obj)
[1, 2, 3, 4, 5]
.map(ele => ele * 2)
.filter(ele => ele > 5)
Object.keys(obj)
.filter(ele => ele.length > 8)
.map(ele => "Key: " + ele)
[1, 2, 3]
.map(ele => ele * 2)
.map(ele => ele - 1)
.forEach(ele => {
console.log(ele);
})
function oldFunction(op, a, b) {
if(op === 'add') return a + b;
return a - b;
}
newFunction = () => {}
oldFunction('add', 3, 5) === newFunction('add', 3, 5)
[1, 5, -2, 3, 0]
arrayForSum = [3, 5, 8, 2, 1]
// Style 1 - Use a for loop and array.length
{
let i, sum = 0;
// Code here
return sum;
}
// Style 2 - Use array.forEach
{
let sum = 0;
// Modify the code below
arrayForSum.forEach(() => {})
return sum;
}
// Style 3 - Use array.reduce
arrayForSum.reduce(/* Fill here */)
wideForm = ({
Date: ['2007-10-01', '2007-11-01', '2007-12-01'],
AAPL: [189.95, 182.22, 198.08],
AMZN: [89.15, 90.56, 92.64],
GOOG: [707.00, 693.00, 691.48]
})
longForm = [
{Date: '2007-10-01', Ticker: 'AAPL', Price: 189.95},
{Date: '2007-10-01', Ticker: 'AMZN', Price: 89.15},
{Date: '2007-10-01', Ticker: 'GOOG', Price: 707.00},
{Date: '2007-11-01', Ticker: 'AAPL', Price: 182.22},
{Date: '2007-11-01', Ticker: 'AMZN', Price: 90.56},
{Date: '2007-11-01', Ticker: 'GOOG', Price: 693.00},
{Date: '2007-12-01', Ticker: 'AAPL', Price: 198.08},
{Date: '2007-12-01', Ticker: 'AMZN', Price: 92.64},
{Date: '2007-12-01', Ticker: 'GOOG', Price: 691.48},
]
wideForm
wideToLong = (wide) => {
/* Fill here */
return [];
}
wideToLong(wideForm) // check if wideToLong works as expected
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.
