We now have a youtube channel. Subscribe!

How to implement the various JavaScript Array Methods available?



Hello guys! morning to you all. Firstly let me welcome you to my new tutorial on JavaScript. In my previous tutorial, I talked about how to implement the various various JavaScript Array Properties. In this tutorial post, am going to be discussing about the various JavaScript array methods available.

We will be looking at 21 various array methods available in JavaScript, each of these methods will be explained properly with the help of an example. Take your time to go through them properly and ask your questions where necessary and your questions will be attended to as soon as possible. Now we will be starting with the concat() method.


Array concat() Method

JavaScript array concat() method returns a new array comprised of this array joined with two or more arrays.

Syntax

Its syntax is as follows -

array.concat(value 1,     value2, .....,   valueN);

valueN - Arrays or values to concatenate to the resulting array.

Return Value

Returns the length of the array.

Example

You can try the following example below for better understanding on how to implement the array concat() method.

<html>
     <head>
          <title>JavaScript Array concat Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  alpha = ["x",   "y",   "z"];
               var  numeric = [1,   2,   3];
               var  alphaNumeric = alpha.concat(numeric);
               document.write("alphaNumeric : "  +  alphaNumeric );      
          </script>
     </body>
</html>   

Output

Below is the output of the above example.

alphaNumeric :  x, y, z, 1, 2, 3

You can also check out our tutorial post on: Exploring JavaScript Boolean methods with simple and clear examples 

Array every() Method

JavaScript array every method tests whether all the elements in an array passes the test implemented by the provided function.

Syntax

Its syntax is as follows -

array.every(callback[,   thisObject] );

Parameter Details

  • callback - Function to test for each element.

Return Value

Returns true if every element this array satisfies the provided testing function.

Compatibility

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.every)  {
     Array.prototype.every = function(fun  /*,   thisp*/)  {
          var  len = this.length;
          if  (typeof  fun  !  = "function")
          throw new TypeError();

          var  thisp = arguments[1];
          for  (var  i = 0;   i  <  len;   i++)  {
               if  (i  in  this  &&  !fun.call(thisp,    this[i],  i,  this))                  
               return false;
          }
          return true;
     };
}

Example

Try the following example below.

<html>
     <head>
          <title>JavaScript Array every Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.every)  {
                    Array.prototype.every = function(fun  /*,   thisp*/)  {
                         var  len = this.length;
                         if  (typeof  fun  !  = "function")
                         throw new TypeError();

                         var  thisp = arguments[1];
                         for  (var  i = 0;   i  <  len;   i++)  {
                              if  (i  in  this  &&  !fun.call(thisp,    this[i],  i,  this))                  
                              return false;
                         }
                         return true;
                    };
               }
               function  isBigEnough(element,   index,    array)   { 
                    return  (element  >=  10);
               }
               var   passed = [12,  5,  8,  130,  44].every(isBigEnough);    
               document.write("First Test Value : " +    passed  +  "<br />"  );     

               passed = [12,  54,  18,  130,  44].every(isBigEnough);      
               document.write("Second Test Value : " +  passed );
          </script>
     </body>
</html>

Output

Below is the output of the above example.

First Test Value :  false 
Second Test Value :  true 

You can also read our tutorial post on: Css outline


Array filter() Method

JavaScript array filter method creates a new array with all elements that passed the test implemented by the provided function.

Syntax

Its syntax is as follows -

array.filter(callback[,   thisObject] );

Parameter Details

  • callback - Function to test for each element.
  • thisObject - Object to use as this when executing callback.

Return Value

Returns created array.

Compatibility

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.filter)  {
     Array.prototype.filter = function(fun  /*,   thisp*/)  {
          var  len = this.length;
          if  (typeof  fun  !  = "function")
          throw new TypeError();

          var  res = new  Array();
          var  thisp = arguments[1];
          for  (var  i = 0;   i  <  len;   i++)  {
               if  (i  in  this )  {
                    var  val =  this[ i ];    //  in case fun mutates this 
                    if  (fun.call(thisp,  val,  i,   this))
                    res.push(val);
               }
          }
          return res;
     };
}

Example

Try the following example below.

