James Sinclair
@jrsinclair.bsky.social
I type for a living. Sometimes code, sometimes not.
The second, dropWhile(), does the opposite. It traverses your array and ignores items until a predicate returns false. Then it will give you the rest of the array.
![Screenshot of some JavaScript code. The code is as follows:
const dropWhile = (pred, arr) => {
const idx = arr.findIndex(x => !pred(x));
return arr.slice(idx);
}
console.log(dropWhile(isVowel, ['a', 'e', 'i', 'o', 'u', 'b']));
// 🪵 ['b']](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lndfplsnmjbsidk3blenqgkb/bafkreicjcrec2nr7dkdod4uti7ug5ao6q37famzhpgiyrdt7b3jy2xcbla@jpeg)
April 1, 2025 at 3:24 AM
The second, dropWhile(), does the opposite. It traverses your array and ignores items until a predicate returns false. Then it will give you the rest of the array.
The first, takeWhile(), traverses your array and keeps adding items to a new array until a predicate returns false.
![Screenshot of JavaScript code. The code is as follows:
const isVowel = (c) => ['a', 'e', 'i', 'o', 'u'].includes(c);
const takeWhile = (pred, arr) => {
const idx = arr.findIndex(x => !pred(x));
return arr.slice(0, idx);
}
console.log(takeWhile(isVowel, ['a', 'e', 'i', 'o', 'u', 'b']));
// 🪵 ['a', 'e', 'i', 'o', 'u']](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lndfplsnmjbsidk3blenqgkb/bafkreiavgpbbflmva7aoc72nujuhpafdcfb6chksfbfgljerlw7qhn6z6e@jpeg)
April 1, 2025 at 3:24 AM
The first, takeWhile(), traverses your array and keeps adding items to a new array until a predicate returns false.
In some ways, this is so obvious it shouldn't need stating. But it does. And the tension is real. We want our code to be elegant, simple, concise. Yet, we rarely trade that off against the complexity that elegance creates in the interfaces (user interfaces and APIs) we develop.
March 30, 2025 at 9:34 PM
In some ways, this is so obvious it shouldn't need stating. But it does. And the tension is real. We want our code to be elegant, simple, concise. Yet, we rarely trade that off against the complexity that elegance creates in the interfaces (user interfaces and APIs) we develop.
All we've really done with the third option, though, is re-implement the Set structure from scratch. So, we might as well use that. The most efficient option also happens to be the most concise.
![// With our Map-based approach, we essentially reimplemented
// the Set data structure. We might as well use the Set
// constructor directly.
const uniq = (xs) => [...new Set(...xs)];
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
console.log(uniq(fruits)); // 🪵 ['apple', 'banana', 'orange']](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lndfplsnmjbsidk3blenqgkb/bafkreibjnuooai7vfnv5om5du3renk242ttxqaz7cek3mtlvlhbgifl3rm@jpeg)
March 26, 2025 at 10:39 PM
All we've really done with the third option, though, is re-implement the Set structure from scratch. So, we might as well use that. The most efficient option also happens to be the most concise.
To avoid traversing the array more than we need to, we can use a Map to keep track of the elements we've seen so far. This way we only traverse the array once. Once we've been through the list, we return the keys of the Map as an array.
![// To avoid traversing the array more than we need to,
// we can use a Map to keep track of the elements we've
// seen so far. This way we only traverse the array once.
const uniq = (xs) => Array.of(
(xs.reduce((m, x) => m.set(x, true), new Map())).keys()
);
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
console.log(uniq(fruits)); // 🪵 ['apple', 'banana', 'orange']](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lndfplsnmjbsidk3blenqgkb/bafkreih4c4op6raiqljh32bkuzowqmi5fwngudq2fe2plrx3zymgy37oem@jpeg)
March 26, 2025 at 10:39 PM
To avoid traversing the array more than we need to, we can use a Map to keep track of the elements we've seen so far. This way we only traverse the array once. Once we've been through the list, we return the keys of the Map as an array.
A (slightly) more efficient approach is to use .indexOf() to check if the current element is the first occurrence of that element in the array. But it still traverses the array many more times than it needs to.
![// A more efficient approach is to use .indexOf() to
// check if the current element is the first occurrence
// of that element in the array.
const uniq = (xs) => xs.filter(
(x, i) => xs.indexOf(x) === i
);
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
console.log(uniq(fruits)); // 🪵 ['apple', 'banana', 'orange']](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lndfplsnmjbsidk3blenqgkb/bafkreiayuxprzrvfyiqtqwg2hokz63idvi4elldzf5wgsh7pfkhj4q42d4@jpeg)
March 26, 2025 at 10:39 PM
A (slightly) more efficient approach is to use .indexOf() to check if the current element is the first occurrence of that element in the array. But it still traverses the array many more times than it needs to.
Our first approach uses a filter and `.includes()`. This is inefficient because it traverses the array multiple times, and creates lots of new intermediate arrays. It works, though.
![// Naïve solution. This is inefficient because it
// traverses the array multiple times, and creates
// lots of new intermediate arrays. It works, though.
const uniq = (xs) => xs.filter(
(x, i) => !xs.slice(i + 1).includes(x)
);
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
console.log(uniq(fruits)); // 🪵 ['apple', 'banana', 'orange']](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lndfplsnmjbsidk3blenqgkb/bafkreih4gbc2aqt5y2s4sqfwiq6zjcdvmyayts7n57gzia4psebqo764ra@jpeg)
March 26, 2025 at 10:39 PM
Our first approach uses a filter and `.includes()`. This is inefficient because it traverses the array multiple times, and creates lots of new intermediate arrays. It works, though.
Did you know that you can use an array tuple in place of a Maybe structure? It elegantly handles empty values using familiar `.map()`, `.flatMap()`, and `.reduce()` methods. I think it's rather neat. Credit goes to @[email protected] for introducing me to the idea.
![Screenshot of a code snippet showing the use of an array tuple as a Maybe construct. Code reads as follows:
// Suppose we want to retreive the weather conditions
// for a given location. Perhaps we've retreived some
// data from a weather API and we need to process it.
const sensors = {
['Dartmoor']: { value: 10, unit: 'C' },
['Baker Street']: { value: 18, unit: 'C' },
['Scotland Yard']: { value: 68, unit: 'F' },
}
const conditions = {
['Dartmoor']: 'Foggy',
['Baker Street']: 'Sunny',
['Scotland Yard']: 'Rainy',
}
const toCelsius = (fahrenheit) => (fahrenheit - 32) * (5 / 9);
// Here we define a function that wraps our value in an
// array if it's not nullish. We can then use .map(),
// .flatMap(), .reduce() etc. to safely handle the
// nullish case.
const maybe = (value) => value == null ? [] : [value];
const getWeather = (location) => maybe(sensors[location])
.map(({unit, value}) => unit === 'F' ? toCelsius(value) : value)
.flatMap(
(temperature) => maybe(conditions[location])
.map((condition) => ({temperature, condition}))
)
.map(({temperature, condition}) => `${location}: ${temperature}°C, ${condition}`)
.reduce((_, x) => x, 'Weather conditions not available');
console.log(getWeather('Dartmoor')); // 🪵 'Dartmoor: 10°C, Foggy'
console.log(getWeather('Scotland Yard')); // 🪵 'Scotland Yard: 20°C, Rainy'
console.log(getWeather('Diogenes Club')); // 🪵 'Weather conditions not available'](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lndfplsnmjbsidk3blenqgkb/bafkreidkwlaoi5rzohmvstbzf55ngxdd7ar7nebajplb27smkifooqyxhq@jpeg)
March 25, 2025 at 9:48 PM
Did you know that you can use an array tuple in place of a Maybe structure? It elegantly handles empty values using familiar `.map()`, `.flatMap()`, and `.reduce()` methods. I think it's rather neat. Credit goes to @[email protected] for introducing me to the idea.
I love this quote from John Ousterhout:
> I have found over and over that specialization leads to complexity; I now think that over-specialization may be the single greatest cause of complexity in software.
On the surface, it appears to contradict YAGNI, but not necessarily.
> I have found over and over that specialization leads to complexity; I now think that over-specialization may be the single greatest cause of complexity in software.
On the surface, it appears to contradict YAGNI, but not necessarily.
March 24, 2025 at 10:07 PM
I love this quote from John Ousterhout:
> I have found over and over that specialization leads to complexity; I now think that over-specialization may be the single greatest cause of complexity in software.
On the surface, it appears to contradict YAGNI, but not necessarily.
> I have found over and over that specialization leads to complexity; I now think that over-specialization may be the single greatest cause of complexity in software.
On the surface, it appears to contradict YAGNI, but not necessarily.
It's old news now, but swapping variables with destructuring still blows my mind every time I see it.
![Screenshot of some JavaScript code showing two variables being swapped using array destructuring. The code reads as follows:
let a = 'left';
let b = 'right';
console.log([a, b]);
// 🪵 ["left", "right"]
// Swap two variables with array destructuring.
[b, a] = [a, b]
console.log([a, b]);
// 🪵 ["right", "left"]](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lndfplsnmjbsidk3blenqgkb/bafkreiewv4l6r2q6x53nf4y4kexsvsr7tuc7l32rcczkvsos5xvc7mmloy@jpeg)
March 23, 2025 at 9:21 PM
It's old news now, but swapping variables with destructuring still blows my mind every time I see it.
I still see lots of people setting default values in JS using the || operator. This is fine if the values you're dealing with are always objects. But if you deal with numbers, booleans or strings, this can be problematic. In most cases, the ?? operator is a better choice.
March 20, 2025 at 10:26 PM
I still see lots of people setting default values in JS using the || operator. This is fine if the values you're dealing with are always objects. But if you deal with numbers, booleans or strings, this can be problematic. In most cases, the ?? operator is a better choice.