Most people says that JavaScript will be the future back born of the web. It evolves rapidly every nook and corner of the web related with client side as well as server side.

the-future-of-wordpress-and-javascript

JavaScript is growing time to time by adding new methods too. These array methods which We are going to discussed are those kind of methods recently added  to the language.

Before we get started, We need an array to work with. Lets create a fruit array as below.

var fruit = [ "apples" , "oranges", "bananas", "grapes" ];

indexOf and lastIndexOf methods :

Both indexOf and lastIndexOf methods search the array for whatever value contain within this array and return the array position/index which this particular value reside on the array.

Lets say that, We want the index of the “oranges” So we would use,

var index = fruit.indexOf( "oranges");

This method is now going to start searching from front of the array (from 0 th position of the array). Now index variable will contain 1 as the result.  Which means index of the “oranges” is 1 for the “fruit” array.

The method lastIndexOf works as same as indexOf method except, It searches from the rear of the array. Lets modify our array as below for understanding those two methods further.

fruit = [ "apples" , "oranges", "bananas", "grapes" , "oranges" ];

If We apply indexOf method again for the modified array. It will return 1. It stops searching as it find the matched value in the array. But applying lastIndexOf method to the array, our result will be 4.

var lastIndex = fruit.lastIndexOf( "oranges" ); // result =4

Iteration Methods :

Those methods essentially loop over the array. So, We might not have to write loop ever again as far as array of concern. The each of these methods has to have a function in order to iterate over the array. This function has special signature which is given below.

function your_function_name (value, index,array){

}

Here, our function name must be replaced with your_function_name. It really does not matter what name we gives. But it has to have three important parameter names which can not be neglected or renamed .

value – This is going to be each element in the array.
index – Index/Position of the each element in the array.
array – Our array itself.

This special function will use as the callback  for the individual iteration methods which we are going to discussed now.

Here is the fruit array again.

var fruit = [ "apples" , "oranges", "bananas", "grapes" ];
Every Method

This method will return either true or false and it will test every element and If that test return true for every element, then the every method will return true. Otherwise it returns false. The idea is every element has to passed the test in order for every return true.

Now lets consider the example for testing every values in the array is string data type.

Lets modify our special callback function as follows.

function isString (value, index, array){
   return typeof value === "string";
}

Now we can apply this test to fruit array as below.

var testResult = fruit.every( isString );

The each values of the array is string literals, testResult variable will hold true.

Lets do another test for checking every array value length is one.

function isLengthOne (value, index, array){
    return value.length === 1;
}

testResult = fruit.every( isLengthOne );

Now testResult will hold false,since length of every element of the array will not equal to 1.

Some Method

The “some” method does kind of the same thing as “every”. It will test every element of the array. But as long as only one of those test returns true, the the “some” method returns true.

Lets test whether the array has element start with “g”. For doing this we need to modify our callback as follows.

function startWithG(value, index, array){
   return value[0] === 'g' ;
}

Please note that,We use index notation for each element of the array as value[0]. This is because string is an array (of characters). Now we can do our test by applying the callback as mentioned below.

testResult = fruit.some( startWithG);

This returns true since there is a element called “grapes” in our array.

Filter Method

Like the “every” and “some” methods discussed above, filter method too tests  every elements of the array. But it creates a new array with all of the elements that passed the test that is specified in our callback function. Please note that filter methods also use the same signature of the callback function used in iteration methods.

Lets filter the elements which start from a and b of the array.

function startWithAorB(value, index, array){
  return value[0] === 'a'   || value[0] === 'b' ;
}

var filterArray = fruit.filter( startWithAorB ) ;

Now filterArray variable will hold the array as given below.

[ “apples” , “bananas”]

The important thing to remember is, filter methods does not modify our original array. Instead of that, It creates new array and return.

forEach Method

This function only execute the function on every element as follows. Which means it does not return something. Consider the below example.

function doSomething( value,index,array) {
   console.log( value);
}

fruit.forEach( doSomething );

This will print our fruits in the console of the browser.

map Method

Like the forEach method, map method execute the function on each of the element within the array. But it creates new array. We can modify the elements in that new array using original array. Please note that, This method does not modify our original array.

Lets creates new array using our fruit array as follows.

function doSomething( value,index,array) {
   return "I like " + value;
}

var resultArray = fruit.map(doSomething);

Now resultArray variable will contain following array as the result.

[ “I like apples”, “I like oranges”, “I like bananas”, “I like grapes” ]

Conclusion

These methods are fairly new to java Script and there are so many array methods already introduced which we will not be discussed in the article to the language. However they are not supported IE 8 and below, though they work with IE9 and other browsers including Chrome, Firefox, Opera. The wonderful thing of java Script is flexibility. We can easily write codes for doing the same thing which we did with our array methods. In addition, there are so many polyfills for adding support for the unsupported browsers.

Please let me know your thoughts and feedback. Thanks for reading guys.

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someonePrint this page