<html>
     <head>
          <title>JavaScript Array filter Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.filter)  {
                    Array.prototype.filter = function(fun  /*,   thisp*/)  {
                         var  len = this.length;
                         if  (typeof  fun  !  = "function")
                         throw new TypeError();

                         var  res = new Array();
                         var  thisp = arguments[1];
                         
                         for  (var  i = 0;   i  <  len;   i++)  {
                              if  (i  in  this )  {              
                                   var  val = this[ i ];    //  in case fun mutates this      
                                   if  (fun.call(thisp,   val,   i,   this))
                                   res.push(val);
                              }
                         }
                         return  res;
                   };
               }
               function  isBigEnough(element,   index,    array)   { 
                    return  (element  >=  10);
               }
               var   filtered = [12,  5,  8,  130,  44].filter(isBigEnough);    
               document.write("Filtered Value : " +    filtered );     
          </script>
     </body>
</html>

Output

Below is the output of the above example.

Filtered Value : 12,  130,  44

You can also read our tutorial post on: Css table

Array forEach() Method

The array forEach() method calls a function for each element in the array.

Syntax

Its syntax is as follows -

array.forEach(callback[,   thisObject] );

Parameter Details

  • callback - Function to test for each element.
  • thisObject - Object to use as this when executing callback.

Return Value

Returns the created array.

Compatibility

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.forEach)  {
     Array.prototype.forEach = function(fun  /*,   thisp*/)  {
          var  len = this.length;
          if  (typeof  fun  !  = "function")
          throw new TypeError();

          var  thisp = arguments[1];
          for  (var  i = 0;   i  <  len;   i++)  {
               if  (i  in  this )  {
               fun.call(thisp,   this[ I ],   i,   this); 
          }
     };
}

Example

Try the following example below.

<html>
     <head>
          <title>JavaScript Array forEach Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.forEach)  {
                    Array.prototype.forEach = function(fun  /*,   thisp*/)  {
                         var  len = this.length;
                         if  (typeof  fun  !  = "function")
                         throw new TypeError();

                         var  thisp = arguments[1];
                         for  (var  i = 0;   i  <  len;   i++)  {
                              if  (i  in  this )  {              
                              fun.call(thisp,   this[ i ],    i,   this);
                         }
                    };
               }
               function  printBr(element,   index,    array)   { 
                    document.write("<br />["  +  index  +  "] is : " +  element);      
               }
               [12,  5,  8,  130,  44].forEach(printBr);
          </script>
     </body>
</html>

Output

Below is the output of the above example.

[ 0 ]  is  12
[ 1 ]  is  5
[ 2 ]  is  8
[ 3 ]  is  130
[ 4 ]  is  44


Array indexOf() Method

The JavaScript array indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Syntax

Its syntax is as follows -

array.indexOf(searchElement[,   fromIndex] );

Parameter Details

  • searchElement - Element to locate in the array.
  • fromIndex - The index at which to begin the search. Defaults to 0, I.e. the whole array will be searched. If the index is greater than or equal to the length of the array, -1 is returned.

Return Value

Returns the index of the found element.

Compatibility

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.indexOf)  {
     Array.prototype.indexOf = function(elt  /*,   from*/)  {
          var  len = this.length;
          
          var  from = Number(arguments[ 1 ])  || 0;
          from =  (from < 0)
          ?  Math.ceil(from) 
          :   Math.floor(from);

          if  (from < 0)
          from  +=  len;

          for  (;   from  <  len;   from++)  {
               if   (from in this &&  this[from]  ===  elt)
               return from; 
          }
          return -1;
     };
}

Example

Try the following example below.

<html>
     <head>
          <title>JavaScript Array indexOf Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.indexOf)  {
                    Array.prototype.indexOf = function(elt  /*,   from*/)  {
                         var  len = this.length;
                         
                         var  from = Number(arguments[ 1 ])  ||  0;
                         from =  (from  <  0)
                         ?  Math.ceil(from) 
                         :  Math.floor(from);

                         if  (from  <  0)
                         from  +=  len;

                         for  (;   from  <  len;   from++)  {
                              if  (from in this &&  this[from]  ===  elt)
                              return from; 
                         }
                         return -1;
                    };
               }
               var  index = [12,  5,  8,  130,  44].indexOf(8);
               document.write("index is : "  +  index  +  "<br />" );      
               
               var  index = [12,  5,  8,  130,  44].indexOf(13);
               document.write("index is : "  +  index );
          </script>
     </body>
