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 acplish 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!

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 acplish 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!

• javascript
• function

Share Follow edited Oct 27, 2017 at 10:20 asked Nov 24, 2014 at 14:50 user3551393user3551393 4

• 2 Sounds a lot like Array.prototype.reduce, or Array.prototype.map followed by .join(). Or you simply use a variable number of arguments. – Zeta Commented Nov 24, 2014 at 14:52
• "This works fine but is inefficient"? Inefficient? Or not elegant? – Zeta Commented Nov 24, 2014 at 14:55
• @Zeta Both I think! When I say inefficient I don’t mean the code runs slowly. Rather, the same thing can be 'said’ with far less code. Therefore, it would be more efficient to write in a different considering the overall quantity of times I use the function within the script. Perhaps redundant may have been a better expression than inefficient. Thank you kindly. – user3551393 Commented Nov 24, 2014 at 15:37
• 1 what you should say, is that you want your code to be more maintainable, as maintainability uses less code. I am still strongly remending usage of either lodash, or underscore. This is because they handle a lot of caveats you'll run into (gothcas, if you will) - why re-invent the wheel. – docodemore Commented Nov 24, 2014 at 15:58

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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 plex objects differently, it is highly remended 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./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/#each

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

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);

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.

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.