2

I habitually pass parameters to functions as object literals, thus....

calling:

render({
 param1: 99
 param2: {'a': 88, 'b': 77}
});

method:

render: function (p) {
 alert( p.param1);
 var data = p.param2;

 etc
}

I tend to pass parameters like this in all cases nowadays - even if the function / method only accepts 1 argument. The reason is that I find this method neat and also if I wish to add another parameter at a later date it is simple to add to to the object.

I would like to know from some experienced javascript people if there is any reason why doing things in this way might be a bad idea - I do not work with other developers so am sometimes unsure if the way I do things is correct.

Thanks!

so1
  • 185
  • 1
  • 9
  • This is a very frequent pattern that you find in most JS you see on the net. – Denys Séguret Jan 30 '14 at 10:14
  • 1
    Seems a little unnecessary if you know the function is only going to accept one parameter, but I don't see anything wrong with it (other than the extra keystrokes). – monners Jan 30 '14 at 10:15
  • 1
    I would encourage you to keep using this pattern when you must pass multiple arguments, think about how often this occurs in libraries such as jQuery or other jQuery plugins. – Kevin Bowersox Jan 30 '14 at 10:15
  • Thanks for the comments - I feel reassured! – so1 Jan 30 '14 at 10:35
  • Interesting question but "primarily opinion-based" indeed : http://stackoverflow.com/a/22191929/1636522 ;) –  Mar 05 '14 at 08:16

4 Answers4

4

Parameter buckets are basically a good idea. What is missing here:

render: function (p) {
 alert( p.param1);
 var data = p.param2;

 etc
}

is, that if p.param2 is not set, you still proceed with an undefined. Buckets need to be validated with default values. There's a thread here, discussing this.

In order to have that more generic, you might do:

render: function (p) {
 var myDefaults = { param1: 99
                     param2: {'a': 88, 'b': 77} };
 $.extend(p, myDefaults);

 alert( p.param1);
 var data = p.param2;

 etc
}

and see here for jQuery doc

Community
  • 1
  • 1
Axel Amthor
  • 10,980
  • 1
  • 25
  • 44
  • Thanks Axel - using extend is an excellent suggestion! - too new to SO to be allowed to vote up your answer but would if I could :) – so1 Jan 30 '14 at 10:35
0

No arguments... :)

I started like you .. but i noticed that most of my functions are based on ajax or events or based on a plugin . In that case i never use arguments else i have to use bind and lose the native Event.So i try to get everything i need from globals or elements.

(function(){
var myGlobals={};
function ajax(){
 //....
};
function handleAjax(e){
 myGlobals.currentAjaxResponse=JSON.parse(this.response);
}
function handleClick(e){
 myGlobals.elements
 myGlobals.currentAjaxResponse
 myGlobals.data
 e.target
}
function handleLoad(e){
 myGlobals.elements=document.getElemntsByClassName('buttons');
 myGlobals.elements[0].addEventListener('click',calculateXY,false);
 myGlobals.data={x:1,y:2}
 window.removeEventListener('load',handleLoad,false);
}
function calculateXY(){
 myGlobals.data.x+
 myGlobals.data.y+
 (myGlobals.elements[0].dataset['num']*1)+
 (e.target.dataset['num']*1)+
 myGlobals.currentAjaxResponse.key
}
window.addEventListener('load',handleLoad,false);
})()

only if i use some basic utilies to convert stuff i use:

function(argument){return result}

and most of the time i need just one argument.

And as you say if i need a objet i pass an object.

cocco
  • 16,442
  • 7
  • 62
  • 77
  • Thanks cocco - I do sometimes use 'globals' in the way you describe - usually when ajaxing and finding my brain is too small to cope with whatever the hell the context has changed to - I always feel a little guilty about it, probably because of the word 'globals' - it does make things easier though. – so1 Jan 30 '14 at 10:46
  • if you write it that way there are no problems with names. as nothing can go outside (function(){})() – cocco Jan 30 '14 at 10:47
0

In my oppinion its a matter of taste how to pass your parameters. I think you should validate your object literal parameters or provide default values with something like jQuery.extend:

var myParams = jQuery.extend({
  param1: 99 // default value for param1
  param2: { a: 10, b: 10 } // default value for param2
}, params);

When it comes to rendering, like in your example performance might be an argument for one option. I did a quick test http://jsperf.com/obj-literal-params. In my case (Chrome 32) using object literal parameters with jQuery.extend is about 80% slower than using normal function parameters. But that might be an insignificant performance loss when related to the rest of your rendering function.

My conclusing is: Use what you like most and what makes the code more readabl

Unic1988
  • 1
  • 1
  • 1
0

This pattern can surely be useful, but I tend not to use it unless it's actually justified - as it is considering jQuery.extend(), or a data binding (link) for example.

Maybe I'm not fully qualified to talk about that but, I'm afraid that it's likely to lead to bad habits in terms of software architecture. I mean, ignoring the function's signature, you're creating some sort of "catch-all" function, easily mutable, but poorly characterized. Is it really a drawback? This question has probably been debated already, and I believe that it's worth thinking about.

It's also worth noting that this pattern implicitely requires the creation of an object. Beyond the fact that it might have a negative impact on performances, this coding style can be harder to understand for people who are not familiar with it.

Community
  • 1
  • 1