</html>

Output

Below is the output of the above example.

index is  :   2
index is  :   -1

You can can also read one of our recommended post on:  JavaScript Variables


Array join() Method

JavaScript array join() method joins all the elements of an into a string.

Syntax

Its syntax is as follows -

array.join(separator);

Parameter Details

separator - Specifies a string to separate each element of an array. If omitted, the array element are separated with a comma.

Return Value

Returns a string after joining all the array elements. 

Example

You can try the following example below for better understanding on how to implement the array join() method.

<html>
     <head>
          <title>JavaScript Array join Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  arr = new Array("First" ,  "Second" ,  "Third");
               
               var  str = array.join();
               document.write("str  : "  +   str  +  "<br />"  );

               var  str = array.join(" ,    ");
               document.write("str  : "  +    str    +  "<br />" ); 

               var  str = array.join("  +   ");
               document.write("str  :  "  +   str );
          </script>
     </body>
</html>   

Output

Below is the output of the above example.

str  :  First, Second, Third 
str  :  First, Second, Third
str  :  First + Second + Third

You can also read our tutorial post on: Html JavaScript

Array lastIndexOf() Method

The JavaScript array lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.

Syntax

Its syntax is as follows -

array.lastIndexOf(searchElement[,   fromIndex] );

Parameter Details

  • searchElement - Element to locate in the array.
  • fromIndex - The index at which to begin the search backwards. Defaults to array's length, I.e. the whole array will be searched. If negative, it is taken as the offset from the end of the array.

Return Value

Returns the index of the found element from the last.

Compatibility

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.lastIndexOf)  {
     Array.prototype.lastIndexOf = function(elt  /*,   from*/)  {
          var  len = this.length;
          var  from = Number(arguments[ 1 ]);

          if  (isNAN(from))  {
               from = len  -1;
          } else  {
               from =  (from < 0)
               ?  Math.ceil(from) 
               :   Math.floor(from);

               if  (from < 0)
               from  +=  len;

               else  if  (from  >=  len)
               from  =  len  -1;
          }

          for  (;   from  >  -1;   from--)  {
               if   (from in this &&  this[from]  ===  elt)
               return from; 
          }
          return -1;
     };
}

Example

Try the following example below.

<html>
     <head>
          <title>JavaScript Array lastIndexOf Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.lastIndexOf)  {
                    Array.prototype.lastIndexOf = function(elt  /*,   from*/)  {      
                         var  len = this.length;
                         var  from = Number(arguments[ 1 ]);

                         if  (isNAN(from))  {
                              from =  len  -1;
                         }  else {
                              from =  (from  <  0)
                              ?  Math.ceil(from) 
                              :  Math.floor(from);

                              if  (from  <  0)
                              from  +=  len;

                              else  if  (from  >=  len)
                              from  =  len   -1;
                         }
                         for  (;   from  >   -1;   from--)  {
                              if  (from in this &&  this[from]  ===  elt)
                              return from; 
                         }
                         return -1;
                    };
               }
               var  index = [12,  5,  8,  130,  44].lastIndexOf(8);
               document.write("index is : "  +  index  +  "<br />" );      
               
               var  index = [12,  5,  8,  130,  44,  5].lastIndexOf(5);
               document.write("index is : "  +  index );
          </script>
     </body>
</html>

Output

Below is the output of the above example.

index is  :   2
index is  :   5

You can also check out this recommended post on: JavaScript Operators


Array map() Method

JavaScript array map() method creates a new array with the results of calling a provided function on every element in this array.

Syntax

Its syntax is as follows -

array.map(callback[,   thisObject] );

Parameter Details

  • callback - Function that produces an element of the new Array from an element of the current one.  
  • thisObject - Object to use as this when executing callback.

Return Value

Returns the created array.

Compatibility

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.map)  {
     Array.prototype.map = function(fun  /*,   thisp*/)  {
          var  len = this.length;
          
          if  (typeof  fun  !  = "function")
          throw new TypeError();

          var  res = new Array(len);
          var  thisp = arguments[ 1 ]; 
          
          for  (var  i = 0;   i  <  len;   i++)  {
               if  ( i  in  this )                  
               res[ i ] = fun.call(thisp,   this[ i ],   i,   this);
          }
          return res;
     };
}

