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 functionsGetting closureExercise: Closures & CurryingIt's functions all the way downExercise: Function CompositionImmutabilityExercise: Avoiding mutationRecap & takeawaysNext steps
Exercise: Filter, Map, Reduce
wholes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
function filter(predicateFn, array) {
if (length(array) === 0) return [];
const firstItem = head(array);
const filteredFirst = predicateFn(firstItem) ? [firstItem] : [];
return concat(filteredFirst, filter(predicateFn, tail(array)));
}
function isEven(n) {
// TODO your code goes here
}
evens = filter(isEven, wholes)
odds = filter(n => {
// TODO your code goes here
}, wholes)
greaterThanFour = filter(
() => {}, // TODO replace this line
wholes
)
function isPrime(n) {
// TODO your code goes here
}
primes = filter(isPrime, wholes)
function map(fn, array) {
// TODO your code goes here
}
doubled = map(n => n * 2, wholes)
halved = map(n => n / 2, wholes)
fizzBuzz = map(n => {
// TODO your code goes here
}, wholes)
fizzBuzz
function reduce(reducerFn, initialValue, array) {
if (length(array) === 0) return initialValue;
const newInitialValue = reducerFn(initialValue, head(array));
return reduce(reducerFn, newInitialValue, tail(array));
}
sum = reduce(
(accumulator, value) => {
// TODO your code here
},
0,
wholes
)
max = reduce(
() => {}, // TODO replace this reducerFn
undefined, // TODO replace this initialValue
[7, 1, 3, 5, 6, 2, 8, 10, 0, 4, 9]
)
// Concatenate two arrays into a new single array
function concat(array1, array2) {
return array1.concat(array2);
}
// Return the number of items in an array
function length(array) {
return array.length;
}
// Return the first item in an array
function head(array) {
return array[0];
}
// Return the rest of an array after the first item
function tail(array) {
return array.slice(1);
}
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.
