Array Prototype Methods: Iterators

Lesson Goals

• Define what a prototype method is and what it allows you to do
• List several prototype methods for arrays
• Understand the use-cases for different prototype methods

Vocab

• prototype A model of something and how it should look or behave
• method A function that is defined on an object
• callback function A function passed into another function as an argument, which is then invoked inside the outer function

Prototype Methods

In order to understand what a prototype method is, let’s break down the terms individually:

• A prototype is a model of something and how it should look or behave. We can build off of prototypes to create multiple copies of similar models.
• A method in JavaScript is simply a function that’s defined on an object

Prototype methods are functions that allow you to manipulate the value of a particular data type or class. JavaScript comes with several built-in data types that each have their own prototype methods, that allow you to interact with them in certain ways. For example, you might want to add or remove an item from an array. Or inspect the properties on an object. Prototype methods allow you to perform these actions and manipulate your values.

Array Iteration Prototype Methods

These allow us to loop through an existing array and apply a callback function (similar to event listeners or setTimeout) to each element that might mutate each element and return a new value.

WAIT. Can’t we already iterate through arrays with a for loop?!

In Javascript, there are often many different ways to solve something, and many different tools to choose from. Yes, we can often accomplish the same thing using a for loop, but the array iteration methods do provide some good benefits!

• Cleaner syntax and easier to read
• Offers built-in functionality which in turn, DRYs up code
• More modern way of writing Javascript

There are occasional times when it makes more sense to use a for loop over something like a forEach. For example:

• If you need to run something a specific number of times, you would want to use a for loop. forEach always iterates over every element in an array.
• If you want to stop (break) a for loop, you can do that. There is no way to stop a forEach loop.

Callback Functions

Iteration prototype methods (such as forEach, filter, etc.) take in a callback function as an argument. The callback function is what takes in the mandatory and optional parameters!

someArrayData.somePrototypeMethod(function callBack (/* parameter(s) */) {
  // some statements
  // often a return statement
})

Since these prototype methods were introduced as part of ES6, most of the time you will see them written using a fat arrow like below:

someArrayData.somePrototypeMethod((/* parameter(s) */) => {
  // some statements
  // often a return statement
})

There are many array prototype methods out there, but we are going to focus on some of these iterator methods:

• filter()
• forEach()
• map()
• find()
• reduce()

How to use Array.filter(callbackFunction)

First, let’s do filter together. The instructor will model how they would use documentation to research.

const numbers = [1, 2, 3, 4, 5, 6, 7];

var beatles = [
  { name: 'John', living: false, instruments: ['guitar', 'bass', 'piano'] },
  { name: 'Paul', living: true, instruments: ['bass', 'guitar', 'piano'] },
  { name: 'George', living: false, instruments: ['guitar', 'sitar'] },
  { name: 'Ringo', living: true, instruments: ['drums', 'bongos'] },
];

Note that depending on the syntax you use for your callback function, you may not need to explicitly write the return keyword. You can leverage the implicit return available in certain arrow function syntax.

How to use Array.forEach(callbackFunction)

const prices = [4.99, 5.50, 7.00, 10.25];
const increasedPrices = [];

const dogs = [
  {name: "Fido", numLegs: 4},
  {name: "Greg", numLegs: 5}
];

// console output
=> 'Fido has 4 legs.'
   'Greg has 5 legs.'

forEach is the building block for many of the other iterator methods. Let’s have you experiment some with the other ones now!

How to use Array.map(callbackFunction)

const prices = [4.99, 5.50, 7.00, 10.25];

const degreesF = [67, 32, 55, 102]

// console output
=> [19.44, 0, 12.77, 38.88]

How to use Array.find(callbackFunction)

const numbers = [15, 6, 14, 2, 22, 9, 45];

let pets = [
  { name: 'harvey', age: 1 },
  { name: 'julius', age: 3 },
  { name: 'mishu', age: 3 },
];

How to use Array.reduce(callbackFunction)

const numbers = [1, 2, 3, 4, 5];

// console output
=> 15

const adjectives = ['fantastic', 'amazing', 'childish'];

// console output
=> { fantastic: 9, amazing: 7, childish: 8 }

Reviewing Our Prototype Iterator Methods (Day 2)

Now that we’ve had a chance to go through each of these iterator methods, let’s review the highlights. Take a look at the activity below:

Practice

Additional Resources

• Why and when to use forEach, map, filter, reduce, and find in JavaScript
• JavaScript Callback Functions - What are Callbacks in JS and How to Use Them
• Callback Functions MDN