Example

Try the following example below.

<html>
     <head>
          <title>JavaScript Array map Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.map)  {
                    Array.prototype.map = function(fun  /*,   thisp*/)  {         
                         var  len = this.length;
                         
                         if  (typeof  fun  !  = "function")
                         throw new TypeError();

                         var  res = new Array(len);
                         var  thisp = arguments[1];
                         
                         for  (var  i = 0;   i  <  len;   i++)  {
                              if  ( i  in  this )                  
                              res[ i ] = fun.call(thisp,   this[ i ],   i,   this);
                         }
                         return res;
                    };
               }
               var  numbers = [1,  4,  9];
               var  roots = numbers.map(Math.sqrt);
               document.write("Root is : " +    roots );     
          </script>
     </body>
</html>

Output

Below is the output of the above example.

Root is  :  1,  2,  3

You can also read our tutorial post on: How to add JavaScript to Html(JavaScript placement)

Array pop() Method

JavaScript array pop() method removes the last element from an array and returns that element. 

Syntax

Its syntax is as follows -

array.pop();

Return Value

Returns the removed element from the array.

Example

You can try the following example below for better understanding on how to implement the array pop() method.

<html>
     <head>
          <title>JavaScript Array pop Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  numbers = [1,  4,  9];
               
               var  element = numbers.pop();
               document.write("element is  :  "  +  element  +   "<br />" );           
               
               var  element = numbers.pop();
               document.write("element is  :  "  +  element );      
          </script>
     </body>
</html>   

Output

Below is the output of the above example.

element is  :  9
element is  :  4

You can also read our tutorial post on: How to Embed Multimedia into a Html web page


Array push() Method

JavaScript array push() method appends the given element(s) in the last of the array and returns the length of the new array.

Syntax

Its syntax is as follows -

array.push(element1, ....,  elementN);

Parameter Details

element1, ....,  elementN: The elements to add to the end of the array.

Return Value

Returns the length of the new array.

Example

You can try the following example below for better understanding on how to implement the array push() method.

<html>
     <head>
          <title>JavaScript Array push Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  numbers = new Array(1,  4,  9);
               
               var  length = numbers.push(10);
               document.write("new numbers are  :  "  +  numbers  +   "<br />" );           
               
               var  length = numbers.push(20);
               document.write("new numbers are  :  "  +  numbers );      
          </script>
     </body>
</html>   

Output

Below is the output of the above example.

new numbers are  :  1,  4,  9,  10
new numbers are  :  1,  4,  9,  10

You can also check out one of our recommended post on: Python on Os X


Array reduce() Method

The array reduce() method applies a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.

Syntax

Its syntax is as follows -

array.reduce(callback[,   initialValue] );

Parameter Details

  • callback - Function to execute on each value in the array. 
  • initialValue - Object to use as the first argument to the first call of the callback.

Return Value

Returns the reduced single value of the array.

Compatibility

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.reduce)  {
     Array.prototype.reduce = function(fun  /*,   initial*/)  {
          var  len = this.length;
          
          if  (typeof  fun  !  = "function")
          throw new TypeError();

          // no value to return if no initial value and an empty array        
          if  (len == 0  &&  arguments.length == 1)
          throw new  TypeError(); 

          var  i = 0;
          if  (arguments.length  >=  2)  {
               var  rv = arguments[ 1 ];
          }  else {
               do  {
                    if (i in this)  {
                         rv = this[ i++ ];
                         break; 
                    }
                    //  if array contains no values, no initial value to return           
                    if  (++i  >=  len)
                    throw new TypeError(); 
               }
               while  (true);
          }
          for  (;   i  <  len;   i++)  {
               if  ( i  in  this )                  
               rv = fun.call(null ,  rv,  this[ i ],   i,   this);
          }
          return rv;
     };
}

Example

Try the following example below.

