Javascript Array Methods

In JavaScript just like any other programming languages, array is a data type which is used to store different elements. It is often used when we want to store list of elements and access them by a single variable.

This article is aimed at helping us understand the different operations which we can be carry out on arrays especially when it comes to ECMA Script 2015 otherwise known as ES6

In the course of this article, we'll be looking at seven of those array methods which are:

• ForEach
• Map
• Filter
• Reduce
• Some
• Every
• Find

Array ForEach

This is a method that exists in Array.prototype and it is supported by all major browsers. It is an entry level tool which is used to iterate over an array returning each element in the array and its index. Think of ForEach as: I want to access my array values one after the other and in turn do something with them.

Look at this array of objects

const products = [
  {id : 1, name : "Bread", price : 200, sold : false},
  {id : 2, name : "Sugar", price : 100, sold : true},
  {id : 3, name : "Chocolate", price : 150, sold : true},
  {id : 4, name : "Milk", price : 50, sold : false}
];

Using ForEach,we can get the name of each item in the array by iterating over the array and return each object,then we can access the name key this way

products.forEach((product, index) => {
    console.log(index: product.name);
});
// outputs
1: Bread
2: Sugar
3: Chocolate
4: Milk

Note This method does not return a new array, it doesn't change the array and it also serve as the modern for loop. Check the Github Repo for the for loop implementation .

Array Map

This method unlike the ForEach allows us to iterate over an array,access each value and return a new value for each iteration which at the end creates a new array from the main array. This process does not modify the original array but instead returns a new different array.

For instance,lets say we want apply some coupon to the price of all the item in the products array we used before by making the new price to be half the original price,we can achieve this by using Array Map this way.

const products = [
  {id : 1, name : "Bread", price : 200, sold : false},
  {id : 2, name : "Sugar", price : 100, sold : true},
  {id : 3, name : "Chocolate", price : 150, sold : true},
  {id : 4, name : "Milk", price : 50, sold : false}
];

// Getting half of the price using Map
const halfPrice = products.map(product => {
  return {
    ...product,
    price: product.price / 2
  }
});

If you look closely well, you will notice that we iterated over the array and returned every single object in the array back by using the spread operator (...product) which prevents us from changing the original array, but the cool thing here is that we later lay hold on the price key of each object and divided it by 2. If you try and run this code, you will come out with an output like this

[
   { id: 1, name: 'Bread', price: 100, sold: false }
   {id: 2, name: 'Sugar', price: 50, sold: true}
   {id: 3, name: 'Chocolate', price: 75, sold: true}
   {id: 4, name: 'Milk', price: 25, sold: false}
 ]

Again,check out the Github repo for the normal implementation of this method

Array Filter

This method allows us to under some condition return some certain elements from an array into a new array. One of the best use case is to remove items from an array by excluding them from the new array that will be returned. The best way to understand this method is that the function will be returning an expression that either evaluates to true or false. items that evaluates to true are included in the new array while those that evaluates as false are excluded. Lets look at some practical implementation using the array we have been working on before. But what are we going to check? Cool! Lets say we want to exclude all the products that are costly assuming that by being costly we mean products that has its price greater than 100.

 const products = [
  {id : 1, name : "Bread", price : 200, sold : false},
  {id : 2, name : "Sugar", price : 100, sold : true},
  {id : 3, name : "Chocolate", price : 150, sold : true},
  {id : 4, name : "Milk", price : 50, sold : false}
];

 //So to filter the costly products we do the following
 const cheapProducts = products.filter(product => product.price <= 100);
 console.log(cheapProducts);

//Outputs
[
 { id: 2, name: 'Sugar', price: 100, sold: true },
 { id: 4, name: 'Milk', price: 50, sold: false }
];

That will be that for the first part of this article. Follow me on twitter Ifeanyichukwu John so that you can be notified when the second part drops.

Thank you for reading 👌👍