Helpful Array Methods

Javascript has many built-in convenience functions that make it a joy to work with arrays.

Weโ€™ll start by exploring how Javascript arrays can be used as queues or stacks.

Then weโ€™ll look into transforming, filtering, and searching arrays with the find, map, filter, join, includes, every, some, and reduce array helper functions.

Table of Contents

  1. Arrays as Queues
  2. Arrays as Stacks
  3. Sample Array Data To Work With
  4. Array Transformations - Map
  5. Array Transformations - Filter
  6. Array Search - Find
  7. Array Tests - Includes
  8. Method Chaining
  9. Array Tests - Some, Every
  10. Array Reduction - Reduce
  11. Reduce Explained
  12. Array Reduction - Join
  13. Further Reading

Arrays as Queues

We often use arrays as First-In-First-Out queues using push and shift.

A queue is like a line-up at a grocery store.

let sportBalls = ["๐Ÿ€", "โšฝ", "โšพ"];

// Add football to the end of the queue:
sportBalls.push("๐Ÿˆ");

// sportBalls is now ["๐Ÿ€", "โšฝ", "โšพ", "๐Ÿˆ"]

// Remove and return basketball and soccer ball from the front of the queue;
let basketball = sportBalls.shift();
let soccerball = sportBalls.shift();

// sportBalls is now ["โšพ", "๐Ÿˆ"]

Arrays as Stacks

We often use arrays as Last-In-First-Out stacks using push and pop.

A stack is like a pile of dinner plates. (Except the end of the array is consider the top of the stack.)

let sportBalls = ["๐Ÿ€", "โšฝ", "โšพ"];

// Add football to the end of the stack:
sportBalls.push("๐Ÿˆ");

// sportBalls is now ["๐Ÿ€", "โšฝ", "โšพ", "๐Ÿˆ"]

// Remove and return football and baseball from the end of the stack:
let football = sportBalls.pop();
let baseball = sportBalls.pop();

// sportBalls is now ["๐Ÿ€", "โšฝ"];

๐ŸŽต Note:

unshift also exists to place elements at the start of an array, shifting existing elements over.

Sample Array Data To Work With

The remaining examples will make use of the following array of objects:

const animals = [
  { name: "Monkey", emoji: "๐Ÿ’", legs: 2, mana: 45, count: 3 },
  { name: "Dog", emoji: "๐Ÿ•", legs: 4, mana: 89, count: 2 },
  { name: "Cow", emoji: "๐Ÿ„", legs: 4, mana: 3, count: 5 },
  { name: "Gorilla", emoji: "๐Ÿฆ", legs: 2, mana: 56, count: 2 },
  { name: "Deer", emoji: "๐ŸฆŒ", legs: 4, mana: 97, count: 5 },
  { name: "Kangaroo", emoji: "๐Ÿฆ˜", legs: 2, mana: 4387, count: 1 },
  { name: "Turkey", emoji: "๐Ÿฆƒ", legs: 2, mana: 17, count: 7 },
];

Letโ€™s use find, map, filter, join, includes, every, some, and reduce to make sense of this data.

๐Ÿ“ข Remember: Weโ€™ll be making heavy use of implicit-return arrow functions, so make sure you understand those first.

Resources

Array Transformations - Map

The array map method creates a new array of the same size.

The provided callback is used to transform each element in the original array to the corresponding element in the new array.

map an array of animal emojis based on each animalโ€™s count:

const emojiZoo = animals.map((animal) => animal.emoji.repeat(animal.count));

console.log(emojiZoo); // Display the new array of strings.

// [ "๐Ÿ’๐Ÿ’๐Ÿ’", "๐Ÿ•๐Ÿ•", "๐Ÿ„๐Ÿ„๐Ÿ„๐Ÿ„๐Ÿ„", "๐Ÿฆ๐Ÿฆ", "๐ŸฆŒ๐ŸฆŒ๐ŸฆŒ๐ŸฆŒ๐ŸฆŒ", "๐Ÿฆ˜", "๐Ÿฆƒ๐Ÿฆƒ๐Ÿฆƒ๐Ÿฆƒ๐Ÿฆƒ๐Ÿฆƒ๐Ÿฆƒ" ]

Array Transformations - Filter

The filter method returns a new array of elements selected from the original array.

Each element is tested using the callback function. The new array contains elements where the callback returned true.

filter for only four legged animals:

const fourLegsGood = animals.filter((animal) => animal.legs == 4);

console.log(fourLegsGood); // Two legs baaaaaaaaad-๐Ÿ‘

// [ { name: 'Dog',  emoji: '๐Ÿ•', legs: 4, mana: 89, count: 2 },
//   { name: 'Cow',  emoji: '๐Ÿ„', legs: 4, mana: 3,  count: 5 },
//   { name: 'Deer', emoji: '๐ŸฆŒ', legs: 4, mana: 97, count: 5 } ]

Array Search - Find

Sometimes you want to find an array element based on its property values. The callback you provide must return a Boolean value.

find only the cow:

const cow = animals.find((animal) => animal.name == "Cow");

console.log(cow.emoji);

// ๐Ÿ„

If multiple elements match, only the first is returned.

Array Tests - Includes

Sometimes you wish to know if your array contains a specific object.

Determine if the array includes a Gorilla:

// Map to names and then test inclusion of 'Gorilla'.

if (animals.map((a) => a.name).includes("Gorilla")) {
  console.log("There are Gorillas in the mist.");
}

// There are Gorillas in the mist.

Method Chaining

Calling a method on the result of a previous method is called โ€œmethod chainingโ€. In the above example map returns an array of strings and then includes looks through that array for a specific string.

Array Tests - Some, Every

Sometime you wish to know if a specific Boolean condition occurs in some or every one of your array elements.

Are some animals ready for the rap battle?

const manaNeededToBattle = 17;

const someAreReady = animals.some(
  (animal) => animal.mana >= manaNeededToBattle
); // true

Does every animal have enough mana for the rap battle?

if (animals.every((animal) => animal.mana >= manaNeededToBattle)) {
  console.log("We can battle."); // Will not execute as Cow's mana is not sufficient.
}

Array Reduction - Reduce

Sometimes we want to reduce an array down to a single value.

reduce the animal array down to a sum of all animal counts:

// Sum animal counts into 'total' with a starting sum of zero.

const totalCount = animals.reduce((total, animal) => total + animal.count, 0);

console.log(`In total there are ${totalCount} animals.`);

// In total there are 25 animals.

Reduce Explained

The reduce method takes a callback and a starting value. As it iterates through the array, the return value of the callback is assigned to an โ€œaccumulatorโ€ variable.

const totalCount = animals.reduce((total, animal) => total + animal.count, 0);

Here, the callbackโ€™s first parameter total is the accumulator. It stays in scope across the entire array.

The callbackโ€™s second parameter animal is assigned each array element in turn.

In this example the accumulatorโ€™s starting value is set to zero.

Array Reduction - Join

Sometimes we want to join all array element together into a string.

First map to names and then join into a guest list:

const guestList = animals.map((animal) => animal.name).join(", ");

console.log(guestList);

// Monkey, Dog, Cow, Gorilla, Deer, Kangaroo, Turkey

The join method takes a string value to use as โ€œglueโ€ between each element. You can use a empty string to go โ€œgluelessโ€.

Further Reading