Witam na mojej prywatnej stronie internetowej!
[If this is all Polish to you, click here: English]
Uwaga: z oczywistych powodów nie mogę zagwarantować swojej nieomylności, choć staram się o zgodność tego, co piszę, z Prawdą. Jest również oczywiste, że nie gwarantuję takiej zgodności w przypadku komentarzy. Umieszczenie linku do strony spoza niniejszego serwisu nie musi oznaczać, że podzielam poglądy autora tej strony, a jedynie, że uważam ją za wartościową z takich czy innych powodów.
Marcin ‘mbork’ Borkowski
Sometimes you need to create an array with the sequence of numbers, say from 0 to 9. Popular libraries like Lodash or Ramda have a function for that (in both cases, it’s called range), but how to do that concisely in vanilla JS? In case you’re wondering, both Lodash and Ramda use a while loop for this task; can we do better? (In this case “better” does not necessarily mean “faster”, but “shorter”, and – let’s be honest — “in a more clever/hackish/crazy way”.) It turns out that the answer is yes. The idea is to use Array.from with an array-like object possessing only the length property. Array.from has an optional parameter – a mapping function, which is called for every element of the “source array”. Of course, in the case of the {length: ...} object there are no elements, so the argument to the mapping function is effectively undefined. However, this function also receives a second argument, which is the index of the element in the “source array” (much like in the regular Array.prototype.map). This means that we can do this:
Array.from({length: 8}, (_, i) => i)
Interestingly, unlike the regular map, the mapping function in Array.from does not receive the whole “source array” as the third argument. Go figure.
Of course, it’s still possible to use this trick to generate sequences not starting at 0 and with step different than 1 – but the code becomes longer. Here is a snippet generating the sequence of all two-digit odd numbers:
Array.from({length: 45}, (_, i) => 11 + i * 2)
Is this all Array.from can do? Of course not. Another use-case is deduplication (via a set):
Array.from(new Set([1, 1, 2, 3, 5, 8])) // => [ 1, 2, 3, 5, 8 ]
Yet another is splitting strings into individual characters. A popular way to achieve that is to say string.split(''), but this won’t work with certain Unicode characters:
'I🧡JS🤣'.split('') // => [ 'I', '\ud83e', '\udde1', 'J', 'S', '\ud83e', '\udd23' ]
Array.from('I🧡JS🤣') // => [ 'I', '🧡', 'J', 'S', '🤣' ]
In this case, Array.from is not indispensable – a similar effect can be achieved with the spread operator:
[...'I🧡JS🤣'] // => [ 'I', '🧡', 'J', 'S', '🤣' ]
but you could argue that Array.from is slightly more idiomatic since it makes the intent of “converting into an array” more explicit.
That’s it for today – see you next week!