Javascript add extra argument

Question

Let's take a look at this code:

var mainFunction = function() {
  altFunction.apply(null, arguments);
}

The arguments that are passed to mainFunction are dynamic -- they can be 4 or 10, doesn't matter. However, I have to pass them through to altFunction AND I have to add an EXTRA argument to the argument list.

I have tried this:

var mainFunction = function() {
  var mainArguments = arguments;
  mainArguments[mainArguments.length] = 'extra data'; // not +1 since length returns "human" count.

  altFunction.apply(null, mainArguments);
}

But that does not seem to work. How can I do this?

What do you mean by not +1 since length returns "human" count? — Ian
– Ian, Commented Nov 28, 2012 at 17:32
.length returns 4 if the array is 0, 1, 2, 3 it doesn't return 3, hope you understand it now. That is what I meant :P — onlineracoon
– onlineracoon, Commented Nov 28, 2012 at 17:35
Well yeah, but that's the expected behavior of .length. When you use arr[arr.length] = "whatever", it's the same behavior as using .push(), and just adds the item to the end of the array. Your problem is that arguments is not an array, so that's why you need to use one of the many similar solutions that were provided. — Ian
– Ian, Commented Nov 28, 2012 at 17:37
Actually, you almost have it. Your code will work as is if you also do arguments.length++ before calling apply. — slebetman
– slebetman, Commented Nov 28, 2012 at 17:53

I Hate Lazy · Accepted Answer · 2012-11-28 17:44:55Z

65

Use Array.prototype.push

[].push.call(arguments, "new value");

There's no need to shallow clone the arguments object because it and its .length are mutable.

(function() {
    console.log(arguments[arguments.length - 1]); // foo

    [].push.call(arguments, "bar");

    console.log(arguments[arguments.length - 1]); // bar
})("foo");

From ECMAScript 5, 10.6 Arguments Object

Call the [[DefineOwnProperty]] internal method on obj passing "length", the Property Descriptor {[[Value]]: len, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true}, and false as arguments.

So you can see that .length is writeable, so it will update with Array methods.

edited Nov 28, 2012 at 17:44

answered Nov 28, 2012 at 17:33

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ian Over a year ago

Yeah, I could've sworn arguments was read-only, but then I re-read the MDN spec and realized this

Riël Over a year ago

[].splice.call(arguments,0,0,NEW_VAR) puts it at the first argument, very handy when you have a function that expects a certain value at first.

Tim Kindberg Over a year ago

I think this is throwing an error in 'strict mode'. Use Array.prototype.push.call(arguments, 'bar') instead if you have problems.

Ronenz Over a year ago

I thought this was a hack but it's not. From the docs: "push is intentionally generic. This method can be used with call() or apply() on objects resembling arrays. The push method relies on a length property to determine where to start inserting the given values."

jdunning Over a year ago

Strangely, simply assigning to arguments, like arguments[arguments.length] = "bar";, looks like it works, but then if you pass that arguments value to another function via apply(), the added arg is not passed to that function. It only receives the original arguments.

VisioN · Accepted Answer · 2012-11-28 17:46:00Z

34

arguments is not a pure array. You need to make a normal array out of it:

var mainArguments = Array.prototype.slice.call(arguments);
mainArguments.push("extra data");

edited Nov 28, 2012 at 17:46

answered Nov 28, 2012 at 17:32

VisioN

146k35 gold badges287 silver badges291 bronze badges

2 Comments

I Hate Lazy Over a year ago

"You can't alter arguments array directly." Sure you can.

dbcb Over a year ago

It should be noted that although you can modify the arguments like this, doing so prevents the js vm from being able to optimize the function call. So, if you're manipulating the arguments like this in a function that gets called a lot, there could be performance implications.

Pointy · Accepted Answer · 2012-11-28 17:32:11Z

4

The arguments object isn't an array; it's like an array, but it's different. You can turn it into an array however:

var mainArguments = [].slice.call(arguments, 0);

Then you can push another value onto the end:

mainArguments.push("whatever");

answered Nov 28, 2012 at 17:32

Pointy

415k62 gold badges600 silver badges632 bronze badges

Comments

Greg · Accepted Answer · 2016-06-30 17:33:54Z

4

Update 2016: You must convert the arguments to an array before adding the element. In addition to the slice method mentioned in many posts:

var args = Array.prototype.slice.call(arguments);

You can also use the Array.from() method or the spread operator to convert arguments to a real Array:

var args = Array.from(arguments);

or

var args = [...arguments];

The above may not be optimized by your javascript engine, it has been suggested by the MDN the following may be optimized:

var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

edited Jun 30, 2016 at 17:33

