Array Prototype Methods: A love story

Before I can understand anything complicated— I need a clear, concise foundation. I don’t think I’m alone in this need.

One of the problems I’ve encountered as a student is that sometimes the person teaching me has totally forgotten what it felt like not to know. Some of my best teachers remember the beginner’s mind and the faulty paths it can go down, They will quickly pick me up and set me on the right path!

SO! This is an effort to break down iterators as clearly as possible! Really, just for me, but maybe it will help someone else too.

1. Arrays are objects.

You know why? Because the index is the property, and the element in the index is the value.

2. Objects can have methods.

JavaScript has methods that are built in by the big brains who write javascript itself. These methods are floating in the ether and you can decide to just pop them into your code and use them.

In Mod 1 at Turing, we first learned prototype examples like:

.push( )

.shift( )

.pop( ).

We also learned about for loops.

In Mod 2, we are focusing heavily on Array Prototype Iterators. These are beefy loops with greater power and functionality.

forEach()

This little number is not very different from a for loop.

the forEach is the iterator you reach for when you don’t need a returned value or a returned array. You use it when you just need to DO something to your array. It’s good for “side effects” in your code.

array.forEach(element => put your logic here!)

map( )

For me, the most important thing to remember about map() — is that map

always returns an array with the same number of items.

Map essentially applies a function to every item — and spits out a new array that was computed from the original.

const increasedPrices = prices.map(price => price + 2)

find( )

Find returns one element based on a test condition.

So — when you want a thing in the array to come out of that array — reach for find! Remember though, that it returns the FIRST value that meets that condition.

array.find(element => element <10)

filter( )

If you want another array returned to you with JUST the stuff that yo want — reach for filter( ). It filters OUT the undesirables. It removes the items that don’t pass your condition.

const words = ["spray", "elite", "destruction"]

result = words.filter(word => word.length > 6)

// result = “destruction”

As the iterator goes through each index in the array — if evaluates the parentheses, if what is between the parentheses evaluates to TRUE. that element is returned. But if you want it — you’ll need to push it assign it somewhere.

reduce( )

I love reduce. You should decide that you love reduce too. It’s great.

Reduce is that boi.

Reduce is flexible.

Reduce is powerful.

Reduce is mysterious at first.

Then reduce is your best pal.

Here is what I needed to understand reduce:

Basic Syntax:

array.reduce( (accumulator, currentArrayItem) => {

return accumulator

} , initialValue );

I personally needed each of these words to be broken up before I understood.

accumulator : This is the THING YOU WANT. It can be a sum of all numbers. It could be a brand new object. It is the basket you are putting the stuff you want in. I can be altered or added to with each iteration.

currentArrayItem : This is the current item in the array you are looking at in that particular iteration. I found it helpful to just name this the singular version of your plural array. Kitties become kitty. Cars become car. etc.

return accumulator : You need to return your accumulator or else the function does not work. Just write out the bones of your reduce iterator and always write this right away.

initial value : This is where the accumulator starts. It defaults to 0, but it’s good practice to define this value right away. If you are dealing with with numbers, start with a number. If your final desired output is an array, put brackets []. If you want an object, put curly braces {}.

sort( )

This little number is SO HELPFUL. But boy do I find the syntax confusing.
Let’s break this down.

This method sorts your array elements and returns the sorted array. By default — it will sort in ascending order. Your normal ABC.. etc. But for numbers it wont act the way you think.

For example if you have: [1, 30, 4, 21, 100000]

it will sort to : [1, 100000, 21, 30, 4]

You see what I mean? It will not go in terms of size, but everything that starts with 1 comes first, then 2.

That’s great when you have a simple array. But what if you need to sort the array by a property within each element? That’s when you need to pass some arguments.

You can “supply a compare function” — which is just asking to compare two elements against each other and then moving them. I found the below example from jsFun to be the most helpful:

const kitties = [
  {
    name: 'Felicia',
    age: 2,
    color: 'grey'
  },
  {
    name: 'Tiger',
    age: 5,
    color: 'orange'
  },
  {
    name: 'Snickers',
    age: 8,
    color: 'orange'
  },
  {
    name: 'Max',
    age: 1,
    color: 'tuxedo'
  }
];
const result = kitties.sort((a, b) => b.age - a.age)
return result;
// { name: "Snickers", age: 8, color: "orange" },
 { name: "Tiger", age: 5, color: "orange" },
 { name: "Felicia", age: 2, color: "grey" },
 { name: "Max", age: 1, color: "tuxedo" }]

You see that the parameters (a, b) just represent two of the elements. You could put anything there to make it work.

But what it is doing in each pass is asking does the value of b.age -a.age equal?

In the first iteration is 5–2 > 0? Yes? Then put b before a. Or Tiger before Felicia. Etc.

• If compareFunction(a, b) returns a value > than 0, sort b before a.
• If compareFunction(a, b) returns a value ≤ 0, leave a and b in the same order

Welp, there you have it. Basic iterators!