Custom class extending Array without using spread syntax

user_1710523 0
Viewed 356

For a few years now I've been building and using a custom data analysis tool in JavaScript (repo, docs).

One of the changes I've made fairly recently is to use a JavaScript class to extend the native Array type, so I can easily call my custom functions as methods on an array-like object instead of passing them into those functions as an argument without losing the ability to access elements using [] notation.

To do this, I've been using the following code:

class AnalyserRows extends Array {
    constructor(sourceArray) {
        super(...sourceArray);
    }

    // ...
}

This has worked fine for a while, but recently I tried to load a particularly large set of data and I ran into a problem. I was trying to create an AnalyserRows object with about 66,000 elements, but Chrome throws this error:

Uncaught RangeError: Maximum call stack size exceeded

In my searching, I've found this explanation of the problem: RangeError - Maximum Call Stack Size Exceeded Error Using Spread Operator in Node.js / Javascript

The spread operator (and Array.assign) loads the entire source array onto the stack, then pushes it onto the destination array. Once the source array exceeds 125,052, it causes a Stack Overflow / Range Error.

So now my problem is how can I call super inside my custom class's constructor and pass through each element of the source array without using the spread operator?

It's possible to create an Array with this many elements without any real problem, so I feel like it should be possible to do the same with a class extending Array like this. But without using the spread operator or making some other change that will prevent me from using some of the syntax I've been using, I can't see how to do it.

spread-syntax es6-class javascript
1 Answers

The Array constructor has two forms: you can pass it all the array elements, or you can pass it the size of the array. You could try using the second form, then copying the array elements in your constructor.

class AnalyserRows extends Array {
    constructor(sourceArray) {
        super(sourceArray.length);
        for (let i = 0; i < sourceArray.length; i++) {
            this[i] = sourceArray[i];
        }
    }

    // ...
}

However, this may be very slow for huge arrays. From the quote you gave, it sounds like any of the built-in shortcuts will run into the stack overflow problem.

user_14918950
Related