Useful JavaScript array functions to make things easy

Arrays are the types of data that we never miss when we create an application, it is very useful as it allows us to manage and manipulate list of items and data, It is also reliable for us developers when we render these data in a view by just using loops or iterations. in JavaScript arrays are not just arrays, they have built in functions we can use to iterate and even modify our array directly.

As a Javascript Developer (Angular, Node And React) these functions are very useful and I've used these to all of my projects, I've replaced traditional for loops with the built in functions and I must say that it code be cleaner using these built in functions.

In this tutorial, I will introduce 10 built in functions that are commonly used for arrays, let's start with the basic and we can say the easiest one.

1. forEach

The forEach(). is the built in function that i would say the commonly used function in an array, It is similar to for loop that will allow us to iterate each elements in the array. this means we can treat this as a short hand for the for loop iterator. Let's see the example below on how to use the forEach()..

array1 = [1, 2, 3]; 
sampleForEach(){
   this.array1.forEach(element=>
    { 
       console.log(element);   
     });   
}
// Output
// 1
// 2
// 3

We can see above that each elements on array 1 is printed, this means that we have iterated every element in an array, the forEach().functions takes callback function as a parameter and the function takes every element as a parameter for us to get each element.

2. map

The next function we will tackle is the map() function, I decided to discuss this next because it is also an iterator like forEach(). the map function just like the forEach(). will allow us to iterate every element the array, so wait, what is the difference? the forEach(). does not return a new copy of the array on the other hand, the map function does, let's see the example below.

array2 = [1, 2, 3];
sampleMap() {
    const forEachArray = this.array2.forEach((element => element + 1)); 
    //forEachArray = undefined
     const mapArray = this.array2.map((element) => element + 1);  
    //mapArray = [2, 3, 4]
 }

we can see in the example given, the forEach() function returns nothing, we can only modify each element inside the callback function compared with the map function, it returns a new copy of the array with new values as we have added 1 for each element in the callback function.

3. filter

The next function is the filter() function, this is very useful when we want to modify our array depending on a certain criteria the an element must have, same with the previous functions, it accepts a callback function and will return a conditional operator that will determine what elements should be filtered out in the array.

 array3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 sampleFilter() {
 const filteredArray = this.array3.filter((element) => element % 2 === 
  0);
 console.log(filteredArray); //output [2, 4, 6, 8, 10]
  }

in the example above, we want to filter out odd even numbers in the array having that we have added an expression where the element if divide by 2 should be zero, this means all even numbers will satisfy this condition and will be included in the new array.

4. find

next is the find() function, from the name itself, it allows us to search for the first element that satisfies the condition that the callback function returns. compared to filter where it returns every element that satisfies the condition in a form of array.

 array4 = [10, 20, 30, 40, 50];
 sampleFind() {
    const foundArray = this.array4.find(element => element > 20);
    console.log(foundArray) // 30
  }

in the example above, we the 3rd element is returned with a value of 30 as this is the firs element in the array that satisfies the condition (element > 20)

5. reduce

the next function is the reduce() function, this allows us to place an operator in the callback function and executing it on each element that will return a single value, let us see the example below.

 array5 = [10, 20, 30, 40, 50];
 sampleReducer() {
 const reducedArray = this.array5.reduce((returnedValue, currentValue) 
     => returnedValue + currentValue);
 console.log(reducedArray) // 150
  }

in the example provided, we have reduced array5 to a single value by adding all elements in the array, the first parameter in the callback function (returnedValue) is the previous value that is returned from the previous element.

6. concat

the concat function from the name itself lets us concatenate to arrays into a single array.

 array6A = [1, 2 , 3];
 array6B = [4, 5, 6];
 sampleConcatArray() {
 const array6C = this.array6A.concat(this.array6B);
 console.log(this.array6); // [1, 2, 3, 4, 5 ,6 ];
  }

in the example provided above, array6B is provided as a parameter in the concat() function called in array6A, this means array6B elements will be concatenated after the elements of array6A. we can also concatenate multiple arrays by providing multiple array paremeters in the concat() function.

array6A = [1, 2 , 3];  
array6B = [4, 5, 6];  
array6C = [7, 8]
sampleConcatArray() {  
    const array6D = this.array6A.concat(this.array6B, this.array6C);  
    console.log(this.array6D); // [1, 2, 3, 4, 5 ,6, 7, 8 ];
 }

7. flat

