Need To Know JavaScript Array-Methods

Introduction

 
If you are learning and using JavaScript for a while now and always messing with different ways to use array-methods, you are in the right place because will be discussing the commonly used array methods and give some straight forward examples so you can get started right away.
 

Background

 
Just to give you an idea about my experience with JavaScript arrays, I thought that I need to learn almost everything about it but in reality, you won’t be using every single method in a certain project. However, knowing everything doesn’t hurt but I do suggest that learning the commonly used ones will get you started and be productive. OK, then let’s get started.
 
In this post, we are going to discuss the following array methods:
  • map
  • filter
  • find
  • some
  • every
  • reduce
  • include
Before we start in every method mentioned in the list above. See the array declaration below that will be used for the entire method examples. 
  1. const employees =  
  2. [{   
  3.     employee: 'Eleanor R. Crane',  
  4.     company: 'Tellus Faucibus Leo Incorporated',  
  5.     salary: 15200   
  6. },  
  7. {   
  8.     employee: 'Haviva E. Lane',  
  9.     company: 'Eu Neque Pellentesque Incorporated',  
  10.     salary: 13333   
  11. },  
  12. {   
  13.     employee: 'Merrill F. Morrison',  
  14.     company: 'Lobortis Quam Ltd',  
  15.     salary: 1450   
  16. },  
  17. {   
  18.     employee: 'Halee L. Hensley',  
  19.     company: 'Elit Corp.',  
  20.     salary: 15872  
  21. },  
  22. {   
  23.     employee: 'Hamish T. Trevino',  
  24.     company: 'Rhoncus LLC',  
  25.     salary: 14214   
  26. }];  

Map

 
This method returns a new set of arrays but doesn't change the original array. 

  1. //syntax: array.map(function(currentValue, index,currentArray), thisValue)  
  2. /** 
  3.  * I want to know the list of companies where the employees work.  
  4.  */  
  5. const companies = employees.map((currentEmployee) => {  
  6.     return currentEmployee.company;  
  7. });  
  8.   
  9. /** 
  10.  * Output:  
  11.  * 0: "Tellus Faucibus Leo Incorporated" 
  12.  * 1: "Eu Neque Pellentesque Incorporated" 
  13.  * 2: "Lobortis Quam Ltd" 
  14.  * 3: "Elit Corp." 
  15.  * 4: "Rhoncus LLC"  
  16.  */  
  17. console.log(companies);   

Filter

 
This method returns a new set of arrays that will pass a certain implemented test within the provided function. 
  1. //syntax: array.filter(function(currentValue, index, currentArray), thisValue)  
  2. /** 
  3.  * I want to get the employees having a salary of more than 15k.  
  4.  */  
  5. const highSalary =  employees.filter((currentEmployee) => currentEmployee.salary >= 15000);  
  6.   
  7. /** 
  8.  * Output:  
  9.  * 0: {employee: "Eleanor R. Crane", company: "Tellus Faucibus Leo Incorporated", salary: 15200} 
  10.  * 1: {employee: "Halee L. Hensley", company: "Elit Corp.", salary: 15872} 
  11.  */  
  12. console.log(highSalary);  

Find

 
This method returns the first element that satisfies the implemented test within the provided function. 
  1. //syntax: array.find(function(currentValue, index, currentArray), thisValue)  
  2. /** 
  3.  * I want to get the first employee having a salary of more than 15k.  
  4.  */  
  5. const firstEmployeeWithHighSalary = employees.find((currentEmployee) => currentEmployee.salary >= 15000);  
  6.   
  7. /** 
  8.  * Output:  
  9.  * {  
  10.  *   company: "Tellus Faucibus Leo Incorporated" 
  11.  *   employee: "Eleanor R. Crane" 
  12.  *   salary: 15200 
  13.  * } 
  14.  */  
  15. console.log(firstEmployeeWithHighSalary);   

Some

 
This method returns a boolean value and returns true when at least one of the elements inside the array passes the test implemented within the provided function else false. 
  1. //syntax: array.some(function(currentValue, index, currentArray), thisValue)  
  2. /** 
  3.  * I want to check if any employee name starts with letter H.  
  4.  */  
  5. const hasEmployeeNameStarts_With_Letter_H = employees.some((currentEmployee)  => currentEmployee.employee.startsWith("H"));  
  6. /** 
  7.  * Output: true 
  8.  */  
  9. console.log(hasEmployeeNameStarts_With_Letter_H);  
  10. /** 
  11.  * I want to check if any employee name starts with letter A. 
  12.  */  
  13. const hasEmployeeNameStarts_With_Letter_A = employees.some((currentEmployee)  => currentEmployee.employee.startsWith("A"));  
  14. /** 
  15.  * Output: false 
  16.  */  
  17. console.log(hasEmployeeNameStarts_With_Letter_A);  

Every

 
This method returns a boolean value and returns true when all elements within the array pass the test implemented within the provided function else false.
  1. //syntax: array.every(function(currentValue, index, currentArray), thisValue)  
  2. /** 
  3.  * I want to check if all employee's salaries are below 16k.  
  4.  */  
  5. const everyEmployeeHas_Salary_Less_Than_16K = employees.every((currentEmployee) => currentEmployee.salary <= 16000);  
  6.   
  7. //output: true  
  8. console.log(everyEmployeeHas_Salary_Less_Than_16K);  

Reduce

 
This method returns a single value that resulted from the reducer function that you have provided on each element of the array. 
  1. //syntax: array.reduce(function(total, currentValue), initialValue)  
  2. /** 
  3.  * In our case the initial value equals zero.  
  4.  * Then the accumulator with is defined as totalSalary will hold the initial and previous value within the array.  
  5.  * the sequence looks like this:  
  6.  * 0 + 15200 + 13333 + 1450 + 15872 + 14214 === 60069 
  7.  */  
  8. const totalSalaryOfEmployees = employees.reduce((totalSalary, currentEmployee) => {  
  9.   
  10.     return totalSalary + currentEmployee.salary;  
  11.   
  12. }, 0);  
  13.   
  14. //output: 60069  
  15. console.log(totalSalaryOfEmployees);  

Include

 
This method checks whether an array contains a specified element that returns true if does exists else false.
 
Note
We will be using different array declaration. The usage includes: 
  1. const banks = ["HSBC""Wells Fargo""Bank of China""Union Bank"];  
  2.   
  3. const doesHSBC_exists = banks.includes("HSBC");  
  4.   
  5. console.log(doesHSBC_exists);  

Summary

 
In this article, we have discussed the following:
  • map
  • filter
  • find
  • some
  • every
  • reduce
  • include
I hope you have enjoyed this article, as I have enjoyed writing it. Until next time, happy programming!
 
References