I am a bit new to Javascript and I would like to know the effective difference between Array.from(string) and string.split('').
const word = 'test';
const arrayFrom = Array.from(word);
const stringSplit = word.split('');
console.log(arrayFrom);
console.log(stringSplit);
In the script above, both logs are exactly the same:
[ 't', 'e', 's', 't' ]
[ 't', 'e', 's', 't' ]
Knowing that, which should I use? Is there any performance advance in using any of them?
Well, a quick profile in Node will tell you that word.split('') is the fastest, followed by [...word], then Array.from(word). This was my benchmark:
const word = '1783638745638476548765873hdsgkfj';
console.time('arrayFrom');
for (let i = 0; i < 10000; i++) {
const arrayFrom = Array.from(word);
}
console.timeEnd('arrayFrom');
console.time('split');
for (let i = 0; i < 10000; i++) {
const stringSplit = word.split('');
}
console.timeEnd('split');
console.time('spread');
for (let i = 0; i < 10000; i++) {
const spread = [...word];
}
console.timeEnd('spread');And the results:
arrayFrom: 35.401ms
split: 1.349ms
spread: 5.862ms
That said, you generally shouldn't sweat the performance of such a thing unless you are optimising some very critical section of code. It's six of one, half a dozen of the other.
const fromRegex = word.match(/./g); at 2.327ms vs 0.555ms for split(), faster than every other option except split.From the MDN:
Array.from() has an optional parameter mapFn, which allows you to execute a map function on each element of the array (or subclass object) that is being created. More clearly, Array.from(obj, mapFn, thisArg) has the same result as Array.from(obj).map(mapFn, thisArg), except that it does not create an intermediate array. This is especially important for certain array subclasses, like typed arrays, since the intermediate array would necessarily have values truncated to fit into the appropriate type.
Basically, Array.from() has more uses beyond what Array.split does. For your specific case, there is no performance or functional difference.
The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.
The split() method is used to split a string into an array of substrings, and returns the new array.
String.split('') results to be the most performant method.
Check this jsperf benchmark
[...word]? ;)split()