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
prototypeA model of something and how it should look or behavemethodA function that is defined on an objectcallback functionA function passed into another function as an argument, which is then invoked inside the outer function
Note About this Lesson
Note that this is a 2 day lesson. That means you might be leaving today’s lesson with more questions than answers. That’s okay! There is a lot to cover, so we’re going to take our time 🙂
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.
Examples of Prototype methods
You might already be familiar with some of the following prototype methods:
.pop().push()
What are some other prototype methods that you have used previously?
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 occassional 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
forloop.forEachalways iterates over every element in an array. - If you want to stop (
break) aforloop, you can do that. There is no way to stop aforEachloop.
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
})
More on these callbacks
Many callbacks require a return statement. Remember that these statements determine what the CALLBACK returns, not what the METHOD returns. The method may return something different, and this value may need to be captured (in a variable, another return statement…).
You will often need TWO return statements in a METHOD (or function) when working with iterator methods!
You can find more information on different prototype methods and their callbacks here.
There are many array prototype methods out there, but we are going to focus on some of these iterator methods:
forEach()map()find()filter()reduce()
Exploration Activity
You are going to be split into groups and be assigned one iterator method. It will be your job to research that method and then share out your learning with your peers. In your groups, you will need to create a document (use any tool you’d like: google docs, Notion, etc) and record the following information:
- What does the callback function return?
- What are the mandatory parameters? Optional parameters?
- What is the basic structure/skeleton of the method?
- What are common use cases? When would I use this method?
- Is there anything else people should know?
- Solve the problem(s) included below.
First, let’s do forEach together. The instructor will model how they would use documentation to research.
Array.forEach(callbackFunction)
Now that we’ve done that one together, let’s split up into groups and have y’all take it from here!
Array.map(callbackFunction)
Array.find(callbackFunction)
Array.filter(callbackFunction)
Array.reduce(callbackFunction, initialValue)
Before we close out today…
Be sure that every member of your group has access to the document that you just made. You will be split up tomorrow and responsible for teaching your peers what you’ve learned. Save that document somewhere easy to find so you can easily share it tomorrow.
Share Out (Start of Day 2 lesson)
You will get into groups of 4, made up of one expert for each iterator method. In these groups, share the document you made yesterday. Then, walk each other through your example problems.
Practice
The only way to get better and more comfortable with these prototype methods is to continue practicing them. Here are a few more examples to work through.
Checks for Understanding
- What is a prototype method?
- Compare and contrast
filterandfind. - Compare and contrast
forEachandmap. - When might
reducebe a useful method? - Which prototype methods are the most confusing for you right now?