answered Jun 30, 2016 at 16:33

Greg

1,6691 gold badge24 silver badges35 bronze badges

Comments

Esailija · Accepted Answer · 2012-11-28 17:32:18Z

2

var mainFunction = function() {
    var args = [].slice.call( arguments ); //Convert to array
    args.push( "extra data");
    return altFunction.apply( this, args );
}

answered Nov 28, 2012 at 17:32

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

callumacrae · Accepted Answer · 2014-11-06 15:31:51Z

2

The arguments "array" isn't an array (it's a design bug in JavaScript, according to Crockford), so you can't do that. You can turn it into an array, though:

var mainFunction = function() {
  var mainArguments = Array.prototype.slice.call(arguments);
  mainArguments.push('extra data');

  altFunction.apply(null, mainArguments);
}

edited Nov 6, 2014 at 15:31

answered Nov 28, 2012 at 17:33

callumacrae

8,45310 gold badges34 silver badges50 bronze badges

5 Comments

Ian Over a year ago

Why is it a bug? Because you don't like it?

callumacrae Over a year ago

Because Douglas Crockford said so

I Hate Lazy Over a year ago

@CallumMacrae: That's not much of a reason IMO.

Tim Goodman Over a year ago

Perhaps it's bad design, but that's not the same as a bug. IMO, a bug is when something does not work as intended. I assume arguments was made to be an Array-like object and not an Array on purpose, whether wisely or not.

Ako Over a year ago

To save memory, arguments prototype is lacking common array functionality, only the basics. Think for a moment, how many arrays are there? Lets guess, same amout as there are function calls? If you can save space, wouldn't you? If required, there is apply function to handle the case when arguments has been elaveted to full functioning array. Everything else is up to the user.

gdub · Accepted Answer · 2013-08-03 17:45:01Z

0

One liner to add additional argument(s) and return the new array:

[].slice.call(arguments).concat(['new value']));

answered Aug 3, 2013 at 17:45

gdub

91411 silver badges18 bronze badges

Comments

public override · Accepted Answer · 2013-08-18 15:26:34Z

0

//
//    var
//        altFn  = function () {}, 
//        mainFn = prefilled( altFn  /* ...params */ );
//
//    mainFn(  /* ...params */  );
//  
//        
function prefilled ( fn /* ...params */ ) { 
     return ( function ( args1 ) { 

          var orfn = this;

          return function () { 

              return orfn.apply( this, args1.concat( cslc( arguments ) ) );

          };

     } ).call( fn, cslc( arguments, 1 ) );
}

// helper fn
function cslc( args, i, j ) { 
   return Array.prototype.slice.call( args, i, j );
}


// example

var
    f1 = function () { console.log( cslc( arguments ) ); }, 
    F1 = prefilled( f1, 98, 99, 100 );

F1( 'a', 'b', 'c' );

//
//   logs: [98, 99, 100, "a", "b", "c"]
//
//

edited Aug 18, 2013 at 15:26

answered Aug 12, 2013 at 22:56

public override

9828 silver badges17 bronze badges

Comments

Zon · Accepted Answer · 2017-03-29 05:14:35Z

0

In this case it could be more comfortable to use call() instead of apply():

function first(parameter1, parameter2) {

  var parameter3 = "123";

  secondFunction.call(
    this,
    parameter1,
    parameter2,
    parameter3);
},

answered Mar 29, 2017 at 5:14

Zon

20k8 gold badges99 silver badges104 bronze badges

Comments

Alan Dong · Accepted Answer · 2017-07-15 23:37:27Z

0

var myABC = '12321'; someFunction(result, error, myCallback.bind(this, myABC));

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

answered Jul 15, 2017 at 23:37

Alan Dong

4,10542 silver badges35 bronze badges

Comments

YakovL · Accepted Answer · 2018-03-17 18:07:24Z

0

For those who like me was looking for a way to add an argument that is optional and may be not the only omitted one (myFunc = function(reqiured,optional_1,optional_2,targetOptional) with the call like myFunc(justThisOne)), this can be done as follows:

// first we make sure arguments is long enough
// argumentPosition is supposed to be 1,2,3... (4 in the example above)
while(arguments.length < argumentPosition)
    [].push.call(arguments,undefined);
// next we assign it
arguments[argumentPosition-1] = arguments[argumentPosition-1] || defaultValue;

answered Mar 17, 2018 at 18:07

YakovL

8,44813 gold badges74 silver badges117 bronze badges

Collectives™ on Stack Overflow

Javascript add extra argument

11 Answers 11

5 Comments

2 Comments

Comments

Comments

Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

5 Comments

2 Comments

Comments

Comments

Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related