Why does adding a method to the Array prototype in javascript break iteration on a for loop?

Question

I'm working in a large legacy codebase and just realized that someone did this:

Array.prototype.insertAt = function (i,el){ return this.splice(i,0,el); }
Array.prototype.deleteAt = function (i){return this.splice(i, 1); }

and that this is the reason i can't to this:

var derp = new Array();
derp.push('duh');
derp.push('what?');

for (var i in derp) {
    console.log(derp[i]);
}

Well, it's not that i can't do it, but if i do, i get unexpected results. That being instead of getting two lines of output (for 'duh' and 'what?') i get four. the last two being the two functions listed above.

I don't want to remove the original prototype functions (because god knows what depends on them), but i am wondering if there is a way to prevent the for loop from looping over the functions that were added.

for..in is purposed to iterate objects. Use a regular for loop instead. — Teemu
– Teemu, Commented Jan 29, 2016 at 16:45
Agree with using for loops - stackoverflow.com/questions/500504/… — IrkenInvader
– IrkenInvader, Commented Jan 29, 2016 at 16:46
I like both of these comments better than any of the official answers because i learned that i shouldn't be using for .. in in the first place. thanks — Dallas Caley
– Dallas Caley, Commented Jan 29, 2016 at 16:54

juvian · Accepted Answer · 2016-01-29 16:55:45Z

3

Method 1: Use a regular for (best supported)

for(var i=0;i<derp.length;i++){
    console.log(derp[i])
}

Method 2: Use hasOwnProperty

for(var i in arr){
 if(arr.hasOwnProperty(i)){
     console.log(i)
  }
}

Method 3: Use Object.defineProperty:

Object.defineProperty(Array.prototype, 'insertAt', {
    writeable: true,
    enumerable: false,
    value: Array.prototype.insertAt
})
Object.defineProperty(Array.prototype, 'deleteAt', {
    writeable: true,
    enumerable: false,
    value: Array.prototype.deleteAt
})

for(var i in derp){
    console.log(derp[i])
}

Which one you use depends on your browser support, last one prevents changing all for code written though

answered Jan 29, 2016 at 16:55

juvian

16.1k2 gold badges42 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dallas Caley Over a year ago

The third method is perfect, this is exactly what i originally wanted. thanks

score 3 · Accepted Answer · 2016-01-29 16:57:30Z

3

Use .forEach to iterate over an array or a regular for loop. for in is meant for object iteration and will include all properties on the prototype (which is why Object.keys(obj).forEach is preferred for object iteration as it does a hasOwnProperty check internally)

edited Jan 29, 2016 at 16:57

answered Jan 29, 2016 at 16:46

user5004821

5 Comments

idream1nC0de Over a year ago

You're not considering legacy browser support for this method. This method is not available prior to IE9.

gen_Eric Over a year ago

@JacobHeater: Just use a polyfill.

idream1nC0de Over a year ago

@RocketHazmat You're overcomplicating the solution.

user5004821 Over a year ago

a regular for loop isn't available prior to IE9? I believe I gave two options in my answer, and expounded upon enumerable prototype properties. OP has every ability to look further into each one of the methods listed.

idream1nC0de Over a year ago

@gabdallah Apologies! I should've read the answer more carefully. Correction: The Array.prototype.forEach method is not available prior to IE9. A for loop, of course, is!

Jaffer · Accepted Answer · 2016-01-29 16:52:21Z

0

for (var i in derp) {
    if(derp.hasOwnProperty(i)) 
        console.log(derp[i]);
}

But then, normal for loop is far better for Array than using for-in (which is actually for Object)

for (var i = 0; i < derp.length; i++) { 
    console.log(derp[i]);
}

edited Jan 29, 2016 at 16:52

answered Jan 29, 2016 at 16:45

Jaffer

2,97819 silver badges29 bronze badges

Collectives™ on Stack Overflow

Why does adding a method to the Array prototype in javascript break iteration on a for loop?

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related