Most useful JavaScript Array Functions – Part 1

In this article, we are going to discuss the following two JavaScript array functions. Both of these functions are widely used in industry and make the JavaScript code clean, modularized, and easy to understand.

  1. Array.prototype.every()
  2. Array.prototype.some()

Array.prototype.every(): This function is used when you need to validate each element of a given array. It accepts a callback function as an argument which is called for each element of the array. The callback function has to return either true or false. If all elements of the array satisfy the validation function and thus callback function returns true on all elements of the array, then it returns true. Otherwise, it returns false, as soon as it encounters the first element which does not satisfy the validator function.

Syntax:

arr.every(callback(element[, index[, array]])[, thisArg])

Parameters: This function accepts five parameter as mentioned above and described below:

  • callback: This parameter holds the function to be called for each element of the array.
  • currentValue: The parameter holds the value of the elements being processed currently.
  • index: This parameter is optional, it holds the index of the currentValue element in the array starting from 0.
  • array: This parameter is optional, it holds the complete array on which Array.every is called.
  • thisArg: This parameter is optional, it holds the context to be passed as this to be used while executing the callback function. If the context is passed, it will be used as this for each invocation of the callback function, otherwise undefined is used as default.

Examples: Given an array, write a function to check if all elements of that array are less than 100 or not.



  • Program 1: In this code, we will check the array by using a loop function. So the naive approach is to use for a loop as shown below.

    Although the below implementation is easy to understand for any novice programmer, there are some un-necessary checks which the programmer has to take care of. For example, the short-circuiting mechanism i.e. the programmer has to explicitly make sure that as soon as the loop encounters the first element which fails the given condition, the loop should break and return false. Also until and unless the programmer dives deep into the logic of the code, he/she won’t be able to understand what this for loop is doing.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    let numbers = [30,60,190];
    let result = true;
    for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] >= 100) {
            result = false;
            break;
        }
    }
    document.write(result);

    chevron_right

    
    

    Output:

    false
  • Program 2: In this code, we will check the array by using a Array.prototype.every() function. So the naive approach is to use for a loop as shown below.

    with the use of Array.every(), the same behavior can be achieved with much clearer, intuitive and less code.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    let numbers = [30,60,90];
    let result = numbers.every(function(element){
       return(element < 100);
     });
       
    document.write(result);

    chevron_right

    
    

    Output:

    true

Examples: Given an array, write a function to check if all elements of that array are of a specified data type.

  • Program 1: Again naive approach would be to iterate over the array using for loop. This code snippet has the same loopholes as the previous example.
     

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function fnCheckDatatype_Every(arr, sDatatype){
        for(var i = 0 ; i < arr.length; i ++)
        {
          if(typeof(arr[i]) !== sDatatype)
          {
              return false;
          }
        }
    }
      
    fnCheckDatatype_Every(["Geeks",4,"Geeks"],"string");
    fnCheckDatatype_Every(["Geeks","for","Geeks"],"string");

    chevron_right

    
    

    true
    false
    
  • Program 2: Using arr.Every() those loopholes are taken care of again in the code snippet below. Another point to note in the code snippet below is that we are passing two arguments to the array.every() function. The first one is the callback function (anonymous function in our case) and the second one is sDatatype. Because we need an external variable in each call of a callback function, we pass it as a second argument as ‘this’ variable.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function fnCheckDatatype_Every(arr, sDatatype){
    return arr.every(function(element){
                return typeof(element) === sDatatype;
            },sDatatype);
    }
      
    fnCheckDatatype_Every(["Geeks","for","Geeks"],"string");
    fnCheckDatatype_Every(["Geeks",4,"Geeks"],"string");

    chevron_right

    
    

    Output:

    true
    false
    

Array.prototype.some(): This is in a way opposite to Array.every(). This function is used when you need to check if at least one element of a given array passes the test implemented by the callback function. Array.some() accepts a callback function as argument which has to return either a true or false. The callback function is called for each element of the array until it returns true for at least one element of the array. If neither of the elements in the array pass the test of callback function, it returns false.



Syntax:

arr.some(callback(element[, index[, array]])[, thisArg])

Parameters: This function accepts four parameter as mentioned above and described below:

  • callback: This parameter holds the function to be called for each element of the array.
  • currentValue: The parameter holds the value of the elements being processed currently.
  • index: This parameter is optional, it holds the index of the currentValue element in the array starting from 0.
  • array: This parameter is optional, it holds the complete array on which Array.every is called.
  • thisArg This parameter is optional, it holds the context to be passed as this to be used while executing the callback function. If the context is passed, it will be used as this for each invocation of the callback function, otherwise undefined is used as default.

Examples: Given an array, write a function to check if an array contains any number greater than 100.

  • Program 1: Naive Approach
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function fnIsGreaterThan100_loop(arr){
        for(var i = 0 ; i < arr.length; i ++){
          if(arr[i] > 100){
              return true;
          }
       }
       return false;
    }
      
    fnIsGreaterThan100_loop([30,60,90,120]);
    fnIsGreaterThan100_loop([30,60,90]);

    chevron_right

    
    

    Output:

    true
    false
    
  • Program 2:Using Array.some()
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function fnIsGreaterThan100_some(arr){
         return arr.some(function(element){
                return(element> 100);
         });
    }
      
    fnIsGreaterThan100_some([30,60,90,120]);
    fnIsGreaterThan100_some([30,60,90]);

    chevron_right

    
    

    Output:

    true
    false
    

Examples: Given an array, write a function to check if an array contains an even number.

  • Program 1: Naive approach
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function fnIsEven_loop(arr){
        for(var i = 0 ; i < arr.length; i ++){
          if(arr[i] % 2 === 0){
              return true;
          }
        }
        return false;
    }
      
    fnIsEven_loop([1,3,5]);
    fnIsEven_loop([1,3,5,6]);

    chevron_right

    
    

    Output:

     false
     true
    
  • Program 2: Using Array.some()
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function fnIsEven_some(arr){
           return arr.some(function(element){
                return(element %2 === 0);
           });
    }
      
    fnIsEven_some([1,3,5]);
    fnIsEven_some([1,3,5,6]);

    chevron_right

    
    

    Output:

     false
     true
    

One of the common mistakes programmers do while using array functions like Array.every() and Array.some() is that they forget the return the value in the callback function. Mind it, if you don’t return any value from the callback function, null is returned which will be interpreted as false.

Also, it is important to know that these array functions were introduced in ECMAScript 5. So these functions are supported in IE9 or higher. If you need to use it for older browsers as well, then a library like underscore.js can come to your rescue which has an equivalent implementation of such functions.



Must use JavaScript Array Functions -Part 2

Must use JavaScript Array Functions -Part 3

Additionally, if you wish to dive deeper into the above functions, you can refer to following official links
1. http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.16
2. http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.17

About the author:

“Harshit is a technology enthusiast and has keen interest in programming. He holds aharshit-jain B.Tech. degree in Computer Science from JIIT, Noida and currently works as Front-end Developer at SAP. He is also a state level table tennis player. Apart from this he likes to unwind by watching movies and English sitcoms. He is based out of Delhi and you can reach out to him at https://in.linkedin.com/pub/harshit-jain/2a/129/bb5

If you also wish to showcase your blog here,please see GBlog for guest blog writing on GeeksforGeeks.

full-stack-img




My Personal Notes arrow_drop_up

Improved By : ManasChhabra2, yogigoodman