<html>
     <head>
          <title>JavaScript Array reduce Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.reduce)  {
                    Array.prototype.reduce = function(fun  /*,   initial*/)  {         
                         var  len = this.length;
                         
                         if  (typeof  fun  !  = "function")
                         throw new TypeError();

                         // no value to return if no initial value and an empty array           
                         if  (len == 0  &&  arguments.length == 1) 
                         throw new  TypeError();    

                         var  i = 0;
                         if  (arguments.length  >=  2)  {
                              var  rv =  arguments[ i ];
                         } else  {
                              do {
                                    if (i in this) {
                                        rv = this[ i++ ];
                                        break; 
                                    }

                                    //  if array contains no values, no initial value to return       
                                    if  ( ++i  >=  len )
                                    throw new  TypeError();
                              }
                              while (true);
                         }
                         for  (;   i  <  len;   i++)  {
                              if  ( i  in  this )                  
                              rv = fun.call(null,  rv,  this[ i ],   i,   this);
                         }
                         return rv;
                    };
               }
               var  total = [0,  1,  2,  3].reduce( function(a,  b) { return a + b; } );
               document.write("Total is : " +    total );     
          </script>
     </body>
</html>

Output

Below is the output of the above example.

Total is  :  6

You can also read one of our recommended tutorial post on: How to implement JavaScript for...in loop with examples

Array reduceRight() Method

Array reduceRight() method applies a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.

Syntax

Its syntax is as follows -

array.reduceRight(callback[,   initialValue] );

Parameter Details

  • callback - Function to execute on each value in the array. 
  • initialValue - Object to use as the first argument to the first call of the callback.

Return Value

Returns the reduced right single value of the array.

Compatibility

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.reduceRight)  {
     Array.prototype.reduceRight = function(fun  /*,   initial*/)  {
          var  len = this.length;
          
          if  (typeof  fun  !  = "function")
          throw new TypeError();

          // no value to return if no initial value and an empty array        
          if  (len == 0  &&  arguments.length == 1)
          throw new  TypeError(); 

          var  i = len  -1;
          if  (arguments.length  >=  2)  {
               var  rv = arguments[ 1 ];
          }  else {
               do  {
                    if (i in this)  {
                         rv = this[ i-- ];
                         break; 
                    }
                    //  if array contains no values, no initial value to return           
                    if  (--i  <  0)
                    throw new TypeError(); 
               }
               while  (true);
          }
          for  (;   i  >=  0;   i--)  {
               if  ( i  in  this )                  
               rv = fun.call(null ,  rv,  this[ i ],   i,   this);
          }
          return rv;
     };
}

Example

Try the following example below.

<html>
     <head>
          <title>JavaScript Array reduceRight Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.reduceRight)  {
                    Array.prototype.reduceRight = function(fun  /*,   initial*/)  {         
                         var  len = this.length;
                         
                         if  (typeof  fun  !  = "function")
                         throw new TypeError();

                         // no value to return if no initial value and an empty array           
                         if  (len == 0  &&  arguments.length == 1) 
                         throw new  TypeError();    

                         var  i = len  -1;
                         if  (arguments.length  >=  2)  {
                              var  rv =  arguments[ i ];
                         } else  {
                              do {
                                    if (i in this) {
                                        rv = this[ i-- ];
                                        break; 
                                    }

                                    //  if array contains no values, no initial value to return       
                                    if  ( --i  <  0 )
                                    throw new  TypeError();
                              }
                              while (true);
                         }
                         for  (;   i  >=  0;   i--)  {
                              if  ( i  in  this )                  
                              rv = fun.call(null,  rv,  this[ i ],   i,   this);
                         }
                         return rv;
                    };
               }
               var  total = [0,  1,  2,  3].reduceRight( function(a,  b) { return a + b; } );
               document.write("Total is : " +    total );     
          </script>
     </body>
</html>

Output

Below is the output of the above example.

Total is  :  6

You can also read our tutorial post on: Python on Window


Array reverse() Method

JavaScript array reverse() method reverses the element of an array. The first array element becomes the last and the last becomes the first.

Syntax

Its syntax is as follows -

array.reverse();

Return Value

Returns the reversed single value of the array.

Example

You can try the following example below for better understanding on how to implement the array reverse() method.

<html>
     <head>
          <title>JavaScript Array reverse Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  arr  = [0,  1,  2,  3].reverse();
               document.write("Reversed array is :  "  +  arr );
          </script>
     </body>
