JS: Array Prototype Methods

We will use the array prototype methods file in the lessons folder of your Mod2 Sandbox repo to work through the examples in this lesson. Open that file in VS Code now.

Learning Goals

• Be able to describe prototype methods, mutators and accessors
• Practice using MDN documentation
• Practice using array prototype methods for data manipulation and problem solving
• Understand the use-cases for different prototype methods

Vocabulary

• Array Prototype - methods that are built specifically for arrays. They help us change the arrays themselves or get certain information from or about the array.
• Mutator - methods that mutate, or change, the original array
• Accessor - methods that do not mutate the original array, rather just give us some information from or about the array
• callback function A function passed into another function as an argument, which is then invoked inside the outer function

var instructors = ["Erin", "Heather", "Abdul"];

Prototype Methods

When working with data, we often want to do something with that data, or do something to that data. Programming languages have built in methods that help us do this. You’ve already worked with built-in Ruby methods like each, join, split, filter, map and more. Just like Ruby, JavaScript has built-in prototype methods that let us access or mutate data.

As we use prototype methods, it’s important to know if the method is, or isn’t, modifying our original data.

For example:
The accessor method includes() lets us check if an element exists within an array. It doesn’t modify or mutate the original array, it simply returns the information we’re seeking about the array as true or false.

var instructors = ["Erin", "Heather", "Abdul"];

var instructorExists = instructors.includes('Heather');

console.log(instructorExists); // logs true

The mutator method push() changes (mutates) the original array by adding an additional element to it at the end.

var instructors = ["Erin", "Heather", "Abdul"];

instructors.push('Kayla');

console.log(instructors) // logs ["Erin", "Heather", "Abdul", "Kayla"];

Array Iteration Prototype Methods

Some of the most useful array prototype methods in JavaScript are the ones we can use to iterate over arrays. These iterator methods are a simpler, modern and more sophisticated option than reaching for a for loop.

They allow us to loop through an existing array, looking at each element one at a time and applying a callback function to that element to do something to or with that element.

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.forEach(function callBack (/* parameter(s) */) {
  // some statements
  // often a return statement
})

Since these prototype methods were introduced as part of ES6, the document will show them written using a fat arrow like below. You are encouraged to use this same syntax for your iterator callbacks.

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

We are going to focus on:

• filter()
• map()
• reduce()
• sort()
• forEach()

How to use Array.filter(callbackFunction)

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

const names = ['nick', 'ben', 'trisha', 'john', 'dustin'];

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.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.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 }

How to use Array.sort(callbackFunction)

var letters = ['a', 'd', 'c', 'b'];
var sortedLetters = letters.sort();

console.log(sortedLetters); // Logs ['a', 'b', 'c', 'd']

var numbers = [1, 7, 3, 10];
var sortedNumbers = numbers.sort();

console.log(sortedNumbers); // Logs [1, 10, 3, 7]  

As you check out the docs on the sort method, ask yourself:

• Is sort an accessor or mutator method?
• What does sort return?
• Within the callback function, how do I sort in ascending order? How do I sort in descending order?

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

const cities = [
  { name: 'New York', population: 8398748, country: 'United States' },
  { name: 'Tokyo', population: 37393000, country: 'Japan' },
  { name: 'London', population: 8908081, country: 'United Kingdom' },
  { name: 'Mumbai', population: 12478447, country: 'India' }
];

console.log(sortCitiesByPopulation(cities));
// Output: [
//   { name: 'Tokyo', population: 37393000, country: 'Japan' },
//   { name: 'Mumbai', population: 12478447, country: 'India' },
//   { name: 'London', population: 8908081, country: 'United Kingdom' }
//   { name: 'New York', population: 8398748, country: 'United States' },
// ]

How to use Array.forEach(callbackFunction)

forEach is the prototype method that is most similar to a for loop. It simply iterates. It doesn’t have additional built in functionality like some others (filter, map, etc).

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.

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.'

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

Not just arrays

Prototype methods exist for many data types, not just arrays. For example, split is a string prototype method that breaks up a string into substrings and returns those substrings to us in an array. There is also a string prototype method includes that acts similarly to the array prototype method includes used in our accessor example from part 1 of this lesson.

There are many array (and other data types) prototype methods we haven’t touched in this lesson. Open the MDN documentation for the forEach() method and skim the left sidebar to see the other array prototype methods available to you. Rather than trying to learn all of those methods, it’s enough to just know you can use MDN or simply google something like “remove specific element from array javascript” to find additional methods to meet specific needs as they arise.

More Practice

const sentences = [
  'This is the first sentence.',
  'The second sentence is here.',
  'And here is the third one.'
];

console.log(splitSentencesIntoWords(sentences));
// Output: [['This', 'is', 'the', 'first', 'sentence.'], ['The', 'second', 'sentence', 'is', 'here.'], ['And', 'here', 'is', 'the', 'third', 'one.']]

const libraryBooks = [
  '1984',
  'Don Quixote',
  'Moby Dick',
  'Of Mice and Men',
  'Lord of the Flies'
];

console.log(checkLibrary("Moby Dick")); //true
console.log(checkLibrary("The Color Purple")); //false

const coolProducts = [
  { id: 101, name: 'Laptop', price: 1200 },
  { id: 102, name: 'Smartphone', price: 800 },
  { id: 103, name: 'Headphones', price: 100 },
  { id: 104, name: 'Tablet', price: 300 }
];


console.log(concatenateProductNames(coolProducts));
// Output: "Laptop, Smartphone, Headphones, Tablet"

Assessment Prep

To be prepared for final assessments (and interview code challenges), you should work daily towards fluency with the following methods:

• join() - joins all elements of an array into a single string.
• split() - splits a string into an array of substrings.
• includes() - checks if an element (or string) is included in the original array (or string)
• push() - pushes a new element into an array (at the end)
• forEach() - iterates over each element in an array letting you do something to (or with) each element. Cannot return a value.
• filter() - iterates over each element in an array and returns a new array of only the elements that match the specified condition
• map() - iterates over each element in an array and returns a new array of the same length with the modified elements
• reduce() - iterates over each element in an array and returns a single value (the accumulator) of your specifications
• sort() - iterates over each element in an array and sorts the elements (in place) based on your specified sorting

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