0

As I read from the internet I found that I can extend the functionally of inbuild class using prototype. I added some custom functions in Array class like getting the last element from split() function like let file = split("/").last()

Here code how I added the custom function to Array class

Array.prototype.last = function () {
    return this[this.length - 1];
}

When any array iterating it add custom function names also with the iteration

let fields = ["test","xyz"];

for(let index in fields) { 
}

Above loop iterate for the "last method" also.

As I added 3 functions to Array class named "last", "removeLastElement", "toJson" to extend by using prototype.

Above array iterate 5 times with my custom Array method.

How can I avoid my custom function from an iterating array?

here I debug the array field I found that custom methods for Array class are shown as dark-colored where other inbuilt functions like light colored

enter image description here

Ankur Loriya
  • 3,276
  • 8
  • 31
  • 58
  • 4
    What you show here is exactly why it's advisable to not do that anymore in modern JS programming. We don't extend native prototypes so we don't have issues with different libraries fighting over the same method name. And we don't use `for ... in` to iterate over arrays. Use `for .. of` or `Array.forEach()`, a basic for loop or a basic while loop. For ... in was designed to iterate over objects. – Shilly Dec 13 '18 at 12:58
  • 1
    This is a very old issue, the usual advice is to not extend built-in prototypes (there are other good reasons not to do it too) and don't use *for..in* over arrays, also don't do that as order isn't guaranteed. Instead of *for..in* you can use one of the iterator methods like *forEach*. – RobG Dec 13 '18 at 13:00
  • 1
    Talking about @Shilly's point, you can find more infos here about why it's bad practice: https://stackoverflow.com/questions/14034180/why-is-extending-native-objects-a-bad-practice – briosheje Dec 13 '18 at 13:00
  • @Shilly Could you explain the best way to use `for .. in`? – Ankur Loriya Dec 13 '18 at 13:06
  • 1
    @AnkurLoriya I never use for ... in for anything, since it's too confusing to get correct. You can use `for ... in` to iterate over an object, but then you also have to add `if ( x.hasOwnProperty( y ) )` to make sure you only look at properties inside the object and not on it's prototype chain. So the best way to use `for ... in` is to not use it and use `for ... of` instead. Personally I use `.forEach()` when working with arrays. So I would advice to use: `this.forEach( item => { .. do something with the array item ...} )`. – Shilly Dec 13 '18 at 13:11
  • And concerning the array methods, you could subclass Array into like `class myArray extends Array`, if you want to keep using your own methods. But the methods you're adding aren't very long: last = `this[this.length - 1]`, removeLastElement = `.splice( -1, 1)`, toJSON = `JSON.stringify( arrayName )` – Shilly Dec 13 '18 at 13:15
  • @Shilly That is a reasonable answer. For an iterating object, I can use `for..in` with check `hasOwnPropery` right? – Ankur Loriya Dec 13 '18 at 13:20
  • @AnkurLoriya Yes: `var obj = {a:1,b:2,c:3}; for prop in obj { if ( obj.hasOwnProperty(prop)){ .. do something... }` but these days we have `Object.entries()` So I prefer to use: `var obj = {a:1,b:2,c:3}; Object.entries(obj).forEach(([ key, val ])=> { ... }`. Hence why I never use `for ... in` for anything, not even objects, since having to add the hasOwnProperty kinda sucks. – Shilly Dec 13 '18 at 13:23

1 Answers1

0

You should use a

for...of

loop for array ,instead of using

"For...in "

"For...in" loops are meant to be used to iterate over objects. You can check the links below for more clarity on this topic:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Devinder
  • 127
  • 1
  • 10