All About Prototypes

So, what are prototypes?

Array prototypes are a way for developers to easily navigate across data and manipulate the information they require. There are many different kinds of prototypes and they all have different uses, but after some practice, deciding which to use can become like second nature.

Figuring Out Which To Use...

Can be really tough at first. It's so easy to think that forEach() is the answer to all of your problems! But that's because prototypes are new, soon they'll all have their value amongst the group when choosing which to use.

When you're deciding which one to use, I like to figure out what I need back at the end of the problem and that helps me choose which to use. For instance, map returns an array of the same length it was given; if that suits your needs, perfect! But maybe you're looking for just the numbers greater than 20, for instance...

The method above, .filter(), takes the original array it was given and returns a new array with only the indexes that meet the preset qualifications -- here that the number (num) is greater than 20.

No, wait, your client has changed their mind, now they want you to add the numbers in the array? No sweat! We'll use the reduce method, which is a powerful method but don't get carried away throwing it everywhere! Check it out...

What's happening here is the accumulator, or acc, is set initially at 0 and increments with the count of the number as it iterates through the array. This one has a ton of uses, I've found it incredibly useful in changing an array into other data-types in Javascript. The acc as seen above, rather than setting to 0 initially, can be set to an empty string and object too.

In addition to reduce, forEach is available in our arsenal for use. It doesn't return an array, but it's useful for acting upon an array's contents during iteration. For example, if you wanted to console "[num] sheep..." for every number passed in, you could!

But, that won't return a new array for you, so if you needed a new array, this is a perfect situation to use map! In this case, we're looking for an array of the same length we're providing, we just want to add "sheep...", so...

Last is sorting the array, which is even simpler than the previous two we've learned. Sorting the array is super useful as well, but this method will permanently change the array, so be careful how you use it. Take a peek...

Not so bad, huh?

Why are they useful?

They're useful because now we can navigate across datasets with just a few lines of code with methods with built in iterators! Before we would have to manually write code to do this for us and it could result in some nasty, ugly code. Take a look at a polyfill section from MDN, this is the vanilla Javascript you'd have to replace the current array prototype, .some() with:

// Production steps of ECMA-262, Edition 5, 15.4.4.17
// Reference: http://es5.github.io/#x15.4.4.17
if (!Array.prototype.some) {
  Array.prototype.some = function(fun, thisArg) {
    'use strict';

    if (this == null) {
      throw new TypeError('Array.prototype.some called on null or undefined');
    }

    if (typeof fun !== 'function') {
      throw new TypeError();
    }

    var t = Object(this);
    var len = t.length >>> 0;

    for (var i = 0; i < len; i++) {
      if (i in t && fun.call(thisArg, t[i], i, t)) {
        return true;
      }
    }

    return false;
  };
}