Can I add javascript Prototype to my array instance?

Question

So I understand that you can add new methods to your javascript object prototype. myObject.prototype.myFunction = function {}. I wanted to do the same for my array instance but keep getting errors. Something like this.

var myArray = [1,2,3,4,5,6,7,8,9,0]; 

myArray.prototype.bubbleSort = function(){

// sort stuff here. 

}

Why is this not allowed ? I thought since arrays inherit from Object you should be able to extend them the same way as objects.

If this is not possible how can I add a . notation function call to my arrays so I can say. myArray.bubbleSort(); instead of bubbleSort(myArray); without adding methods to Array.prototype.

I think my question caused some confusion so please read this section before answering. Thank you.

My goal is to have an array named myArray that has a specific method bubbleSort. I don't want to change the main Array.Prototype.

So later I can do something like this. var yourArray = new myArray() so now since yourArray is instance of myArray it will have access to bubblesort function.

Can we achieve this without changing the main Array.prototype ?

Or myArray.constructor.prototype.bubbleSort = function(){…};. — Sebastian Simon
– Sebastian Simon, Commented Jun 10, 2016 at 16:02
If you only want it on a single instance, just add it directly. myArray.bubbleSort = function() { ... };. Simple as that. Adding it to the prototype means it will be added to many instances. — Mike Cluck
– Mike Cluck, Commented Jun 10, 2016 at 16:03
@xofux Thank you. This works but can you please elaborate on why this works ? Does it have side effects ? Will all the other array methods work once i do this ? — Yasin Yaqoobi
– Yasin Yaqoobi, Commented Jun 10, 2016 at 16:05
@YasinYaqoobi Based on your update, juvian has the correct answer. — Mike Cluck
– Mike Cluck, Commented Jun 10, 2016 at 16:22

juvian · Accepted Answer · 2016-06-10 16:13:57Z

4

Arrays are also objects, so you can easily add it as a function to only that array:

var myArray = [1,2,3,4,5,6,7,8,9,0]; 
myArray.bubbleSort  = function(){console.log(this)}

Beware that if you do this in a library, you might break code like this:

for(var i in myArray){
    console.log(i)
}

Because that will also give the bubbleSort property

A nicer way would be to extend an Array to make a wrapper:

function sortableArray(){
    return this
}

sortableArray.prototype = Object.create(Array.prototype);

sortableArray.prototype.bubbleSort = function(){
  console.log(this)
}

var arr = new sortableArray()
arr.push(1)
arr.push(0)
arr.push(9)
arr.bubbleSort();

edited Jun 10, 2016 at 16:13

answered Jun 10, 2016 at 16:08

juvian

16.1k2 gold badges42 silver badges40 bronze badges

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

2 Comments

user1106925 Over a year ago

The "nicer way" doesn't entirely replicate an Array. For example, mutations of the .length property won't behave as you'd expect. Adding a function to the object doesn't actually break code using a for-in. If they're using that kind of loop, then they should expect to get all enumerable properties. If they only wanted indices, they'd use a for loop.

juvian Over a year ago

@squint you are right, first method should be preffered unless you have the risk of another library setting array.bubbleSort property

Mike Cluck · Accepted Answer · 2016-06-10 16:10:41Z

I think you're misunderstanding what the prototype is for. The prototype provides a chain for objects to link other properties and methods to a given object.

For example, when you create an array

[]

that array has access to various functions like forEach, reduce, etc. because they are linked to, or inherited through, the prototype. Modifying that prototype will modify all objects which inherit from the same prototype.

var aNewArray = [6, 7, 8];
var myArray = [1, 2, 3, 4, 5];

// myArray.constructor.prototype will give you access to myArrays prototype
myArray.constructor.prototype.forMyArrayOnly = function() {
  console.log(this === myArray ? 'this is myArray' : 'this is NOT myArray!');
};

myArray.forMyArrayOnly();
aNewArray.forMyArrayOnly();

If you just want to add a method or property to a single object, you don't want to modify their prototype chain. Instead, you want to add that property directly to the object.

var myArray = [1, 2, 3, 4, 5];
myArray.bubbleSort = function() {
  console.log('I totally just did bubble sort. Check it out');
  console.log(this);
};

myArray.bubbleSort();

Jamiec · Accepted Answer · 2016-06-10 16:01:45Z

1

You should have used Array.prototype.bubbleSort

var myArray = [1,2,3,4,5,6,7,8,9,0]; 

Array.prototype.bubbleSort = function(){

    console.log("Do bubble sort here");

}

myArray.bubbleSort();

answered Jun 10, 2016 at 16:01

Jamiec

136k15 gold badges141 silver badges202 bronze badges

3 Comments

Yasin Yaqoobi Over a year ago

Thank you but I already know this. My question is about extending a single instance.

zer00ne Over a year ago

@YasinYaqoobi he means instead of using myArray.prototype.bubbleSort() the proper syntax is: Array.prototype.bubbleSort()

Yasin Yaqoobi Over a year ago

:) I understand the proper syntax but I purposefully wrote it that way to make sure it is obvious that I don't want to add to the main Array.prototype. I want to change just a single instance.

Collectives™ on Stack Overflow

Can I add javascript Prototype to my array instance?

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related