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...

Answer 2

You don't need an array. Just use arguments

function functionName(){
   for(var i = 0; i < arguments.length; i++){
      // do something with arguments[i];
   }
}

and then you can do

functionName("shot_type","shot_height","shot_angle","framed","scene_depth");

P.S @codebox's solution works if supporting legacy IE version isn't a problem. Don't know why he deleted it...so putting it here so it helps. His answer using forEach

["shot_type","shot_height","shot_angle","framed","scene_depth"].forEach(FunctionName);

Answer 3

EDIT: Looking at your Fiddle, you have a return inside the for loop - therefore the function will return after the first iteration. Put the return after the for and concatenate the output to one string.

var output = "";
for(...){
    output += description_of_object + ": " + randomly_selected_item_from_object + ".\n";
}   
// return it
return output;

With Javascript only:

var actions = ["shot_type","shot_height","shot_angle","framed","scene_depth"];
for (var i = 0; i < actions.length; i++){
  FunctionName(actions[i]);
}

With JQuery:

$.each(["shot_type","shot_height","shot_angle","framed","scene_depth"], function(index,value){
  FunctionName(value);
});

I haven't tested it but it should work.

Answer 4

To avoide redundancy in code use an array with the values, that you want to pass through the function and call the function in an loop.

var vals=["shot_type","shot_height","shot_angle","framed","scene_depth"];
for(var i=0; i<vals.length; i++)
{
    FunctionName(vals[i]);
}

If you want to expand the function (adding another parameter) you can just expand the for-loop and the array structure.

Alternatively you could fill an object with the values and handle this logic in an object. But this would just do a difference on calling the function.