CODEWITHSUNDEEP
javascript
user3885596
user3885596

Reputation:

Mixing parentheses and square brackets in array initialization

The following code snippet assigns some values by mixing parentheses and square brackets without any error, however most of the other combinations (e.g. parentheses inside square brackets) don't work at all.

var myItems = [];
myItems[5] = ("A1", "B1", ["C1","C2","C3"]);

When I print the values, they are exactly the same in two different browsers.

myItems[5]: C1,C2,C3
myItems[5][0]: C1
myItems[5][1]: C2
myItems[5][2]: C3
myItems[5][2][0]: C
myItems[5][2][1]: 3
myItems[5][2][2]: undefined

It seems that only the part inside square brackets is considered. Is this outcome defined by the JavaScript standard (ECMA-262)? Or is it just what the interpreter/engine (Chrome and Firefox in my case) did in the face of an illegal use?

var myItems = [];

//myItems[5] = ["A1", "B1", ["C1","C2","C3"]];
myItems[5] = ("A1", "B1", ["C1","C2","C3"]);

document.getElementById("demo").innerHTML = 
"myItems[5]:       " + myItems[5]       + "<br/>" +
"myItems[5][0]:    " + myItems[5][0]    + "<br/>" +
"myItems[5][1]:    " + myItems[5][1]    + "<br/>" +
"myItems[5][2]:    " + myItems[5][2]    + "<br/>" +
"myItems[5][2][0]: " + myItems[5][2][0] + "<br/>" +
"myItems[5][2][1]: " + myItems[5][2][1] + "<br/>" +
"myItems[5][2][2]: " + myItems[5][2][2] + "<br/>" +
"";
<p id="demo"></p>

EDIT: I know the correct use of brackets (my fiddle already had it), but I'm asking if the outcome is deterministic at such a wrong use. Since the interpreters I've tried don't produce any error and give the same results, I want to know if these results are ensured by the standard and/or all the other interpreters will do the same.

Upvotes: 0

Views: 522

Answers (2)

miken32
miken32

Reputation: 42711

The comma operator , "evaluates each of its operands (from left to right) and returns the value of the last operand." (You can take that quote from Mozilla as gospel, or try to decipher what ECMA has to say on the matter.)

The grouping operator ( ) "controls the precedence of evaluation in expressions," according to Mozilla. (Obligatory link to ECMA.)

In this instance, the grouping operator does essentially nothing, since there is only one expression being grouped. So this is a simple comma-separated list of values, the last one of which is an array. This is what gets assigned.

The comma operator is often seen when assigning variables in bulk, e.g. var foo = 1, bar = 2, baz = 3; The spec states that even though only the last item is returned, each item must be evaluated "because it may have observable side‑effects." In this most common of use cases, the variables each have values assigned to them.

Upvotes: 0

pishpish
pishpish

Reputation: 2614

From MDN on comma operator

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

So

myItems[5] = ("A1", "B1", ["C1","C2","C3"]);

Turns to

myItems[5] = (["C1","C2","C3"]);

Now you've got yourself an array with 6 elements (5x undefined and the array of three strings you assigned at sixth position).

And it is exactly what you're getting printed out.

Upvotes: 3

Related Questions