Define an array with first element empty in JS [closed]

Question

I saw there is an array was define as [, el1, el2], I never seen this way to define an array. If I define like this way, is means the first element is undefine?

const targetItems = [1, 2, 3, a, b, c].map( items=>{  
    const matches = itmes.match([a-z])
    const [, targetItems , remainItems] = matches
})

In this case, matches should be[a, b, c], but what the final array should look like?

Answer 1

The line

const [, targetItems, remainItems] = matches

does not create (or "define") an array. It destructures an array into individual variables (well, constants in this case). It's equivalent to:

const targetItems = matches[1];
const remainItems = matches[2];

Since there's no identifier name in the first position (after the [ and before the ,), the first entry (matches[0]) isn't stored anywhere.

This is called array destructuring. (JavaScript also has object destructuring.)

...what the final array should look like?

In that code, targetItems will be a six-entry array with all entries containing the value undefined because the map callback never returns a value, so calling it results in undefined. The callback should use return to return a value (or use the concise form of an arrow function with its implicit return, but it can't do that with statements in it).

As ZER0 points out, though, it is valid in modern JavaScript to leave out entries in an array initializer:

const a = [ , "one", "two", , "four"];
console.log(a.length); // 5
console.log(a[0]);     // undefined
console.log(0 in a);   // false (because there's no entry at all)
console.log(a[1])      // "one"
console.log(1 in a);   // true

That's not what the code in the question is doing, but one of the great things about destructuring is that its syntax is that array destructuring syntax is exactly the same as array initializer ("literal") syntax, and object destructuring syntax is exactly the same as object initializer ("literal") syntax. It's just that when it's on the right-hand side of an assignment (or in a parameter list), it's destructuring an existing array/object rather than creating one.

---

This line is highly suspect:

const matches = itmes.match([a-z])

It expects there to be two in-scope identifiers, a and z, and then it subtracts z from a and uses the resulting value to create an array, then passes that array into match on itmes (sic). I assume that line's gotten garbled at some point...

Answer 2

This is a destructuring assignment is not an array declaration. This code:

 const [, targetItems , remainItems] = matches

Is equivalent to:

 const targetItems = matches[1]
 const remainItems = matches[2]

You're basically create two variables binding them to the value of the second and third element in the array. The comma is used so you can skip the element you're not interested. You can also use the spread syntax, so for example:

const [, x, , y, ...end] = ['a','b','c','d','e', 'f']

console.log(x) // "b"
console.log(y) // "d"
console.log(end) // ["e", "f"]

Said that, you can definitely also create arrays with empty slots:

const arr = [, 10];

In this case, matches should be[a, b, c], but what the final array should look like?

In the code you posted there is no return for the array function (that use brackets so the statement is needed) therefore the array would be mapped to undefined for each element.

Update

const matches = itmes.match([a-z])

Assuming itmes is a typo for items, I would also assume that items.match([a-z]) is actually items.match(/[a-z]/) since it wouldn't make sense otherwise – match takes a regexp as argument, even with type coercion it would make less sense the code comparing to a regexp typo.

However, even in that case the code won't work, since match would returns just one element, makes the whole destructuring useless – the only element returned is the one discarded. Plus, it would returns only one letter.

I believe the original code would be slightly different (e.g. having a global flag for the regexp, and / or some quantifiers, such "+"); so it's hard to figure out what would be the end results from the code provided.