Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Functional JavaScript First StepsWhat is functional programming?Exercise: Pure FunctionsStaying out of the loop with recursionExercise: Iteration vs. RecursionFlying first class with higher-order functionsExercise: Filter, Map, ReduceGetting closureExercise: Closures & CurryingIt's functions all the way downExercise: Function CompositionImmutabilityRecap & takeawaysNext steps
Exercise: Avoiding mutation
// instead of myArray.push(element)
function push(element, array) {
// TODO return a new array with the new element at the end
}
prePush = [1, 2, 3]
postPush = push(4, prePush)
// instead of myArray[index] = value
function update(index, value, array) {
// TODO return a new copy of the array with the given value at index
}
preUpdate = ["spellling", "is", "hard"]
postUpdate = update(0, "spelling", preUpdate)
// instead of myArray.pop();
function pop(array) {
// TODO return a new array with the last old element removed
}
prePop = [1, 2, 3, 'popMe']
postPop = pop(prePop)
Immutable = require('immutable')
immutableList = Immutable.List([1, 2, 3])
newList = immutableList.push(4)
immutableList.size
newList.size
immutableMap = Immutable.Map({ a: 1, b: 2, c: 3 })
newMap = immutableMap.set('c', 4)
newerMap = newMap.set('d', 5)
immutableMap.get('c')
newMap.get('c')
newMap.get('d')
newerMap.get('d')
immer = import("https://cdn.jsdelivr.net/npm/immer@latest/+esm")
immer.produce
regularJSArray = [1, 2, 3]
newArray = immer.produce(regularJSArray, draft => {
draft.push(4);
})
regularJSArray.length
newArray.length
newerArray = immer.produce(newArray, draft => {
draft[0] = 5;
})
newerArray[0]
newArray[0]
regularJSObject = ({ a: 1, b: 2, c: 3 }) // parentheses required when creating objects like this in Observable
newObject = immer.produce(regularJSObject, draft => {
draft.c = 4;
})
newObject.c
regularJSObject.c
newerObject = immer.produce(newObject, draft => {
draft.d = 5;
})
newerObject.d
newObject.d
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.
