ES6 Array Manipulation -

JavaScript is one of the most popular programming languages in the world, and one of its core features is the ability to manipulate arrays. With the introduction of ES6, or ECMAScript 6, new methods were added to the array prototype, which make it even easier to work with arrays. In this article, we'll explore some real-life examples of how to use some of these ES6 array manipulation methods, including map, filter, every, some, push, and pop.

Map

The map method is used to transform each element in an array into a new element. This can be useful when you need to perform some kind of calculation or transformation on each element in an array. For example, let's say we have an array of numbers representing the scores of students in a class:

const scores = [80, 90, 75, 85, 95];        

We can use the map method to convert each score into a letter grade, like this:

const grades = scores.map(score => {
  if (score >= 90) {
    return 'A';
  } else if (score >= 80) {
    return 'B';
  } else if (score >= 70) {
    return 'C';
  } else {
    return 'F';
  }
});

// grades will be ['B', 'A', 'C', 'B', 'A']        

Filter

The filter method is used to create a new array that contains only the elements that meet a certain condition. This can be useful when you need to remove certain elements from an array, or when you need to create a new array based on some criteria. For example, let's say we have an array of numbers representing the ages of people in a group:

const ages = [25, 30, 45, 50, 18, 22];        

We can use the filter method to create a new array that only contains the ages of people who are over 30, like this:

const olderAges = ages.filter(age => age > 30);

// olderAges will be [45, 50]        

Every

The every method is used to check if every element in an array meets a certain condition. This can be useful when you need to ensure that every element in an array is valid before proceeding with some action. For example, let's say we have an array of numbers representing the lengths of sides of triangles:

const sides = [3, 4, 5];        

We can use the every method to check if every side is greater than zero, like this:

const isValid = sides.every(side => side > 0);

// isValid will be true        

Some

The some method is used to check if at least one element in an array meets a certain condition. This can be useful when you need to ensure that at least one element in an array is valid before proceeding with some action. For example, let's say we have an array of numbers representing the ages of people in a group:

const ages = [25, 30, 45, 50, 18, 22];        

We can use the some method to check if at least one person in the group is over 30, like this:

const isOver30 = ages.some(age => age > 30);

// isOver30 will be true        

Reduce

The reduce method is used to iterate over an array and accumulate a single value. This can be useful when you need to perform a calculation on every element of an array and return a single value. For example, let's say we have an array of numbers representing the prices of items in a shopping cart:

const prices = [10, 20, 30, 40];        

We can use the reduce method to calculate the total cost of the items in the shopping cart, like this:

const totalCost = prices.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

// totalCost will be 100        

In the above example, we start with an accumulator of 0 and add each price in the array to it, resulting in the total cost.

Find

The find method is used to find the first element in an array that meets a certain condition. This can be useful when you need to locate a specific element in an array based on some criteria. For example, let's say we have an array of objects representing books:

 const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' },
  { title: '1984', author: 'George Orwell' },
  { title: 'Pride and Prejudice', author: 'Jane Austen' }
];        

We can use the find method to locate the first book in the array that was written by Jane Austen, like this:

const janeAustenBook = books.find(book => book.author === 'Jane Austen');

// janeAustenBook will be { title: 'Pride and Prejudice', author: 'Jane Austen' }        

Slice

The slice method is used to create a new array that contains a portion of an existing array. This can be useful when you need to work with a subset of an array without modifying the original array. For example, let's say we have an array of numbers representing the scores of students in a class:

const scores = [80, 90, 75, 85, 95];        

We can use the slice method to create a new array that contains the top three scores, like this:

const topScores = scores.slice(0, 3);

// topScores will be [80, 90, 75]        

In the above example, we use the slice method with a start index of 0 and an end index of 3 to create a new array that contains the first three elements of the scores array. The original scores array remains unchanged.

Splice

The splice method is used to add or remove elements from an array. This can be useful when you need to modify an existing array. For example, let's say we have an array of numbers representing the scores of students in a class:

const scores = [80, 90, 75, 85, 95];        

We can use the splice method to remove the lowest score (75) from the array, like this:

scores.splice(2, 1);

// scores will now be [80, 90, 85, 95]        

In the above example, we use the splice method with a start index of 2 (which is the index of the lowest score) and a delete count of 1 to remove the element at that index from the scores array. The original scores array is modified as a result.

Flat

The flat method is used to create a new array that is flattened to a specified depth. This can be useful when you need to flatten a nested array structure. For example, let's say we have an array of arrays representing the seating chart of a theater:

const seatingChart = [  ['A1', 'A2', 'A3'],
  ['B1', 'B2'],
  ['C1', 'C2', 'C3', 'C4']
];        

We can use the flat method to create a new array that contains all the seat numbers in a single level, like this:

const flatSeatingChart = seatingChart.flat();

// flatSeatingChart will be ['A1', 'A2', 'A3', 'B1', 'B2', 'C1', 'C2', 'C3', 'C4']        

In the above example, we use the flat method without any arguments to flatten the seatingChart array to a depth of 1. This creates a new array that contains all the elements of the nested arrays in a single level.

Includes

The includes method is used to determine whether an array includes a certain value. This can be useful when you need to check whether an array contains a particular element. For example, let's say we have an array of numbers representing the ages of people in a group:

const ages = [25, 32, 42, 18, 27];        

We can use the includes method to check whether the group includes any members who are younger than 21, like this:

const hasUnderageMember = ages.includes(18);

// hasUnderageMember will be true        

In the above example, we use the includes method to check whether the ages array includes the value 18. Since there is an 18 in the array, the method returns true.

Sort

The sort method is used to sort the elements of an array in place. This can be useful when you need to order the elements of an array based on some criteria. For example, let's say we have an array of strings representing the names of people in a group:

const names = ['Emma', 'Tom', 'Alice', 'Max', 'Sophia'];        

We can use the sort method to sort the names alphabetically, like this:

names.sort();

// names will now be ['Alice', 'Emma', 'Max', 'Sophia', 'Tom']        

In the above example, we use the sort method without any arguments to sort the names array in ascending alphabetical order. The original names array is modified as a result.

Reverse

The reverse method is used to reverse the order of the elements in an array in place. This can be useful when you need to reverse the order of an array for some reason. For example, let's say we have an array of numbers representing the ages of people in a group:

const ages = [25, 32, 42, 18, 27];        

We can use the reverse method to reverse the order of the ages array, like this:

ages.reverse();

// ages will now be [27, 18, 42, 32, 25]        

In the above example, we use the reverse method to reverse the order of the elements in the ages array. The original ages array is modified as a result.