</html>   

Output

Below is the output of the above example.

Reversed array is  :  3,  2,  1,  0


Array shift() Method

JavaScript array shift() method removes the first element from the array and also returns that element 

Syntax

Its syntax is as follows -

array.shift();

Return Value

Returns the removed single value of the array.

Example

You can try the following example below for better understanding on how to implement the array shift() method.

<html>
     <head>
          <title>JavaScript Array shift Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  element  = [105,  1,  2,  3].shift();
               document.write("Removed element is :  "  +  element );        
          </script>
     </body>
</html>   

Output

Below is the output of the above example.

Removed element is  :  105

You can also read our tutorial post on: Css Layers

Array unshift() Method

JavaScript array unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Syntax

Its syntax is as follows -

array.unshift(element1, ....,  elementN);

Parameter Details

element1, ....,  elementN: The elements to add to the front of the array.

Return Value

Returns the length of the new array. It returns undefined in IE browser.

Example

You can try the following example below for better understanding on how to implement the array unshift() method.

<html>
     <head>
          <title>JavaScript Array unshift Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  arr = new Array("orange",  "mango",  "banana",  "sugar" );
               
               var  length = arr.unshift("water");
               document.write("Returned array is  :  "  +  arr  +   "<br />" );           
               document.write("Length of the array is  :  "  +  length );      
          </script>
     </body>
</html>   

Output

Below is the output of the above example.

Returned array is  :  water,  orange,  mango,  banana,  sugar 
Length of the array is  :  5


Array slice() Method

JavaScript array slice() method extracts a section of an array and returns a new array.

Syntax

Its syntax is as follows -

array.slice(begin   [,    end] );

Parameter Details

  • begin- Zero based index at which to begin extraction. As a negative index, start indicates an offset from the end of the sequence.
  • end - Zero based index at which to end the extraction.

Return Value

Returns the extracted array based on the passed parameters.

Example

You can try the following example below for better understanding on how to implement the array slice() method.

<html>
     <head>
          <title>JavaScript Array slice Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  arr =  ["orange",  "mango",  "banana",  "sugar",  "tea"];
               document.write("arr.slice(1,  2)  :  "  +  arr.slice(1,  2)  +   "<br />" );           
               document.write("arr.slice(1,  3)  :  "  +  arr.slice(1,  3)   );      
          </script>
     </body>
</html>   

Output

Below is the output of the above example.

arr.slice(1,  2)  :  mango
arr.slice(1,  3)  :  mango,  banana 

You can also read our tutorial post on: Html Introduction


Array some() Method
JavaScript array some() method tests whether sone element in the array passes the test implemented by the provided function.

Syntax
Its syntax is as follows -

array.some(callback[,   thisObject] );

Parameter Details
  • callback - Function to test for each element.
  • thisObject - Object to use as this when executing callback.

Return Value
If some elements passes the test, then it returns true, otherwise false.

Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available  in other implementations of the standard. To make it work, you need to add the following code at the top of your script. 

if   (!Array.prototype.some)  {
     Array.prototype.some = function(fun  /*,   thisp*/)  {
          var  len = this.length;
          if  (typeof  fun  !  = "function")
          throw new TypeError();

          var  thisp = arguments[1];
          for  (var  i = 0;   i  <  len;   i++)  {
               if  (i  in  this  &&  fun.call(thisp,  this[ I ],  i,  this))
                    return true;
          }
          return false; 
     };
}

Example
Try the following example below.

<html>
     <head>
          <title>JavaScript Array some Method</title>
     </head>

     <body>
          <script   type = "text/javascript">
               if   (!Array.prototype.some)  {
                    Array.prototype.some = function(fun  /*,   thisp*/)  {
                         var  len = this.length;
                         if  (typeof  fun  !  = "function")
                         throw new TypeError();

                         var  thisp = arguments[1];
                         for  (var  i = 0;   i  <  len;   i++)  {
                              if  (i  in  this  &&  fun.call(thisp,  this[ I ],  i,  this) )                                
                                   return true; 
                         }
                         return  false;
                   };
               }
               function  isBigEnough(element,   index,    array)   { 
                    return  (element  >=  10);
               }
               var   retval = [2,  5,  8,  1,  4].some(isBigEnough);    
               document.write("Returned Value is : " +    retval  +  "<br />" );    

               var   retval = [12,  5,  8,  1,  4].some(isBigEnough);
               document.write("Returned Value is :  " +    retval );
          </script>
     </body>
