Published
Edited
Oct 28, 2019
1 star
function createPerson() {
// We create an object with two properties: name and age with their respective values.
return {name: 'Ashanti', age: 30};
}
createPerson();
function createLocation() {
// We usually indent (add spaces before a line) the elements inside the {}.
// This makes it visually obvious where the object begins and where it ends.
return {
temperature: 70, // Fahrenheit
// Values can be of any type, including arrays.
coordinates: [37.175739, -122.234998],
// We can also have a nested objects as properties.
place: {
name: 'Big Basin Redwoods State Park',
// Note that we use camelCase if we have multiple words since spaces aren't allowed.
streetAddress: '21600 Big Basin Way, Boulder Creek, CA 95006',
// If we *really* want spaces or other characters, we can also quote them like strings.
// This is not recommended in general.
'phone #': '(831) 338-8861',
}, // note the "trailing comma" after the last property :)
};
}
createLocation();
// >> Change it to `object.duration` and see what happens in the cell below.
// >> Try getting a property that doesn't exist and see what happens.
function getPropertyFromObject(object) {
return object.plant;
}
getPropertyFromObject({plant: 'Tomato', duration: 'perennial'});
function getPropertyFromObjectByName(object, property) {
return object[property];
}
// The function call is getting cluttered, so it makes it easier to
// read if we break it into multiple lines.
// >> Change the property to 'duration' and see what happens.
getPropertyFromObjectByName(
{plant: 'Tomato', duration: 'perennial'},
'plant',
);
// >> Change the property to `object.duration` and see what happens in the cell below.
function setPropertyOfObject(object, value) {
object.plant = value;
return object;
}
setPropertyOfObject({plant: 'Tomato', duration: 'perennial'}, 'Potato');
function setPropertyOfObjectByName(object, property, value) {
object[property] = value;
return object;
}
setPropertyOfObjectByName(
{plant: 'Tomato', duration: 'perennial'},
'plant',
'Potato',
);
function setNewPropertyToObject(object) {
object.icon = '🍅';
return object;
}
setNewPropertyToObject({plant: 'Tomato', duration: 'perennial'});
function deletePropertyFromObject(object) {
delete object.icon;
return object;
}
deletePropertyFromObject(
{icon: '🍅', plant: 'Tomato', duration: 'perennial'},
'icon',
);
// We define a function that returns an array.
function createBasicArray() {
// Each element in an array can be any expression.
return [1, 1, 1, 2, 1+2];
}
createBasicArray();
function createStringsArray() {
// We usually indent (add spaces before a line) the elements inside the [].
// This makes it visually obvious where the array begins and where it ends.
return [
'Text can get long...',
'All these text elements are indented 2 spaces with respect to the start and end of the list',
'Note the "trailing comma" at the end of this line :)',
];
}
createStringsArray();
function lengthOfArray(array) {
return array.length;
}
// >> Add 'D' to the array like `['A', 'B', 'C', 'D']` and see what happens.
lengthOfArray(['A', 'B', 'C']);
// Remember that the `index` goes from 0 to `array.length-1`.
function getElementFromArray(array, index) {
return array[index];
}
// >> Change the index to 2 and see what happens.
// >> Change the index to -2 and see what happens.
getElementFromArray(['A', 'B', 'C'], 0);
function setElementOfArray(array, index, value) {
array[index] = value;
return array;
}
setElementOfArray(['A', 'B', 'C'], 0, ':)');
function appendElementIntoArray(array, value) {
array.push(value);
return array;
}
// >> Change the `value` from 'D' to 'X' and see what happens.
appendElementIntoArray(['A', 'B', 'C'], 'D');
function insertElementAtTheBeginningOfArray(array, value) {
array.unshift(value);
return array;
}
insertElementAtTheBeginningOfArray(['A', 'B', 'C'], ':D');
function deleteFromEndOfArray(array) {
array.pop();
return array;
}
deleteFromEndOfArray([1, 2, 3])
function deleteFromBeginningOfArray(array) {
array.shift();
return array;
}
deleteFromBeginningOfArray([1, 2, 3]);
function sortArray(array) {
// Note that `array.sort()` modifies the original array, it's an in-place operation.
array.sort();
return array;
}
sortArray([
'Tomato',
'Strawberry',
'Potato',
'Eggplant',
'Carrot',
]);
// We define a function that returns a set.
function createBasicSet() {
// We have to explicitly create a new Set object.
// Each element in a set can be any expression.
// Note that duplicated elements appear only once in the Set.
return new Set([1, 1, 1, 2, 1+2]);
}
createBasicSet();
function sizeOfSet(set) {
return set.size;
}
// >> Add 'D' to the array like `Set(['A', 'B', 'C', 'D'])` and see what happens.
sizeOfSet(new Set(['A', 'B', 'C']));
function setContainsElement(set, value) {
return set.has(value);
}
// >> Change the value from 'B' to 'X' see if the set contains 'X' and see what happens.
setContainsElement(new Set(['A', 'B', 'C']), 'B');
function addElementToSet(set, value) {
set.add(value);
return set;
}
addElementToSet(new Set(['A', 'B', 'C']), 'D');
function deleteElementFromSet(set, value) {
set.delete(value);
return set;
}
deleteElementFromSet(new Set(['A', 'B', 'C']), 'C');
function setToArray(set) {
return Array.from(set.values());
}
setToArray(new Set(['A', 'B', 'C']));
function createBasicMap() {
// Note that only the *latest* duplicated keys are kept.
return new Map([
['🍓', 'Strawberry'],
['🥕', 'Carrot'],
['🍆', 'Eggplant'],
['🍅', 'Tomato'],
['🥔', 'Previous duplicated keys are ignored'],
['🥔', 'Potato'],
]);
}
createBasicMap();
function sizeOfMap(map) {
return map.size;
}
sizeOfMap(new Map([
['🍓', 'Strawberry'],
['🥕', 'Carrot'],
['🍆', 'Eggplant'],
['🍅', 'Tomato'],
['🥔', 'Potato'],
]));
function mapContainsKey(map, key) {
return map.has(key);
}
// >> Change the key from '🥕' to 'X' and see what happens.
mapContainsKey(
new Map([
['🍓', 'Strawberry'],
['🥕', 'Carrot'],
['🍆', 'Eggplant'],
['🍅', 'Tomato'],
['🥔', 'Potato'],
]),
'🥕', // the key we're looking for
);
function getKeysValueFromMap(map, key) {
return map.get(key);
}
// >> Change the key from '🥕' to 'X' and see what happens.
getKeysValueFromMap(
new Map([
['🍓', 'Strawberry'],
['🥕', 'Carrot'],
['🍆', 'Eggplant'],
['🍅', 'Tomato'],
['🥔', 'Potato'],
]),
'🥕', // the key we're looking for
);
function setKeyValuePairInMap(map, key, value) {
map.set(key, value);
return map;
}
// >> Change the key from '🥕' to 'X' and see what happens.
setKeyValuePairInMap(
new Map([
['🍓', 'Strawberry'],
['🥕', 'Carrot'],
['🍆', 'Eggplant'],
['🍅', 'Tomato'],
['🥔', 'Potato'],
]),
'🥕', // key
'CARROT', // value
);
function deleteElementFromMap(set, value) {
set.delete(value);
return set;
}
deleteElementFromMap(
new Map([
['🍓', 'Strawberry'],
['🥕', 'Carrot'],
['🍆', 'Eggplant'],
['🍅', 'Tomato'],
['🥔', 'Potato'],
]),
'🥕', // key from the key-value pair entry we want to delete
);
// To get an Array from the Map's keys.
function mapKeysToArray(map) {
return Array.from(map.keys());
}
mapKeysToArray(new Map([
['🍓', 'Strawberry'],
['🥕', 'Carrot'],
['🍆', 'Eggplant'],
['🍅', 'Tomato'],
['🥔', 'Potato'],
]));
// To get an Array from the Map's values.
function mapValuesToArray(map) {
return Array.from(map.values());
}
mapValuesToArray(new Map([
['🍓', 'Strawberry'],
['🥕', 'Carrot'],
['🍆', 'Eggplant'],
['🍅', 'Tomato'],
['🥔', 'Potato'],
]));
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.
