Javascript new Array and join() method

Question

Inspired by this popular speech I wanted to figure out some issue related to creating arrays. Let's say I am creating new array with:

Array(3)

In console I am getting:

[undefined, undefined, undefined]

Which is pretty obvious. Let's say I am doing joining on that array:

Array(3).join()

As a response I am getting:

",,"

Which is pretty understandable as well, because these are three empty strings, separated by commas, I suppose. But when I am trying to do:

Array(3).join("lorem")

I am getting string with only two repeat of ”lorem”:

"loremlorem"

Why there are two, not three repeats of that word?

Answer 1

Join takes a separator. "lorem" has replaced the commas that were there before.

Answer 2

join joins the elements together, using what was passed as a joiner. So you have three empty strings "surrounding" the lorems:

|lorem|lorem|

It might be a little more obvious if you don't use an empty array:

var arr = [1, 2, 3, 4, 5]; // Like Array(5), except not sparse

arr.join('-and-'); // 1-and-2-and-3-and-4-and-5

And your first example join output, by the way, is incorrect. It should be ,, or ",,". (Depends on the output format.)

Answer 3

Join combines the elements in an array with the specified delimiter.

So, since there are 3 elements, you only need 2 delimiters (between 1st and 2nd, and between 2nd and 3rd).

var a = [1,2,3];
a.join(','); //1,2,3
a.join('test'); // 1test2test3

Answer 4

Have a look to the join documentation.

What you're passing to the join function will be used as separator between the elements of the array. When you declare an array with Array(3), you're creating an array with three elements. The join method inserts your separator between those elements and so you will see only two "lorem".

Actually, what you see is: blank lorem blank lorem blank. Where blank is the empty elements of the array.

Try to do the following:

var fruits = ["banana", "orange", "apple"]
fruits.join("lorem")

It will print

bananaloremorangeloremapple

Answer 5

If you have an Array of 3 members, the .join is the filler in between the members, so there should only be two join strings.

Therefore your second output is correct.

Your first output using .join(), seems like a display bug or a misrepresentation of your testing code.

The default value for .join() is a ",", so this:

new Array(3).join();

should give you this:

",,"

The output that you show:

[, ,]

will more likely come from just typing new Array(3) in the console without the .join().