</html>

Output
Below is the output of the above example.

Returned Value is : false 
Returned Value is : true 

You can also read our tutorial post on: JavaScript while Loop

Array toSource Method
JavaScript array toSource() method returns a string representing the source code of the array. This method is supported by Mozilla Firefox.

Syntax
Its syntax is as follows -

array.toSource();

Return Value
Returns a string representing the source code of an array.

Example
You can try the following example below for better understanding on how to implement the array toSource() method.

<html>
     <head>
          <title>JavaScript Array toSource Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  arr  = new Array("orange",  "mango",  "banana",  "sugar");        
               var  str  = arr.toSource();       
               document.write("Returned string is :  "  +  str );        
          </script>
     </body>
</html>   

Output
Below is the output of the above example.

Returned string is  :  ["orange",  "mango",  "banana",  "sugar"]         


Array sort() Method
JavaScript array sort() method sorts the elements of an array.

Syntax
Its syntax is as follows -

array.sort(compareFunction);

Parameter Details
compareFunction - Specifies a function that defines the sort order. If omitted, the array is sorted lexicographically.

Return Value
Returns a sorted array.

Example
You can try the following example below for better understanding on how to implement the array sort() method.

<html>
     <head>
          <title>JavaScript Array sort Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  arr  = new Array("orange",  "mango",  "banana",  "sugar");        
               var  sorted  = arr.sort();       
               document.write("Returned string is :  "  +  sorted );        
          </script>
     </body>
</html>   

Output
Below is the output of the above example.

Returned string is  :  banana,  mango,  orange,  sugar         

You can also read our tutorial post on: Variable

Array splice() Method
JavaScript array splice() method changes the content of an array, adding new elements while removing the old elements.

Syntax
Its syntax is as follows -

array.splice(index,   howMany,   [element 1] [,   ....,    elementN] );      

Parameter Details
  • index - Index at which to start changing the array.
  • howMany - An integer that indicates the number of old array elements to remove. If howMany is 0, no elements are removed.
  • element 1, ..., elementN - The elements to add to the array. If you don't specify any elements, splice simply removes the elements from the array. 

Return Value
Returns the extracted array based on the passed parameters.

Example
You can try the following example below for better understanding on how to implement the array splice() method.

<html>
     <head>
          <title>JavaScript Array splice Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  arr  = ["orange",  "mango",  "banana",  "sugar",  "tea"];        
               var  removed  = arr.splice(2,  0,  "water");       
               document.write("After adding 1 :  "  +  arr  +  "<br />"  );  
               document.write("Removed is :  "  +  removed  );    

               removed = arr.splice(3,   1);
               document.write("After adding 1 :  "  +  arr  +  "<br />"  );
              document.write("Removed is :  "  +  removed  );
          </script>
     </body>
</html>   

Output
Below is the output of the above example.

After adding 1  :  orange,  mango,  water,  banana,  sugar,  tea  
Removed is :
After adding 1  :  orange,  mango,  water,  sugar,  tea 
Removed is  :  banana   

Array toString() Method
JavaScript array toString() method returns a string representing the source code of the specified array and its elements.

Syntax
Its syntax is as follows -

array.toString();

Return Value
Returns a string representing the array.

Example
You can try the following example below for better understanding on how to implement the array toString() method.

<html>
     <head>
          <title>JavaScript Array toString Method</title>
     </head>

     <body>
          <script  type ="text/javascript">
               var  arr  = new Array("orange",  "mango",  "banana",  "sugar");        
               var  str  = arr.toString();       
               document.write("Returned string is :  "  +  str );        
          </script>
     </body>
</html>   

Output
Below is the output of the above example.

Returned string is  :  orange,  mango,  banana,  sugar        

Alright guys! we have come to the end of this tutorial post on JavaScript array methods. In my next tutorial, I will be moving on to JavaScript date Object. Feel free to drop your questions via the comment box below.

Don't forget to like our facebook page, also follow us on the rest of our social media platforms available to stay updated with our latest tutorials. You can also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain