"hello" === 'hello'
myName = 'Dan'
`Hello, ${myName}! Your name has ${myName.length} letters.`
`3 x 4 = ${3 * 4}`
roster = ['Sue', 'Bob', 'Joe', 'Meg', 'Michelle', 'Mike', 'Kate', 'Sue', 'Mike', 'Meg', 'Joe']
roster.length
roster[0]
roster[roster.length - 1]
roster.slice(1, 4)
uniqueNames = new Set(roster)
uniqueNames.size
uniqueNames.has('Sue')
uniqueNames.has('Brad')
{
const classes = new Set();
classes.add('Information Visualization');
classes.add('Algorithms');
classes.add('Machine Learning');
classes.delete('Algorithms');
return classes;
}
stringToInt = ({
'one': 1,
'two': 2,
'three': 3
})
stringToInt.one
stringToInt['one']
stringToInt.hasOwnProperty('two')
stringToInt.hasOwnProperty('four')
stringToInt['four']
Object.fromEntries([
['one', 1],
['two', 2],
['three', 3],
])
Object.entries(stringToInt)
{
const nameToScore = {};
nameToScore['Tim'] = 100;
nameToScore['Becky'] = 95;
nameToScore.Jill = 90;
nameToScore.Ben = 85;
delete nameToScore.Becky;
delete nameToScore['Tim'];
return nameToScore;
}
nameToAge = new Map([
['Bob', 20],
['Sue', 25],
['Joe', 30],
['Jen', 35]
])
new Map(Object.entries(stringToInt))
nameToAge.has('Jen')
nameToAge.has('Ted')
nameToAge.get('Jen')
nameToAge.get('')
{
const nameToScore = new Map();
nameToScore.set('Tim', 100);
nameToScore.set('Becky', 95);
nameToScore.set('Jill', 90);
nameToScore.set('Ben', 85);
nameToScore.delete('Becky');
nameToScore.delete('Tim');
return nameToScore;
}
Array.from(nameToAge)
Object.fromEntries(Array.from(nameToAge))
function greeting(name) {
return `Hello, ${name}!`;
}
greeting('Dan')
farewell = name => `Good bye, ${name}!`
farewell('Dan')
exponent = (base, power) => base ** power
exponent(3, 2)
double = num => {
const value = num * 2;
return `${num} doubled is ${value}`;
}
double(10)
makePerson = (name, age) => ({
name: name,
age: age
})
makePerson('Jill', 30)
makePerson2 = (name, age) => ({
name,
age
})
makePerson2('Jill', 30)
makePerson3 = (name, age) => {
return { name, age };
}
makePerson3('Jill', 30)
nameToAge
Array.from(nameToAge)
Array.from(nameToAge, pair => pair)
Array.from(nameToAge, pair => `${pair[0]} is ${pair[1]} years old.`)
Array.from(nameToAge, pair => ({ name: pair[0], age: pair[1] }) )
Array.from(nameToAge, pair => ({ name: pair[0], age: pair[1] }) )
Array.from(nameToAge, ([name, age]) => ({ name: name, age: age}))
Array.from(nameToAge, ([name, age]) => ({ name, age }))
Array.from(nameToAge, function(pair) {
return {
name: pair[0],
age: pair[1]
};
})
function personToString1(person) {
return `${person.name} is ${person.age} years old and attends ${person.school}.`;
}
function personToString2({ name, age, school }) {
return `${name} is ${age} years old and attends ${school}.`;
}
person = ({ name: 'Chris', age: 22, school: 'NYU'})
personToString1(person)
personToString2(person)
{
const coordinate = [10, 20];
const [x, y] = coordinate;
return x + y;
}
{
const coordinate = { x: 10, y: 20 };
const {x, y} = coordinate;
return x + y;
}
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.
