10 important javascript array methods

    By: Manu
    2 years ago

    Hi guys let's see most used Javascript array methods. Dealing with data in javascript with the help of these functions becomes very easy. So let's get started

    The first one in the list is

    Filter method in javascript

    Let's see how to use filter method in javascript

    here we are using this array for example

    let players = [
                    {'name': 'Rome', 'cash': 230,  },
                    {'name': 'Roger', 'cash': 25,  },
                    {'name': 'Andrew', 'cash': 100,  },
                    {'name': 'Mark', 'cash': 450,  },
                    {'name': 'Albert', 'cash': 78,  },
                    {'name': 'John', 'cash': 1200,  },
                    {'name': 'Steve', 'cash': 590,  },
                    {'name': 'Jack', 'cash': 367,  },
                    {'name': 'Manu', 'cash': 670,  },
                    {'name': 'Jacky', 'cash': 456,  },
                    {'name': 'Tom', 'cash': 565,  },
                ];
    

    Now let's use filter function on this array,

    //Filter data in array
    
    
    let returnedData = players.filter((item)=>{
        return item.cash < 200;
    })
    
    console.log(returnedData);
    

    So here we added a condition to get only those values where cash is less than 200. Here is the outcome

    Array(3) [ {…}, {…}, {…} ]
    0: Object { name: "Roger", cash: 25 }
    1: Object { name: "Andrew", cash: 100 }
    2: Object { name: "Albert", cash: 78 }
    length: 3
    <prototype>: Array []
    


    Map method in javascript


    we are going to use this method on same array like this.

    // Map method
    
    
    let returnedData = players.map((item)=>{
        return item.cash < 200;
    });
                
    console.log(returnedData);
    

    and we get the output like this

    0: false
    1: true
    2: true
    3: false
    4: true
    5: false
    6: false
    7: false
    8: false
    9: false
    10: false
    length: 11
    <prototype>: Array []
    


    You can notice it checks where the value is less than 200 and returns "true" or "false" instead of returning value it returns boolean. that is the main difference as compare to filter method.


    Find method in javascript


    This is another useful method, where you can find the value and method returns first match from the array.

    Notice it will return first match where it meats the provided condition. here is how

    // Find method
    
    
    let returnedData = players.find((item) => {
        return item.cash > 300;
     })
    
    console.log(returnedData);
    


    And it returns

    ​
    cash: 450
    name: "Mark"
    <prototype>: Object { … }
    

    Notice it checks for values where cash is more than 300 but it returns only one element from array. Where it find more than 300 true first.


    Every method in javascript


    This method will return true if condition is true on every element of array otherwise it will return false. Here is how

    // Every method
    
    
    let returnedData = players.every((item)=>{
        return item.cash < 1000;
    });
    
    console.log(returnedData);
    

    and output looks like this

    false
    

    it returns "false" because we have 1 value in array where cash is more than 1000 "{'name': 'John', 'cash': 1200, }".


    Some method in javascript


    checks if any or some values are present in array based on condition provided, Here is how

    // Some method
    
    let returnedData = players.some((item)=>{
        return item.cash > 1000;
    });
    
    console.log(returnedData);
    

    this returns "true" because we have a value where cash is more than 1000. So it a single value returns true. Some method will return true.


    Reduce method in javascript


    this method helps in summing up some numbers. Here is a example

     // Reduce method
    
    let returnedData =  players.reduce((total,item)=>{
        return item.cash + total;
    }, 0);
    
    console.log(returnedData);
    


    Gets the cash from each element of array and adds it to in "total" variable. Note we provided 0 as second parameter as total variable is 0 when initiated.

    this returns "4731" as total.


    Include method in javascript


    this checks if array has the value.

    // Includes method
    
    let marks = [23, 34 , 56, 78, 3, 45];
    
    console.log(marks.includes(23));
    


    This will return as True as 23 is present in array.


    Foreach in javascript


    This method will loop through each element of array and we can do any operation we want on those elements. Here is how

    // Foreach method
    
    let users = [];
                
    players.forEach((item)=>{
       users.push(item.name);
    });
    
    console.log(users);
    


    Here we are getting all names from array and displaying them

    Outcome looks like this

    0: "Rome"
    1: "Roger"
    2: "Andrew"
    3: "Mark"
    4: "Albert"
    5: "John"
    6: "Steve"
    7: "Jack"
    8: "Manu"
    9: "Jacky"
    10: "Tom"
    length: 11
    <prototype>: Array []
    

    Now we can perform further operations on this names array. Let's sort this array


    Sorting array in javascript


    To sort an array we can use "sort" and "reverse" methods. here is how

    // Sorting data
    
    let users = [];
    
    players.forEach((item)=>{
       users.push(item.name);
    });
    
    console.log(users.sort());
    


    And outcome will look like this

    0: "Albert"
    1: "Andrew"
    2: "Jack"
    3: "Jacky"
    4: "John"
    5: "Manu"
    6: "Mark"
    7: "Roger"
    8: "Rome"
    9: "Steve"
    10: "Tom"
    length: 11
    <prototype>: Array []
    


    Here data is all sorted you can even sort it descending order by adding "reverse" method like this

    console.log(users.sort().reverse());
    

    Outcome will be changed

    0: "Tom"
    1: "Steve"
    2: "Rome"
    3: "Roger"
    4: "Mark"
    5: "Manu"
    6: "John"
    7: "Jacky"
    8: "Jack"
    9: "Andrew"
    10: "Albert"
    length: 11
    <prototype>: Array []
    


    Last but not least "indexOf" method


    IndexOf method in javascript


    Method returns the index of value from array. Here is an example

    let marks = [23, 34 , 56, 78, 3, 45, 56, 45, 23, 435, 56];
    
    console.log(marks.indexOf(56));
    

    The output comes "2". as the first occurrence of 56 at second index.

    If you want to get all index values for "56" here then we can use foreach loop method, Like this

    let marks = [23, 34 , 56, 78, 3, 45, 56, 45, 23, 435, 56];
    let indexes = [];
    
    marks.forEach((item, index)=>{
       if(item == 56){
            indexes.push(index);
       }
    });
    
    console.log(indexes);
    

    Here we are looping through and getting index values if "item" is equals 56.

    This code gives the output like this

    0: 2
    1: 6
    2: 10
    length: 3
    <prototype>: Array []
    


    Array of 3 values. Mainly the index values for 56 in array.


    Check our Video guide for better understanding and Practical examples.

    Hope this helps.