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>

What is `this` supposed to reference? Are you sure it's an `array`? — Sterling Archer, Jan 14 '14 at 19:08
In Chrome, I get `Uncaught TypeError: Object # has no method 'reduce'`. — gen_Eric, Jan 14 '14 at 19:08

score 5 · Accepted Answer · answered Jan 14 '14 at 19:17

5

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];
}

answered Jan 14 '14 at 19:17

gen_Eric

223,194
41
299
337

Or use `some_array.forEach()` ;) – Scimonster Jan 14 '14 at 19:34
Or you can use for...of from ES6. This loop addresses the problem of looping over non-element properties. – prgmrDev Dec 06 '17 at 09:05

score 1 · Answer 2 · answered Jan 14 '14 at 19:17

This code:

var v = some_array[head_n];
$('<th></th>').text(v);

when it gets to xintsum is the same as this:

$('<th></th>').text(function() { 
    return this.reduce(function(old, add) {
        return old + add;
    }, 0); 
});

When a function is passed to text, the function is called once for each element contained in the jquery object which it is called on. For each call this refers to that dom element. In this case, the th you have created. Therefore, the error message is letting you know that th has no such function.

score 0 · Answer 3 · answered Jan 14 '14 at 19:12

0

v() is being called in the context of the <th> element, not an array. Hence, the <th> doesn't have a method reduce(). This is because for ... in iterates over non-numeric properties just as much as numeric properties. I would recommend using some_array['head'].forEach() instead.

answered Jan 14 '14 at 19:12

Scimonster

32,893
9
77
89

1

I believe the issue is you are using a 'for in' on an array. Because of that, you are getting the prototypes in the check.. for in... do a for loop, and your problem should be correct. You shouldn't use a 'for in' for arrays, that is for associative arrays/hashes. use "for" for an array. I *think* this is your issue. – james emanon Jan 14 '14 at 19:15
1

You're welcome. BTW, console logs are often much easier than alerts, because they don't block, and usually let you inspect the object more thoroughly. – Scimonster Jan 14 '14 at 19:35

TypeError: this.reduce is not a function

3 Answers3