Run the same function on each item in a list / array

Question

Goal

I have a working function (JSFiddle). On numerous occasions throughout a script the function runs sequentially. In these instances, there is a lot of repetitious code that I would like to consolidate.

Ideally changing code like this:

functionName("First_item") + 
functionName("Second_item") + 
functionName("Third_item") + 

To something like this:

functionName("First_item", "Second_item", "Third_item");

The function will run for each item in the list so the result is the same but the code more elegant and maintainable.

Notes:

• I’m not looking to use any libraries (e.g. jQuery) to accomplish the goal.

Solution

1. Amit Joki’s answer kindly noted I could use arguments. When I implemented the code, the modified function (JSFiddle) only returned the output string for the first argument / item.

2. Vanice’s answer pointed out the eventual solution.

   • Make one string from the output of all arguments / items by concatenating (joining) the output strings within the for loop (with the use of +=).
   • Return the concatenated output by placing the return outside of the for loop.

Example

Working solution (JSFiddle).

---

Thanks

Thank you very much to everyone for their time and help on this. I really appreciate it!

Answer 1

Leveraging Javascript's Prototype OOP: You can add an each function to Array's themselves, so every array in your code that will automatically have an inhereted each function.

Array.prototype.each = function(callback){
    for (var i =  0; i < this.length; i++){
        callback(this[i]);
    }
}

Usage:

myArray.each(myCoolFunction) ['something','somethingelse',somethingother'].each(myCoolFunction)

myArray.each( function (item) {
 // if your item has a method
 item.Something();
 // if you'd like to call a function on the item:
 doSomething(item);
});

caveats:

Because javascript is an asynchronous language that is interpreted differently across various browsers and inherently handles primitive objects and complex objects differently, it is highly recommended usage of underscore or lodash. You can also make your own, but you'll need ensure the objects passed through will be handled by the functions properly. This may include workarounds or creating special callback functions for different object types that are passed through your each function.

For more information: Is JavaScript a pass-by-reference or pass-by-value language?

Libraries you should seriously consider:

lodash: https://lodash.com/docs#forEach

_([1, 2, 3]).forEach(function(num) { console.log(num); }).join(',');
// → logs each number and returns '1,2,3'

_.forEach({ 'one': 1, 'two': 2, 'three': 3 }, function(num) { console.log(num); });
// → logs each number and returns the object (property order is not guaranteed across environments)

underscore: http://underscorejs.org/#each

_.each([1, 2, 3], alert);
=> alerts each number in turn...