TypeError: this.reduce is not a function

Question

After adding a method to the Array prototype, some other, unrelated script breaks.

• [Opera] Unhandled Error: 'this.reduce' is not a function
• [Firefox] TypeError: this.reduce is not a function

The method itself works ([1,2,3].xintsum() outputs 6 as expected).

// adding a function to the Array prototype
Array.prototype.xintsum = function() { return this.reduce(function(old, add) {return old + add;}, 0); };

// accessing the array in a way that worked before
$(document).ready(function (){
  var some_array = [];
  for (head_n in some_array) {
    var v = some_array[head_n];
    $('<th></th>').text(v);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

This is happening because you are using for..in on an array. You shouldn't be doing that.

When you added Array.prototype.xintsum, you added a xintsum property to every array. So, what happened was, that your for loop iterated over that property of your array.

The value of this property is a function. When you pass a function to .text(), jQuery will call it like this:

v.call(ele, index text);

It's setting this to the element. And well, DOMElements don't have .reduce functions.

You need to loop like this:

for(var i = 0; i < some_array.length; i++){
    var v = some_array[i];
}