Javascript Array Iteration

Array iteration help in operating on every array item.


Array.forEach()

This method is used to invoke the specified function once for each array element. It is represented by following syntax:-

array.forEach(callback(currentvalue,index,arr),thisArg) 

It can has following parameter:-

  • callback – Callback parameter represents the function that test the condition.
  • currentvalue – It represents the current element of array.
  • index – It is optional. Index defines the index of current element.
  • arr – It is optional. Arr defines the array on which forEach() operated.
  • thisArg – It is optional. The value to use as this while executing callback.
Input:-
 <script>  
    var arr = ["HTML", "CSS", "Javascript"];  
    arr.forEach(function(fetch) {  
        document.writeln(fetch);  
    });
</script>

Output:-


Array.map()

This method is used to transform elements in an array. It creates a new array by performing a function on each array element.

It does not execute the function for array elements without values.

Points to remember:-

  • A map object cannot contain the duplicate keys.
  • A map object can contain the duplicate values.
  • The key and value can be of any type (allows both object and primitive values).
  • A map object iterates its elements in insertion order.

It is represented by following syntax:-

new Map([iterable])   

It can has following parameter:-

  • iterable – this parameter represents an array and other iterable object whose elements are in the form of key-value pair.
Input:-
 <script>  
    var arr1 = [1, 2, 3];
    var arr2 = arr1.map(myFunction);  
    function myFunction(value) {
       return value * 2;
    }
    document.writeln(arr2);
</script>

Output:-


Array.filter()

This method creates a new array with array elements that passes a test. It doesn’t change the original array.

One of the most common tasks when working with an array is to create a new array that contains a subset of elements of the original array.

It is represented by following syntax:-

array.filter(callback(currentvalue,index,arr),thisArg)     

It can has following parameter:-

  • callback – Callback parameter represents the function that test the condition.
  • currentvalue – Currentvalue represents current element of array.
  • index – It is optional. Index represents index of current element.
  • arr – It is optional. Arr represents the array on which filter() operated.
  • thisArg – It is optional. ThisArg is the value to use as this while executing callback.
Input:-
 <script>  
    var arr1 = [30, 60, 90]; 
    function myFunction(value) {
       return value > 60;
    }
    document.writeln(arr1.filter(myFunction));
</script>

Output:-


Array.reduce()       

This method runs a function on each array element to produce (reduce it to) a single value, it works from left-to-right in the array.

It is represented by following syntax:-

arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)       

It can has following parameter:-

  • callback:  Callback function is executed for each element, excluding the first, if no initialValue is specified.
  • initialValue: InitialValue is the first argument value used in the first invocation of the callback function.

It returns a single value as an output.

Input:-
 <script>  
    var arr1 = [30, 60, 90, 120]; 
    var arr2 = arr1.reduce(function (a,b) {  
    	return a + b;  
    },0);  
    document.writeln(arr2);
</script>

Output:-


Array.indexOf()

This method searches an array for an element value and returns its position.

The index position of first element in an array is always start with zero. If an element is not present in an array, it returns -1.

It is represented by following syntax:-

array.indexOf(element,index)         

It can has following parameter:-

  • element:  It represent the element to be searched.
  • index:  It represent the index position from where search starts. It is optional.
Input:-
 <script>  
    var arr = ["HTML", "CSS", "Javascript"];  
    var result = arr.indexOf("CSS");
    document.writeln(result);
</script>

Output:-


Array.lastIndexOf()

This method is used to search the position of a particular element in a given array. It behaves similar to indexOf() method with a difference that it start searching an element from the last position of an array.

The lastIndexOf() method is case-sensitive. The index position of first character in a string is always start with zero. If an element is not present in a string, it returns -1.

It is represented by following syntax:-

array.lastIndexOf(element,index)           

It can has following parameter:-

  • element:  It represent the element to be searched.
  • index:  It represent the index position from where search starts. It is optional.
Input:-
 <script>  
    var arr=["C","C++","Python","C++","Java"];  
	   var result= arr.lastIndexOf("C++");  
	   document.writeln(result); 
</script>

Output:-