now let's move on to a more advance function which is the flat() function, this is used when we have arrays that have elements which is also an array, this function will allow us for the nested arrays to be concatenated with the parent array returning a single array with the nested array values.

 array7 = [10, 20, 30, 40, 50, 60, [70, 80]];
 sampleFlatArray() {
   const flattenedArray = this.array7.flat();
   console.log(flattenedArray);
   //[10, 20, 30, 40, 50, 60, 70, 80]
  }

we can see in the example that array7 has an array element which is the 7th element, executing the flat() function will concatenate the 7th element to the parent element returning a single element. What if the 7th element also contains an array element and we still want to flatten it into a single array, in flat function we can specify the depth level where the execution of flat() function will occur.

array7 = [10, 20, 30, 40, 50, 60, [70, 80, [90, 100]];  sampleFlatArray() {    
   const flattenedArray = this.array7.flat(2);    
    console.log(flattenedArray);  
    // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
}

In the example above, we have specified the depth level into 2, this means that array elements in the second level will be included in the flattening of the array, in this case the element [90, 100] will also be concatenated in the parent array.

Another question what if we are not sure on the exact depth of array elements and still we want to flatten it into a single array, we can us the Infinity as a parameter to specify that the flat function will be executed on the possible deepest array child.

 array7 = [10, 20, 30, 40, 50, 60, [70, 80, 90, [100, [101, 102]]]];
 sampleFlatArray() {
    const flattenedArray = this.array7.flat();
    console.log(flattenedArray); 
    // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 101, 102]
  }

Removing array holes

flat functions can also be used in removing empty slots in arrays

 array7 = [10, 20, , 30, 40];  
 sampleFlatArray() {
   const flattenedArray = this.array7.flat();  
   console.log(flattenedArray); // [10, 20, 30, 40] 
}

8. flatMap

another useful function is the flatMap() function, the process of the flatMap() function is similar to a map followed by a flat function with a depth level of 1, this means each elements in the array will be iterated or mapped and will be flattened into a single array, let's see the example below.

 array8 = [[10], [20], [30]];
 sampleFlatMapArray() {
    const flattenedArray = this.array8.flatMap(element => 
    element[0] + 1);
    console.log(flattenedArray); // output [11, 21, 31];
  }

in the given example, array8 consist of array elements, the flatMap() has a callback function which returns an element[0] + 1 expression that will add 1 to the element at index 0 of each of the elements of array 8, this is also equivalent to:

array8.map((element => element[0]) + 1) 

and this will return the value [[11], [21], [31]]. After executing the map function, this will now flatten the value into an single array resulting to [11, 21, 31], this is equivalent to the flat() function.

array8.flat() 

9. indexOf

the next function to discuss is the indexOf() function, this will return the index of the first element that is being searched, it accepts one or two parameters, the first one is the element that we are searching and the second one is the index where the searching should start (second parameter is optional and the default value is zero).

 array9 = [0, 1, 2, 3, 1, 4, 2, 3, 1];
 sampleindexOfArray() {
 let element;
 element = this.array9.indexOf(1);
 // element = 1
 element = this.array9.indexOf(1, 2);
 // element = 4
 element = this.array9.indexOf(9, 0);
 // element = -1
  }

in the example above the first usage of indexOf() is we only passed a single parameter which is the element we are trying to search, this means this will start the searching of element 1 at index 0. The next usage is we specified the start index to 2, this will search the array from index 2 of the element 1. The last example has an output of -1 having element 9 is not found in the array.

10. includes

the last function that we will tackle is the includes() function, from the name itself it will check if the element is found in the array and this will return a boolean value, we can also specify the start index where the search for the element will start.

 array10 = [0, 1 ,1, 2,  3 ,4];
 sampleIncludeArray() {
 let included;
 included = this.array10.includes(1);
 //true
 included = this.array10.includes(1, 2);
 //true
 included = this.array10.includes(1, 3);
 //false
  }

In the example above the first usage returns true as 1 is found in the array and the search starts at 0 having no specified start index, the second usage has a specified index where the value is still true having 1 element is found at index 2 and the last example returns false as the 1 element is not found from the start index 3.

And that's it! these are the 10 builtin Array functions that are commonly used in my JavaScript projects but there are still several builtin functions for arrays I had not mentioned that are useful in developing applications and feel free to explore these to expand you knowledge.

I hope you learned a lot from this post and feel free to share it if you enjoyed the tutorial :)