At program load, you have three string constants, 'foo', 'bar', and 'baz'.
At 1, 'str' becomes a pointer to the string constant 'foo'.
At 2, 'str' becomes a pointer to a string 'foobar'. Memory is allocated to store this string.
At 3, 'str' becomes a pointer to a stinrg 'foobarbaz'. Memory is allocated to store this string.
Now consider the following:
1: var str = ['foo', 'bar', 'baz'].join('');
At program load, you have three string constants, 'foo', 'bar', and 'baz'.
At 1, 'str' becomes a pointer to the string constant 'foobarbaz'.
In the array concatenation, the JS interpreter can create a single string buffer large enough to contain the contents of each array element and the separator string * N - 1 (where N is the number of elements), and return a pointer.
Once you have a large number of elements, or are joining large strings, the performance difference (especially regarding garbage collection) could matter.
You'll be surprised, but my implementation is, roughly speaking, 10 (Chrome) to 100 (Safari) to 200 (Firefox) times faster [0], depending on the browser!
Joining an array of strings is sometimes better than concatenating a string in place, yes.
Consider the following:
At program load, you have three string constants, 'foo', 'bar', and 'baz'. At 1, 'str' becomes a pointer to the string constant 'foo'. At 2, 'str' becomes a pointer to a string 'foobar'. Memory is allocated to store this string. At 3, 'str' becomes a pointer to a stinrg 'foobarbaz'. Memory is allocated to store this string.
Now consider the following:
At program load, you have three string constants, 'foo', 'bar', and 'baz'. At 1, 'str' becomes a pointer to the string constant 'foobarbaz'. In the array concatenation, the JS interpreter can create a single string buffer large enough to contain the contents of each array element and the separator string * N - 1 (where N is the number of elements), and return a pointer.
Once you have a large number of elements, or are joining large strings, the performance difference (especially regarding garbage collection) could matter.
You'll be surprised, but my implementation is, roughly speaking, 10 (Chrome) to 100 (Safari) to 200 (Firefox) times faster [0], depending on the browser!
[0]: https://jsfiddle.net/nikolay/Lgshxrk8/
I guess I'm also as guilty of looking at input/output rather than implementation here.
Here's a benchmark [0]!
[0]: https://jsfiddle.net/nikolay/Lgshxrk8/