Why you should not use Array constructor

JavaScript is very easy to learn but very hard to truly understand. This is because it is filled with mind-mending tweaks and quirks. It is very flexible that you must bend with it. Array constructor is one of them, it is simple but has trap one can easily fall in. So in this post, I’ll explain why you should not use the Array constructor

Check out this new API tool:

POSTly

The Array constructor

We can create arrays in JS by using the Array() with the new keyword. To create an array with elements 99, 88, 77, we will do this:

const arr = new Array(99, 88, 77)

:) arr will hold the elements in an array. 99 becomes the index at 0, 88 at index 1, 77 at index 2.

const arr = new Array(99, 88, 77)
arr[0] // 99
arr[1] // 88
arr[2] // 77

It is the same as doing:

const arr = [99, 88, 77]
arr[0] // 99
arr[1] // 88
arr[2] // 77

What is bad about it?

This works when the argument is > 1element. If we pass one argument, an array will be created with space the size of the argument.

const arr = new Array(9)

This will create an array arr, with space for 9 elements. It will not create an array with element 9.

const arr = new Array(9)
arr // [<9 empty items>]
arr[0] // undefined
arr[1] // undefined
arr[2] // undefined
... // undefined
arr[8] // undefined
arr.length // 9

arr has 9 empty items.

Doing:

const arr = new Array(9)

is the same thing as doing this:

const arr = [ , , , , , , , , ]
arr // [<9 empty items>]
arr[0] // undefined
arr[1] // undefined
arr[2] // undefined
... // undefined
arr[8] // undefined
arr.length // 9

Passing a single argument to new Array() will allocate a space the size of the argument for elements in the array.

For unwary devs, using the Array constructor breaks pattern.

For example, if we have a generic function that creates array from the arguments:

a, b, c => [a, b, c]
a, b => [a, b]
a => [a]
function arrayify(...elems) {
    return new Array(...elems)
}

Side Note: @florianwege taught me this during an argument on this Array constructor in my post 11+ Features of JavaScript you Probably Never Used.

This arrayify function will create an array using the new Array constructor from the arguments passed.

arrayify(1, 2, 3, 4) // [ 1, 2, 3, 4 ]
arrayify(9, 66, 55) // [ 9, 66, 55 ]

This will produce array from the arguments passed but will break if we pass one argument:

arrayify(8) // [ <8 empty items> ]

The best bet is to refactor the arrayify to use array literal:

function arrayify(...elems) {
    return [...elems]
}
arrayify(1, 2, 3, 4) // [ 1, 2, 3, 4 ]
arrayify(9, 66, 55) // [ 9, 66, 55 ]
arrayify(8) // [ 8 ]

With these, we can model our Array constructor to understand more how it works:

function Array(...items) {
    log("Proof our Array constructor is called")
    if (items.length > 1)
        return [...items]
    else if (items.length === 1) {
        const arr = [];
        arr.length = items[0]
        return arr
    } else
        return [...items]
}

See, it checks if the items is greater than 1 it creates an array literal and populates the items’ argument into it. If the item is equal to 1, it creates a new array then uses the length property to allocate space the size of the argument passed. If no item is passed it creates an empty array.

function arrayify(...elems) {
    return new Array(...elems)
}
arrayify(1, 2, 3, 4)
arrayify(9, 66, 55)
arrayify(8)
new Array()
Proof our Array constructor is called
[ 1, 2, 3, 4 ]
Proof our Array constructor is called
[ 9, 66, 55 ]
Proof our Array constructor is called
[ <8 empty items> ]
Proof our Array constructor is called
[]

Conclusion

That’s it, we now understand the underside of using the Array constructor. Passing one argument to the Array constructor causes it to create an array and allocate space for elements in the array the size of the argument.

Advice: Use the Array constructor with care. Know where it can break your design, know where and when to use it perfectly without cost at performance.

Thanks for stopping by my little corner of the web. I think you’ll love my email newsletter about programming advice, tutoring, tech, programming and software development. Just sign up below: