Practical Uses for Prototypes with Arrays

While the prototype object can sometimes seem like a distant concept that has no real application to the code you are writing, here is a practical example of how you can use it to your advantage.
You can take existing objects and add new functionality by adding properties or methods to their prototypes.
This example shows how to extend the Array object but you can apply this same technique to Arrays, Dates, or anything you want.
However, it is recommended that you don't extend any of the DOM objects as it could adversely affect performance.
Code GIST: gist.github.com/prof3ssorSt3v...

[@ranjan_v]

Thank you Steve

[@chesterxp508]

Another very cool tutorial !

[@rmorabia]

Loved the Archer reference! Thanks for the video.

[@zmark2274]

Oh, my goodness, it took me almost all evening to understand the idea)) Bravo!!! Stupid me)

[@rotrose7531]

Thank you for the exellent explanation about array prototype. I need to learn something more to follow what is going on inside the for block, but the concept you explains is clear enough to help me do some practice. Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

I have a whole playlist on loops if that helps.

[@rotrose7531]

@@SteveGriffith-Prof3ssorSt3v3 Thank you for the suggestion. I have found the playlist you pointed. Sure will repeat loop practice until I understand it.

[@heartofrumi]

great tutorial

[@maitran1764]

Great video, thank you very much. I understand the logic behind this but I'm quite confused about the part where you concatenated this[i] and this[pos] into an empty string. What do you mean by "taking the new value"? What would happen if I just skipped the empty string part? I'm new to manipulating strings so a clearer explanation would help a lot. Thank you again, you're the best teacher!

[@SteveGriffith-Prof3ssorSt3v3]

The concat method is a method belonging to String objects. So, you have to have a string in front of the method call "".concat( ) The stuff inside the parentheses is what you are adding to it. Sometimes I throw in extra things that are good to know about. Here you could use the concat method to add multiple things together. It also shows `this` being used in different ways, just to demonstrate that you could. You could just do this: let temp = this[i]; and let other = this[pos];

[@jasbindarsingh1640]

Great video Steve, I have two questions, What if I wanted to shuffle the original array passed? Can we override any pre-existing prototype method?

[@jasbindarsingh1640]

we can override prototype props

[@SteveGriffith-Prof3ssorSt3v3]

The prototype methods are attached to the constructor of each object. If your object instance has a method by the same name as the one in the prototype then JS will call that one and never bother to look up the prototype chain. You will not have replaced or destroyed the prototype method, just stopped JS looking up the chain.

[@maniac5411]

Hey Steve, Thanks a ton for this video. I've two questions, if you'd kind to take out some time, and answer them briefly: 1. Inside the shuffle function, doesn't "this" point to original array? Based on that, it should be updating the original array!! {Clearly this is not happening so it brings me to my 2nd question} 2. How to create shuffle function using prototype to update the original array?

[@Felipekimst]

Hi, Steve! Thanks a lot! I was looking if I there was a possibilty to create a property to some specific arrays, and also borrow the methods from the array prototype function ARR(name, ...items){ this.name = name; this.array = items Object.setPrototypeOf(this, Object.assign({name: this.name}, 'Array.prototype); return this.array } var arr = new ARR('friends', 'john', 'mario', 'luigi') it would have to return the array inside the function to use its methods arr.forEach((a, i)=>{ console.log(a.name , i, a)}) // friends, 0, john //friends, 1, mario // friends, 2, luigi does this sound too bizarre? lol It would really be convinient to be able to name an array

[@SteveGriffith-Prof3ssorSt3v3]

A name for an Array is what the variable is.

[@Felipekimst]

@@SteveGriffith-Prof3ssorSt3v3 lol I kinda found a way to do it but it looks messy and I don't really know what is going on grid = Object.create(Array.prototype, {limits: {configurable: true, writable: true, enumerable: true, value: {right: right, down: down, left: left, up: up}}} ) grid.push('hi') grid.pop(); it behaves like an array as expected and I can acess its limits property but if you set an index to the array, it doesnt increase the length property like: grid[0] = 'hi' the length is still 0

[@kirisutokyoto3505]

hello great video i don't understand , there is a chance that the math.random will give you the same number twice how did u sort that problem in this code

[@SteveGriffith-Prof3ssorSt3v3]

I didn't do anything about duplicates in this code but I have a video about that - kzbin.info/www/bejne/q4Wqg32no51rb7M

[@akash_gupta_2090]

but u still changing the order of names also, how do we restrict that ??????

[@SteveGriffith-Prof3ssorSt3v3]

Do you mean how to create a new Array with the sorted values instead of making a destructive method that changes the original array?

[@akash_gupta_2090]

@@SteveGriffith-Prof3ssorSt3v3 yes correct how ?

[@Diamonddrake]

You made it only work on arrays of strings.

[@SteveGriffith-Prof3ssorSt3v3]

You can build your own methods to work on Arrays of whatever you want. It is an example of how to extend Arrays using their prototype.

[@Diamonddrake]

But you extended the prototype of all arrays with a function that breaks on anything that’s not strings, not an ideal example

[@AdrianSkar]

@@Diamonddrake this seems to work just fine if you need it for other types: let temp = this[i]; let other = this[pos]; this[i] = other; this[pos] = temp;