Missing Bracket After Element List error is thrown when an array is initialized with incorrect syntax, such as a missing closing bracket (
]) or comma (
In this article we’ll explore the
Exception hierarchy, along with a few examples of what might cause
Missing Bracket After Element List errors in your own code. Let’s get crackin’!
The Technical Rundown
Errorobject, or an inherited object therein.
SyntaxErrorobject is inherited from the
Missing Bracket After Element Listerror is a specific type of
When Should You Use It?
To understand what could cause a
Missing Bracket After Element List error, we first need to understand how
Arrays are properly formatted, syntactically, so we can then see how improper syntax would lead to a
Missing Bracket After Element List error.
Arrays are simple lists of data, and can be initialized in a few different ways. Here we use three slightly different methods to create the same five-value
// Inline, with values. var namesA = ['Alice', 'Bob', 'Chris', 'Danielle', 'Elizabeth']; console.log(namesA); // New Array object, with arguments. var namesB = new Array('Alice', 'Bob', 'Chris', 'Danielle', 'Elizabeth'); console.log(namesB); // New Array object. var namesC = new Array(); // Add values via .push() method. namesC.push('Alice'); namesC.push('Bob'); namesC.push('Chris'); namesC.push('Danielle'); namesC.push('Elizabeth'); console.log(namesC);
As expected, the output is three different, yet identical,
Arrays with the same values:
["Alice", "Bob", "Chris", "Danielle", "Elizabeth"] ["Alice", "Bob", "Chris", "Danielle", "Elizabeth"] ["Alice", "Bob", "Chris", "Danielle", "Elizabeth"]
By far, the inline method of creating a new
Array using surrounding brackets (
[ ... ]) is the most popular, and thus, that is where the name of our
Missing Bracket After Element List error comes from.
Let’s take that same initial example above, and see what happens if we neglect the final closing bracket (
// Missing closing bracket. var names = ['Alice', 'Bob', 'Chris', 'Danielle', 'Elizabeth'; console.log(names);
As it happens, the resulting error is slightly different depending on the browser engine:
// CHROME Uncaught SyntaxError: Unexpected token ; // FIREFOX SyntaxError: missing ] after element list
Missing Bracket After Element List error is rather interesting.
Chrome notices that the
Array is being initialized and defined, and it reaches the end of
'Elizabeth' and expects one of a handful of possible characters:
- A comma (
,) to indicate another item in the
- A closing bracket (
]) to indicate the
Arrayinitialization is complete.
- Or, an
operatorof some kind to indicate that additional values (beyond our first
'Elizabeth'string) should be considered as part of this particular
Arrayitem value, such as a plus sign (
+) to concatenate it with another value (
'Elizabeth' + ' Frost').
In this particular case, Chrome sees that the next character is a semicolon (
;), which is not a valid way to complete the initialization of this
Array, and thus it throws an error indicating as such.
'Elizabeth' value, Firefox explicitly tells us that a closing bracket (
]) is what is missing. While the specific
Missing Bracket After Element List error that Firefox reports does inform us that there’s a syntax issue when defining our
Array, it isn’t technically accurate, since another character, besides a closing bracket (
]), could go there and be perfectly valid. In the long run it doesn’t much matter, but these differences are somewhat interesting.
Another potential cause for a
Missing Bracket After Element List error when creating a new
Array is when we’re missing a comma delimiter between multiple values:
// Missing comma between first two values. var names = ['Alice' 'Bob', 'Chris', 'Danielle', 'Elizabeth']; console.log(names);
Just as before, there’s a distinct difference between the various browsers when reporting the
Missing Bracket After Element List error:
// CHROME Uncaught SyntaxError: Unexpected string // FIREFOX SyntaxError: missing ] after element list
Again, Chrome recognizes the subtlety of the syntax a bit more, noticing that there are two strings within the “element” that should represent a single value of our
Array, but there is no
operator to indicate what action to take on both string values (such as concatenating them). Thus, Chrome reports that the second string of
Meanwhile, Firefox once again just throws the
Missing Bracket After Element List error, even though there is a closing bracket (
]) at the end of our