How to extend the javascript Array Class?

Question

I am trying to extend the Array class to add a Sum method to it. This is my code below, what am I doing wrong?

Class tipArray extends Array{
    sum(values) {
        for(i in values) {
            total +=i;
        }
    }
}

var testArray = new tipArray();
testArray = [1,2,3,4];
console.log(testArray.sum());

Expected output = 10

sorry, that was just a typo. I just updated the code. @Brian — Adas, Oct 03 '18 at 19:33
First, what Brian said. Second, `class`, not `Class`. Third, you literally redefined testArray in the next line. Fourth, read about constructors. — rmn, Oct 03 '18 at 19:33
And going by the line `testArray = [1,2,3,4]`, you're possibly looking for [prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype). — rmn, Oct 03 '18 at 19:35
If it’s a sum you’re looking for you should try ‘.reduce’ method instead of extending Array — darklightcode, Oct 03 '18 at 19:35
Does this answer your question? [Ways to extend Array object in javascript](https://stackoverflow.com/questions/11337849/ways-to-extend-array-object-in-javascript) — handle, Jan 13 '23 at 09:04

Mark · Accepted Answer · 2018-10-03T19:41:27.810

Start by imagining how you would sum an array (maybe something with reduce).
Turn that into a function.
Add that as a method on your class. You can use this to refer to the array.
(optional) ask yourself if you really need a subclass instead of a function that accepts an array.

class tipArray extends Array{
    sum() {
        // Consider making sure the array contains items where sum makes sense here.
        return this.reduce((sum, current) => sum + current)
    }
}

var testArray = new tipArray(1,2,3,4);
console.log(testArray.sum());

// add another element and take another sum
testArray.push(10)
console.log(testArray.sum());

Another solution could be... Array.prototype.sum=function(that you created in side class in the example) — Abhishek Singh, Oct 03 '18 at 19:39

score 1 · Answer 2 · answered Oct 03 '18 at 19:40

class tipArray extends Array {
    sum() {
        let val = 0;

        for (let i = 0; i < this.length; i++) {
            val += this[i];
        }

        return val;
    }
}

var testArray = new tipArray(1, 2, 3, 4);
console.log(testArray.sum());
console.log(testArray.length);

Inside of the sum method, you refer to the array via this.

score 0 · Answer 3 · edited Jan 29 '23 at 03:58

This seems to me more like asking for the solution of a homework after doing half the research on how to code in JavaScript.

Keywords, like class in JavaScript needs to be lowercase.
You didn't declare any of the variables. For example in the for loop you keep adding i to total, but what was the initial value of total? Declare the total variable before the for loop as let total = 0
The loop index i also needs to be declared as for (let i in values) {
The sum function doesn't return anything as you don't have any return statements. In this case JavaScript returns undefined and that is what you see in your console log. Add return total after your for loop so that the function would return something.
No need to use reduce here or extending array prototype as the issue isn't because for loop not being suitable to calculate sums.
You create a new instance of your own array class only to override it with a simple array at the next line with testArray = [1,2,3,4], as that line is the same as testArray = new Array(1, 2, 3, 4);. Write either var testArray = new tipArray(1, 2, 3, 4) or testArray.push(1, 2, 3, 4).

In essence the solution should be what Geuis wrote.

How to extend the javascript Array Class?

3 Answers3