Published
Edited
Nov 5, 2019
7 stars
// Apply the `trim` function to every element in `array`.
// >> Remove the `.trim()` on the function applied by `array.map()` and see what happens.
function trimWhitespacesWithFunction(array) {
// We can also define unnamed functions,
// also known as lambda functions or anonymous functions.
return array.map(function(text) {
return text.trim();
});
}
trimWhitespacesWithArrowFunction([
' Sometimes ',
' you have ',
' accidental whitespaces ',
]);
// This can be greatly simplified with arrow functions,
// a very useful and common practice.
function trimWhitespacesWithArrowFunction(array) {
return array.map(text => text.trim());
}
trimWhitespacesWithArrowFunction([
' Sometimes ',
' you have ',
' accidental whitespaces ',
]);
// Replace `flatMap` with `map` and see what happens.
function splitCommaSeparatedValues(array) {
return array.flatMap(text => text.split(','));
}
splitCommaSeparatedValues([
'🍓,🥕,🍆',
'🍅,🥔',
]);
// Change 'perennial' with 'annual' and see what happens.
function filterPerennials(array) {
return array.filter(plant => plant.duration == 'perennial');
}
filterPerennials([
{icon: '🍓', name: 'Strawberry', duration: 'perennial'},
{icon: '🥕', name: 'Carrot', duration: 'biennial'},
{icon: '🍆', name: 'Eggplant', duration: 'perennial'},
{icon: '🍅', name: 'Tomato', duration: 'annual'},
{icon: '🥔', name: 'Potato', duration: 'perennial'},
]);
function getMaximumOfArray(array) {
// Note that the reducer function takes two inputs now,
// the accumulator and the new value to compare.
return array.reduce((accumulator, value) => accumulator + value);
}
// Getting the minimum is very similar.
getMaximumOfArray([1, 4, 2, 3]);
function getAverageOfArray(array) {
let result = array.reduce(
// Our reducer function returns an accumulator object with the sum and counts.
// Note the extra parentheses surrounding the return object so the
// arrow function doesn't think the curly braces mean the body of the function,
// but rather an expression with a single object value.
(accumulator, value) => ({
sum: accumulator.sum + value,
count: accumulator.count + 1,
}),
// Since the accumulator is no longer the same as the elements of the array,
// it's an object instead of a number, we have to initialize it explicitly.
{sum: 0.0, count: 0},
);
// Finally divide the sum by the count to get the average.
return result.sum / result.count;
}
getAverageOfArray([1, 2, 3, 4]);
function getAverageOfArraySimple(array) {
let sum = array.reduce((accumulator, value) => accumulator + value);
return sum / array.length;
}
getAverageOfArraySimple([1, 2, 3, 4]);
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.
