Explanation of various Array helper methods in Javascript with example
The various methods I am going to discuss below are a part of functional programming in Javascript. In functional programming output of the method depends on the arguments passed to the method. In Javascript, we have various methods like forEach, map, filter and reduce to which we pass a list or array of elements and these methods changes it into something else output while keeping the original array or list same.
These are briefly described below:
1. forEach() – This method executes each element once in an array.
For Example:
var array1 = ['Hello', 'World', '!']; array1.forEach(function(element) { console.log(element); }); // output: Hello // output: World // output: !
2. map() – This method creates a new array with output based on provided function called on every element in given array.
For example:-
Without Map: var oldArr = [{ first_name: "Parminder", last_name: "Kaur" }, { first_name: "Kiran", last_name: "Preet" }, { first_name: "Piyush", last_name: "Aggarwal" } ]; function getUpdatedArray() { var newArr = []; for (var i = 0, l = oldArr.length; i < l; i++) { var item = oldArr[i]; item.full_name = [item.first_name, item.last_name].join(" "); newArr[i] = item; } return newArr; } With Map: function getUpdatedArray(){ return oldArr.map(function(item,index){ item.full_name = [item.first_name,item.last_name].join(" "); return item; }); } Output:[{first_name:"Parminder",last_name:"Kaur",full_name:”Parminder Kaur”}, {first_name:"Kiran",last_name:"Preet",full_name:“KiranPreet”}, {first_name:"Piyush",last_name:"Aggarwal",full_name:”Piyush Aggarwal”}];
3. filter() - This method returns a new array from an existing array with elements that satisfy the provided condition.
For example:-
var records =[ {'name':'Parminder','age':26 }, {'name':'Kiran',‘age':20 }, {'name':'Vikas','age':15 }]; var filtered_records = records.filter(function(record) { return record.age > 15; }); Output: [{'name':'Kiran',‘age':20 }, {'name':'Parminder','age' : 26 }]
4. reduce() - This method takes an array and reduces it into a single value. For example, if we have an array of numbers we can easily find the average of all values. It is similar to map() and filter() except it accumulates (add up) the return values.
For example:-
var dollars = [78.96, 99.00, 36.5]; var sum = dollars.reduce( function(total, dollar){ return total + dollar; }); Output: sum // 214.46
5. every() - This method returns the boolean value “true” or “false” based on given condition (provided as a function). This method executes the function once for each element present in the array. If it finds an array element for which the function returns a false value, every() returns false (and does not check the remaining values). If no false occur,it returns true
For example:
var ages = [10,14,17,25,40]; var adult = ages.every(function(age, index, array){ return age >= 18; }); Output: false; //As there are some ages below 18.
6. some() - This method also returns the boolean value “true” or “false” based on provided checks on given elements of array. In comparison to every(), this method returns true if one of the element satisfies given condition otherwise it returns false.
For example:
var ages = [10,14,17,25,40]; var adult = ages.some(function(age, index, array){ return age >= 18; }); Output: true; //As there are some ages above 18.
7. find() - This method is used to get the value of the first element in the array that satisfies the given condition. It checks all the elements of the array and whichever the first element satisfies the condition will be the output.
For example:-
var array = [5, 6, 7, 9, 10]; var found = array.find(function(element) { return element > 7; }); Output: 9
One comment