Geek Answers Handbook

How not to resolve disputes and still make the work work?

function drawLine(ctx, sX, sY, eX, eY, sRGB, fRGB, lWidth, capStyle) { ctx.beginPath(); ctx.moveTo(sX, sY); ctx.lineTo(eX, eY); ctx.lineWidth = lWidth||5; ctx.strokeStyle = 'rgb(49, 129, 48)'; ctx.lineCap = 'round'; ctx.stroke(); ctx.closePath(); }

And then I want to call the function as follows:

 drawLine(ctx, 50, 50, 100, 100, someStrokeStyle, someFillStyle, someCapStyle);

As you can see, I skipped the lWidth parameter. I want the function to still work, even when lWidth not passed as a parameter. How do i do this? Atm, it might seem that someCapStyle is lWidth .

+4
source share
5 answers

When you have a large number of arguments to go to a function like yours, use an object:

 function foo({param1: val1, parma2: val2}) {}

In this case, you will not depend on the number of arguments and the order in which they are presented.

So you can rewrite your function:

  function drawLine(drawObj) { ctx.beginPath(); ctx.moveTo(drawObj.sX, drawObj.sY); ctx.lineTo(drawObj.eX, drawObj.eY); ctx.lineWidth = drawObj.lWidth||5; ctx.strokeStyle = drawObj.sRGB; ctx.lineCap = drawObj.capStyle; ctx.stroke(); ctx.closePath(); }
+3
source

If you do not pass any argument, the value undefined is passed instead, so just check the function to see if the argument passed or not:

 if(typeof argument == "undefined") { argument = "default value"; }

To not pass lWidth , just go undefined as the value

PS the best way is to use one argument args , which will be an object containing all the current parameters as properties.

+2
source

You want to partially evaluate the drawLine function by assigning a constant value to lWidth . There's a JavaScript library called Jeene that does just that. Here's how you use it:

 function drawLine(ctx, sX, sY, eX, eY, sRGB, fRGB, lWidth, capStyle) { ctx.beginPath(); ctx.moveTo(sX, sY); ctx.lineTo(eX, eY); ctx.lineWidth = lWidth || 5; ctx.strokeStyle = "rgb(49, 129, 48)"; ctx.lineCap = "round"; ctx.stroke(); ctx.closePath(); } Function.prototype.specialize = net.higherorder.jeene.Jeene.make(); var drawLine2 = drawLine.specialize({ lWidth: null // or whatever value you want });

Then you use drawLine2 as follows:

 drawLine2(ctx, 50, 50, 100, 100, someStrokeStyle, someFillStyle, someCapStyle);

This is called specialization and is a very useful template. More on this: Infinity Neighborhood: Three Projections of Dr. Futamura

+2
source

You can put an optional parameter at the end of the parameter list. That way, if you leave it, the other options will not be affected.

Another option is to pass a single object with the attributes you want to define, for example.

 function drawLine(options) { options.ctx.beginPath(); options.ctx.moveTo(options.sX, options.sY); options.ctx.lineTo(options.eX, options.eY); // etc. }
+1
source

You cannot use "function overloading" in Javascript, but here is a way to achieve what you want:

How to overload functions in javascript?

+1
source

More articles:


All Articles