Javascript add extra argument - javascript

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?

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.

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

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

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

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

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

One liner to add additional argument(s) and return the new array:
[].slice.call(arguments).concat(['new value']));

//
// 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"]
//
//

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

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

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;

Related

Get a function from an array, javascript

Got an array with functions. I want to do a function that returns a function from the array with function name given as argument.
var arr = [
function Dog(){},
function Cat(){}
];
var getFunction = function(name){
return // should return the function with matching name
};
var dogFunction = getFunction('Dog'); // returns dog function.
https://jsfiddle.net/zcjd9pyz/
Is this possible?
if you do an associative array, it is possible
var arr = {
'dog' : function Dog(){},
'cat' : function Cat(){}
};
arr['dog']();
Functions have a name property:
var getFunction = function(name){
for (var i=0; i<arr.length; i++) {
if (arr[i].name===name) return arr[i];
}
return // return undefined
};
If you want to have a fast access, you can precompute a map by first iterating:
var map = arr.reduce(function(m,f){ m[f.name]=f; return m}, {});
which allows
var fun = map["Dog"];
Computing the map in code instead of typing it yourself lets you not repeat the name. A DRY code is easier to maintain.
EDIT: I'm not sure functions have a name on IE but I can't test it.
In ES6 you could do it without modifying the array (or in all browsers except Internet Explorer if you replace the arrow function with a normal one and use a polyfill for find:
var getFunction = function(name){
return arr.find( func => name === func.name );
};
Even in ES6 though, I don't see a good reason to do that. I think you should follow Deblaton Jean-Philippe's answer and change the array to an object, mapping the names to the functions.
You can use this sample work around of mine, instead of matching for string you can use it based on function name
https://gist.github.com/freewayz/56bd9db6d4164a42be75
var myArray = [{"name" : "pitaside", "id" : 1}, {"name":"github", "id" : 3}]
filterArrayByType: function (arrayToMatch, fieldType, matcher) {
if(! arrayToMatch instanceof Array){throw ("Not an Array")}
var filterTypeToReturn = arrayToMatch.filter((items) => {
var temp;
if (items[String(fieldType)] === matcher) {
temp = items[String(fieldType)]
}
return temp;
}
);
return filterTypeToReturn;
}
var myMatcher = 'github'
var id3 = filterArrayByType(myArray, 'name', myMatcher)[0].id
//returns 3
You can use Function.prototype.toString(). Unlike name it is supported by most of the modern browsers as well as by Node.js.
var arr = [
function Dog ( ) {},
function Cat ( ) {}
];
var getFunction = function(name){
'use strict';
// could use find but it isn't supported by IE
return arr.filter(function (func) {
return /^function\s+(\w+)/.exec(func.toString())[1] === name;
})[0];
};
console.log(getFunction('Dog'));
console.log(getFunction('Cat'));
console.log(getFunction('Unknown'));

Pass array into google.maps.LatLng via apply() [duplicate]

In JavaScript, I want to create an object instance (via the new operator), but pass an arbitrary number of arguments to the constructor. Is this possible?
What I want to do is something like this (but the code below does not work):
function Something(){
// init stuff
}
function createSomething(){
return new Something.apply(null, arguments);
}
var s = createSomething(a,b,c); // 's' is an instance of Something
The Answer
From the responses here, it became clear that there's no built-in way to call .apply() with the new operator. However, people suggested a number of really interesting solutions to the problem.
My preferred solution was this one from Matthew Crumley (I've modified it to pass the arguments property):
var createSomething = (function() {
function F(args) {
return Something.apply(this, args);
}
F.prototype = Something.prototype;
return function() {
return new F(arguments);
}
})();
With ECMAScript5's Function.prototype.bind things get pretty clean:
function newCall(Cls) {
return new (Function.prototype.bind.apply(Cls, arguments));
// or even
// return new (Cls.bind.apply(Cls, arguments));
// if you know that Cls.bind has not been overwritten
}
It can be used as follows:
var s = newCall(Something, a, b, c);
or even directly:
var s = new (Function.prototype.bind.call(Something, null, a, b, c));
var s = new (Function.prototype.bind.apply(Something, [null, a, b, c]));
This and the eval-based solution are the only ones that always work, even with special constructors like Date:
var date = newCall(Date, 2012, 1);
console.log(date instanceof Date); // true
edit
A bit of explanation:
We need to run new on a function that takes a limited number of arguments. The bind method allows us to do it like so:
var f = Cls.bind(anything, arg1, arg2, ...);
result = new f();
The anything parameter doesn't matter much, since the new keyword resets f's context. However, it is required for syntactical reasons. Now, for the bind call: We need to pass a variable number of arguments, so this does the trick:
var f = Cls.bind.apply(Cls, [anything, arg1, arg2, ...]);
result = new f();
Let's wrap that in a function. Cls is passed as argument 0, so it's gonna be our anything.
function newCall(Cls /*, arg1, arg2, ... */) {
var f = Cls.bind.apply(Cls, arguments);
return new f();
}
Actually, the temporary f variable is not needed at all:
function newCall(Cls /*, arg1, arg2, ... */) {
return new (Cls.bind.apply(Cls, arguments))();
}
Finally, we should make sure that bind is really what we need. (Cls.bind may have been overwritten). So replace it by Function.prototype.bind, and we get the final result as above.
Here's a generalized solution that can call any constructor (except native constructors that behave differently when called as functions, like String, Number, Date, etc.) with an array of arguments:
function construct(constructor, args) {
function F() {
return constructor.apply(this, args);
}
F.prototype = constructor.prototype;
return new F();
}
An object created by calling construct(Class, [1, 2, 3]) would be identical to an object created with new Class(1, 2, 3).
You could also make a more specific version so you don't have to pass the constructor every time. This is also slightly more efficient, since it doesn't need to create a new instance of the inner function every time you call it.
var createSomething = (function() {
function F(args) {
return Something.apply(this, args);
}
F.prototype = Something.prototype;
return function(args) {
return new F(args);
}
})();
The reason for creating and calling the outer anonymous function like that is to keep function F from polluting the global namespace. It's sometimes called the module pattern.
[UPDATE]
For those who want to use this in TypeScript, since TS gives an error if F returns anything:
function construct(constructor, args) {
function F() : void {
constructor.apply(this, args);
}
F.prototype = constructor.prototype;
return new F();
}
If your environment supports ECMA Script 2015's spread operator (...), you can simply use it like this
function Something() {
// init stuff
}
function createSomething() {
return new Something(...arguments);
}
Note: Now that the ECMA Script 2015's specifications are published and most JavaScript engines are actively implementing it, this would be the preferred way of doing this.
You can check the Spread operator's support in few of the major environments, here.
Suppose you've got an Items constructor which slurps up all the arguments you throw at it:
function Items () {
this.elems = [].slice.call(arguments);
}
Items.prototype.sum = function () {
return this.elems.reduce(function (sum, x) { return sum + x }, 0);
};
You can create an instance with Object.create() and then .apply() with that instance:
var items = Object.create(Items.prototype);
Items.apply(items, [ 1, 2, 3, 4 ]);
console.log(items.sum());
Which when run prints 10 since 1 + 2 + 3 + 4 == 10:
$ node t.js
10
In ES6, Reflect.construct() is quite convenient:
Reflect.construct(F, args)
#Matthew
I think it's better to fix the constructor property also.
// Invoke new operator with arbitrary arguments
// Holy Grail pattern
function invoke(constructor, args) {
var f;
function F() {
// constructor returns **this**
return constructor.apply(this, args);
}
F.prototype = constructor.prototype;
f = new F();
f.constructor = constructor;
return f;
}
You could move the init stuff out into a separate method of Something's prototype:
function Something() {
// Do nothing
}
Something.prototype.init = function() {
// Do init stuff
};
function createSomething() {
var s = new Something();
s.init.apply(s, arguments);
return s;
}
var s = createSomething(a,b,c); // 's' is an instance of Something
An improved version of #Matthew's answer. This form has the slight performance benefits obtained by storing the temp class in a closure, as well as the flexibility of having one function able to be used to create any class
var applyCtor = function(){
var tempCtor = function() {};
return function(ctor, args){
tempCtor.prototype = ctor.prototype;
var instance = new tempCtor();
ctor.prototype.constructor.apply(instance,args);
return instance;
}
}();
This would be used by calling applyCtor(class, [arg1, arg2, argn]);
This answer is a little late, but figured anyone who sees this might be able to use it. There is a way to return a new object using apply. Though it requires one little change to your object declaration.
function testNew() {
if (!( this instanceof arguments.callee ))
return arguments.callee.apply( new arguments.callee(), arguments );
this.arg = Array.prototype.slice.call( arguments );
return this;
}
testNew.prototype.addThem = function() {
var newVal = 0,
i = 0;
for ( ; i < this.arg.length; i++ ) {
newVal += this.arg[i];
}
return newVal;
}
testNew( 4, 8 ) === { arg : [ 4, 8 ] };
testNew( 1, 2, 3, 4, 5 ).addThem() === 15;
For the first if statement to work in testNew you have to return this; at the bottom of the function. So as an example with your code:
function Something() {
// init stuff
return this;
}
function createSomething() {
return Something.apply( new Something(), arguments );
}
var s = createSomething( a, b, c );
Update: I've changed my first example to sum any number of arguments, instead of just two.
I just came across this problem, and I solved it like this:
function instantiate(ctor) {
switch (arguments.length) {
case 1: return new ctor();
case 2: return new ctor(arguments[1]);
case 3: return new ctor(arguments[1], arguments[2]);
case 4: return new ctor(arguments[1], arguments[2], arguments[3]);
//...
default: throw new Error('instantiate: too many parameters');
}
}
function Thing(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
var thing = instantiate(Thing, 'abc', 123, {x:5});
Yeah, it's a bit ugly, but it solves the problem, and it's dead simple.
if you're interested in an eval-based solution
function createSomething() {
var q = [];
for(var i = 0; i < arguments.length; i++)
q.push("arguments[" + i + "]");
return eval("new Something(" + q.join(",") + ")");
}
This works!
var cls = Array; //eval('Array'); dynamically
var data = [2];
new cls(...data);
See also how CoffeeScript does it.
s = new Something([a,b,c]...)
becomes:
var s;
s = (function(func, args, ctor) {
ctor.prototype = func.prototype;
var child = new ctor, result = func.apply(child, args);
return Object(result) === result ? result : child;
})(Something, [a, b, c], function(){});
This constructor approach works both with and without the new keyword:
function Something(foo, bar){
if (!(this instanceof Something)){
var obj = Object.create(Something.prototype);
return Something.apply(obj, arguments);
}
this.foo = foo;
this.bar = bar;
return this;
}
It assumes support for Object.create but you could always polyfill that if you're supporting older browsers. See the support table on MDN here.
Here's a JSBin to see it in action with console output.
Solution without ES6 or polyfills:
var obj = _new(Demo).apply(["X", "Y", "Z"]);
function _new(constr)
{
function createNamedFunction(name)
{
return (new Function("return function " + name + "() { };"))();
}
var func = createNamedFunction(constr.name);
func.prototype = constr.prototype;
var self = new func();
return { apply: function(args) {
constr.apply(self, args);
return self;
} };
}
function Demo()
{
for(var index in arguments)
{
this['arg' + (parseInt(index) + 1)] = arguments[index];
}
}
Demo.prototype.tagged = true;
console.log(obj);
console.log(obj.tagged);
output
Demo {arg1: "X", arg2: "Y", arg3: "Z"}
... or "shorter" way:
var func = new Function("return function " + Demo.name + "() { };")();
func.prototype = Demo.prototype;
var obj = new func();
Demo.apply(obj, ["X", "Y", "Z"]);
edit:
I think this might be a good solution:
this.forConstructor = function(constr)
{
return { apply: function(args)
{
let name = constr.name.replace('-', '_');
let func = (new Function('args', name + '_', " return function " + name + "() { " + name + "_.apply(this, args); }"))(args, constr);
func.constructor = constr;
func.prototype = constr.prototype;
return new func(args);
}};
}
You can't call a constructor with a variable number of arguments like you want with the new operator.
What you can do is change the constructor slightly. Instead of:
function Something() {
// deal with the "arguments" array
}
var obj = new Something.apply(null, [0, 0]); // doesn't work!
Do this instead:
function Something(args) {
// shorter, but will substitute a default if args.x is 0, false, "" etc.
this.x = args.x || SOME_DEFAULT_VALUE;
// longer, but will only put in a default if args.x is not supplied
this.x = (args.x !== undefined) ? args.x : SOME_DEFAULT_VALUE;
}
var obj = new Something({x: 0, y: 0});
Or if you must use an array:
function Something(args) {
var x = args[0];
var y = args[1];
}
var obj = new Something([0, 0]);
Matthew Crumley's solutions in CoffeeScript:
construct = (constructor, args) ->
F = -> constructor.apply this, args
F.prototype = constructor.prototype
new F
or
createSomething = (->
F = (args) -> Something.apply this, args
F.prototype = Something.prototype
return -> new Something arguments
)()
function createSomething() {
var args = Array.prototype.concat.apply([null], arguments);
return new (Function.prototype.bind.apply(Something, args));
}
If your target browser doesn't support ECMAScript 5 Function.prototype.bind, the code won't work. It is not very likely though, see compatibilty table.
modified #Matthew answer. Here I can pass any number of parameters to function as usual (not array). Also 'Something' is not hardcoded into:
function createObject( constr ) {
var args = arguments;
var wrapper = function() {
return constr.apply( this, Array.prototype.slice.call(args, 1) );
}
wrapper.prototype = constr.prototype;
return new wrapper();
}
function Something() {
// init stuff
};
var obj1 = createObject( Something, 1, 2, 3 );
var same = new Something( 1, 2, 3 );
This one-liner should do it:
new (Function.prototype.bind.apply(Something, [null].concat(arguments)));
While the other approaches are workable, they're unduly complex. In Clojure you generally create a function that instantiates types/records and use that function as the mechanism for instantiation. Translating this to JavaScript:
function Person(surname, name){
this.surname = surname;
this.name = name;
}
function person(surname, name){
return new Person(surname, name);
}
By taking this approach you avoid the use of new except as described above. And this function, of course, has no issues working with apply or any number of other functional programming features.
var doe = _.partial(person, "Doe");
var john = doe("John");
var jane = doe("Jane");
By using this approach, all of your type constructors (e.g. Person) are vanilla, do-nothing constructors. You just pass in arguments and assign them to properties of the same name. The hairy details go in the constructor function (e.g. person).
It is of little bother having to create these extra constructor functions since they are a good practice anyhow. They can be convenient since they allow you to potentially have several constructor functions with different nuances.
It's also intresting to see how the issue of reusing the temporary F() constructor, was addressed by using arguments.callee, aka the creator/factory function itself:
http://www.dhtmlkitchen.com/?category=/JavaScript/&date=2008/05/11/&entry=Decorator-Factory-Aspect
Any function (even a constructor) can take a variable number of arguments. Each function has an "arguments" variable which can be cast to an array with [].slice.call(arguments).
function Something(){
this.options = [].slice.call(arguments);
this.toString = function (){
return this.options.toString();
};
}
var s = new Something(1, 2, 3, 4);
console.log( 's.options === "1,2,3,4":', (s.options == '1,2,3,4') );
var z = new Something(9, 10, 11);
console.log( 'z.options === "9,10,11":', (z.options == '9,10,11') );
The above tests produce the following output:
s.options === "1,2,3,4": true
z.options === "9,10,11": true
Here is my version of createSomething:
function createSomething() {
var obj = {};
obj = Something.apply(obj, arguments) || obj;
obj.__proto__ = Something.prototype; //Object.setPrototypeOf(obj, Something.prototype);
return o;
}
Based on that, I tried to simulate the new keyword of JavaScript:
//JavaScript 'new' keyword simulation
function new2() {
var obj = {}, args = Array.prototype.slice.call(arguments), fn = args.shift();
obj = fn.apply(obj, args) || obj;
Object.setPrototypeOf(obj, fn.prototype); //or: obj.__proto__ = fn.prototype;
return obj;
}
I tested it and it seems that it works perfectly fine for all scenarios. It also works on native constructors like Date. Here are some tests:
//test
new2(Something);
new2(Something, 1, 2);
new2(Date); //"Tue May 13 2014 01:01:09 GMT-0700" == new Date()
new2(Array); //[] == new Array()
new2(Array, 3); //[undefined × 3] == new Array(3)
new2(Object); //Object {} == new Object()
new2(Object, 2); //Number {} == new Object(2)
new2(Object, "s"); //String {0: "s", length: 1} == new Object("s")
new2(Object, true); //Boolean {} == new Object(true)
Yes we can, javascript is more of prototype inheritance in nature.
function Actor(name, age){
this.name = name;
this.age = age;
}
Actor.prototype.name = "unknown";
Actor.prototype.age = "unknown";
Actor.prototype.getName = function() {
return this.name;
};
Actor.prototype.getAge = function() {
return this.age;
};
when we create an object with "new" then our created object INHERITS getAge(), But if we used apply(...) or call(...) to call Actor, then we are passing an object for "this" but the object we pass WON'T inherit from Actor.prototype
unless, we directly pass apply or call Actor.prototype but then.... "this" would point to "Actor.prototype" and this.name would write to: Actor.prototype.name. Thus affecting all other objects created with Actor...since we overwrite the prototype rather than the instance
var rajini = new Actor('Rajinikanth', 31);
console.log(rajini);
console.log(rajini.getName());
console.log(rajini.getAge());
var kamal = new Actor('kamal', 18);
console.log(kamal);
console.log(kamal.getName());
console.log(kamal.getAge());
Let's try with apply
var vijay = Actor.apply(null, ["pandaram", 33]);
if (vijay === undefined) {
console.log("Actor(....) didn't return anything
since we didn't call it with new");
}
var ajith = {};
Actor.apply(ajith, ['ajith', 25]);
console.log(ajith); //Object {name: "ajith", age: 25}
try {
ajith.getName();
} catch (E) {
console.log("Error since we didn't inherit ajith.prototype");
}
console.log(Actor.prototype.age); //Unknown
console.log(Actor.prototype.name); //Unknown
By passing Actor.prototype to Actor.call() as the first argument, when the Actor() function is ran, it executes this.name=name, Since "this" will point to Actor.prototype, this.name=name; means Actor.prototype.name=name;
var simbhu = Actor.apply(Actor.prototype, ['simbhu', 28]);
if (simbhu === undefined) {
console.log("Still undefined since the function didn't return anything.");
}
console.log(Actor.prototype.age); //simbhu
console.log(Actor.prototype.name); //28
var copy = Actor.prototype;
var dhanush = Actor.apply(copy, ["dhanush", 11]);
console.log(dhanush);
console.log("But now we've corrupted Parent.prototype in order to inherit");
console.log(Actor.prototype.age); //11
console.log(Actor.prototype.name); //dhanush
Coming back to orginal question how to use new operator with apply, here is my take....
Function.prototype.new = function(){
var constructor = this;
function fn() {return constructor.apply(this, args)}
var args = Array.prototype.slice.call(arguments);
fn.prototype = this.prototype;
return new fn
};
var thalaivar = Actor.new.apply(Parent, ["Thalaivar", 30]);
console.log(thalaivar);
since ES6 this is possible through the Spread operator, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Apply_for_new
This answer was already, sort of given in comment https://stackoverflow.com/a/42027742/7049810, but seems to have been missed by most
Actually the simplest method is:
function Something (a, b) {
this.a = a;
this.b = b;
}
function createSomething(){
return Something;
}
s = new (createSomething())(1, 2);
// s == Something {a: 1, b: 2}
A revised solution from #jordancpaul's answer.
var applyCtor = function(ctor, args)
{
var instance = new ctor();
ctor.prototype.constructor.apply(instance, args);
return instance;
};
Make an anonymous prototype and apply the Something prototype to it using the arguments and then create a new instance of that anonymous prototype. The one disadavantage of this is it will not pass the s instanceof Something check, though it is identical, it is basically an instance of a clone.
function Something(){
// init stuff
}
function createSomething(){
return new (function(){Something.apply(this, arguments)});
}
var s = createSomething(a,b,c); // 's' is an instance of Something
function FooFactory() {
var prototype, F = function(){};
function Foo() {
var args = Array.prototype.slice.call(arguments),
i;
for (i = 0, this.args = {}; i < args.length; i +=1) {
this.args[i] = args[i];
}
this.bar = 'baz';
this.print();
return this;
}
prototype = Foo.prototype;
prototype.print = function () {
console.log(this.bar);
};
F.prototype = prototype;
return Foo.apply(new F(), Array.prototype.slice.call(arguments));
}
var foo = FooFactory('a', 'b', 'c', 'd', {}, function (){});
console.log('foo:',foo);
foo.print();

Chaining functions and keep a variable in the chain if needed

I have some code like this:
function Foo( arr, prop ) {
this.arr = arr;
this.isOn = prop;
}
function newFoo( arr, prop ) {
return new Foo( arr, prop );
}
Foo.prototype = {
a: function() {
var result = [];
// do something and push to result
if ( this.prop ) // do something different with result
return newFoo( result );
},
// This is the method that determines if prop = true in the chain
b: function() {
result = [];
// do something and push to result
// this time 'prop' must be 'true'
return newFoo( result, true )
}
};
I want to keep passing true if the previous element in the chain has prop. Obvisouly the above approach doesn't work as you can see here:
var nf = newFoo;
console.log( nf( [1,2,3] ).b().isOn ); //=> true
console.log( nf( [1,2,3] ).b().a().isOn ); //=> undefined
I know I could just return newFoo( result, this.prop ) all the time on every method but I was curious to see if there are any other solutions to this problem. As methods grow in number it'll be hard to keep track of this property over time.
As methods grow in number it'll be hard to keep track of this property over time.
You could just create an extra method with the functionality of newFoo that automatically keeps track of the properties you are not going to overwrite:
function Foo( arr, prop ) {
this.arr = arr;
this.isOn = prop;
}
Foo.prototype = {
clone: function newFoo( arr, prop ) {
return new Foo(
arguments.length >= 1 ? arr : this.arr,
arguments.length >= 2 ? prop : this.isOn
);
},
a: function() {
var result = [];
// do something and push to result
if ( this.prop ) // do something different with result
return this.clone( result );
},
// This is the method that determines if prop = true in the chain
b: function() {
result = [];
// do something and push to result
// this time 'prop' must be 'true'
return this.clone( result, true )
}
};
I've used arguments.length here to check whether a parameter was passed, you could as well test against undefined or use simple arr || this.arr for always-truthy properties.
change 'a' function to
a: function() {
var result = [];
// do something and push to result
if ( this.prop ){} // so something different with result
return newFoo( result );
},
function Foo( arr, prop ) {
this.arr = arr;
this.isOn = prop || false; // if prop is undefined, set false
}
This should sort out your problem.
If you dont add the prop argument, isOn will be set undefined. That's why you get undefined as output.

Javascript change function arguments

I'm trying to change function arguments in javascript.
f = function(){
console.log(a,b,c);
};
SetArgumentList( f, ["a", "b", "c"] );
f(1,2,3);
// should print "1 2 3"
// [edit]
// alternatively SetArgumentList could also work like
f = SetArgumentList( f, ["a", "b", "c"] );
Is there some solid way of doing this?
Where do I need it?... basically I'm trying to add type checked functions:
Object.prototype.method = function( name, typedef, func ){ ... }
function Thing(){};
Thing.method("log",
{ arr: Array, str: String },
function(){
console.log(arr, str);
});
t = new Thing();
t.log([1,2,3], "ok");
t.log("err", "ok"); // <-- causes an exception
// I know I can do this way
Thing.method("log",
[Array, String],
function(arr, str){
console.log(arr, str);
});
// but that's harder to read
NOTE! I know how to do type checking, but not the new function construction.
As delnan said in the comments, it seems like what you're trying to do is essentially "rename" the variables which are local to a function. Like he said, this is not possible (and for good reason too! Could you imagine debugging that? maaan...)
Anyway, I don't know exactly why you'd want that, but Javascript is a flexible language and you could probably get close using a more sane method. It's hard to know exactly what you're trying to achieve, but perhaps this information might get you on the right track:
The arguments which are passed to a function at call time are referenced in a variable named arguments.
function f() {
console.log(arguments);
}
f(); // []
f(1, 2); // [1, 2]
You can call a function with an arbitrary list of arguments using .apply, which is a method on the Function prototype. It takes 2 parameters. The first is the object which will be this inside the function call, and the second is an array of arguments.
f.apply(null, []); // []
f.apply(null, [1, 2, 3]); [1, 2, 3]
Applying this in your situation, perhaps this is what you're after:
function f() {
console.log.apply(console, arguments);
}
Tested in IE7,8,9, opera, chrome, firefox and safari. Uses evil in the background, but
I cannot see any other way if you must rename arguments.
(function(){
var decompileRE = /function\s*\([\s\S]*?\)\s*\{([\s\S]*)/,
lastBrace = /\}[^}]*$/;
window.SetArgumentList = function( fn, argNames ) {
var match
if( !( match = fn.toString().match( decompileRE ) ) ) {
return fn;
}
argNames.push( match[1].replace( lastBrace, "" ) );
return Function.apply( null, argNames );
};
})()
f = function(){
console.log(a,b,c);
};
f = SetArgumentList( f, ["a","b","c"] );
console.log(f);
Logs this in all browsers mentioned above:
function anonymous(a,b,c) {
console.log(a,b,c);
}
I've got a simpler solution similar to the accepted answer for anyone out there that is looking. Works in Chrome, Firefox, Safari, IE7+
Solution
function SetArgList(fn, args) {
var fnbody = fn.toString().replace(
/^\s*function\s*[\$_a-zA-Z0-9]+\(.*\)\s*\{/, //BEWARE, removes original arguments
''
).replace(
/\s*\}\s*$/,
''
);
return new Function(args, fnbody)
}
How to use
Just redefine your original function like this using SetArgList:
function main() {
alert(hello);
alert(world);
}
main = SetArgList(main, 'hello,world');
main('hello', 'world');
In my solution there's no need for an array but you could edit it, my function only requires argument names separated by a comma.
you can use .apply:
this works for me:
f = function(a,b,c){
console.log(a,b,c);
};
var args = ["a", "b", "c"];
f.apply(this, args); //print "abc"
using arguments:
f = function(){
for(var key in arguments) {
console.log(arguments[key]);
}
};
var args = ["a", "b", "c"];
f.apply(this, args);
it's that you looking?
As said before, you can't do it the way you want, you're breaking lexical scoping.
However, here a minimalism version of the way you can implement it (a lot of improvements should be done !). The only thing required is that you function has the named parameter in arguments.
function getType( el ) {
// TODO
return "";
}
function addMethod( obj, name, typedef, func ) {
var argumentsLength = typedef.length;
obj[ name ] = function() {
var len = arguments.length, i = 0;
if( argumentsLength != len )
{
throw new TypeError( "Wrong number of arguments for method " + name );
}
for( i = 0; i < len; i++ )
{
// TODO better type checking
if( getType( arguments[i] ) != getType( typedef[i] ) )
{
throw new TypeError( "Wrong type for arguments number " + i + " for method " + name );
}
}
return func.apply( obj, arguments );
};
};
var o = {};
addMethod( o, "log", [Array, String], function( arr, str ) {
// arguments MUST be explicitly declared above
console.log( arr, str );
});
o.log( ["a"], "b" ); // OK
o.log( "a", "b" ); // TypeError
o.log( ["a"], "b", "c" ); // TypeError
I found a solution that only works on webkit browsers:
f = function(){ console.log(a,b,c); };
fx = eval(
f.toString().replace(
/^function [^\(]*\(\)/,
"var __temp = function (a,b,c)")
+ "; __temp");
fx(1,2,3);
This can also be generalized.
[edit]
This works for other browsers as well, memory let me down - comments // /**/ in some browsers get discarded.

Pass unknown number of arguments into JavaScript function

Is there a way to pass an unknown number of arguments like:
var print_names = function(names) {
foreach(name in names) console.log(name); // something like this
}
print_names('foo', 'bar', 'baz');
Also, how do I get the number of arguments passed in?
ES3 (or ES5 or oldschool JavaScript)
You can access the arguments passed to any JavaScript function via the magic arguments object, which behaves similarly to an array. Using arguments your function would look like:
var print_names = function() {
for (var i=0; i<arguments.length; i++) console.log(arguments[i]);
}
It's important to note that arguments is not an array. MDC has some good documentation on it: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Functions#Using_the_arguments_object
If you want to turn arguments into an array so that you can do things like .slice(), .push() etc, use something like this:
var args = Array.prototype.slice.call(arguments);
ES6 / Typescript
There's a better way! The new rest parameters feature has your back:
var print_names = function(...names) {
for (let i=0; i<names.length; i++) console.log(names[i]);
}
ES6/ES2015
Take advantage of the rest parameter syntax.
function printNames(...names) {
console.log(`number of arguments: ${names.length}`);
for (var name of names) {
console.log(name);
}
}
printNames('foo', 'bar', 'baz');
There are three main differences between rest parameters and the
arguments object:
rest parameters are only the ones that haven't been given a separate name, while the arguments object contains all
arguments passed to the function;
the arguments object is not a real array, while rest parameters are Array instances, meaning methods like sort, map, forEach or pop can be applied on it directly;
the arguments object has additional functionality specific to itself (like the callee property).
var
print_names = function() {
console.log.apply( this, arguments );
};
print_names( 1, 2, 3, 4 );
function print_args() {
for(var i=0; i<arguments.length; i++)
console.log(arguments[i])
}
There is a hidden object passed to every function in JavaScript called arguments.
You would just use arguments.length to get the amount of arguments passed to the function.
To iterate through the arguments, you would use a loop:
for(var i = arguments.length; i--) {
var arg = arguments[i];
}
Note that arguments isn't a real array, so if you needed it as an array you would convert it like this:
var args = Array.prototype.slice.call(arguments);
arguments.length. you can use a for loop on it.
(function () {
for (var a = [], i = arguments.length; i--;) {
a.push(arguments[i]);
};
return a;
})(1, 2, 3, 4, 5, 6, 7, 8)
Much better now for ES6
function Example() {
return {
arguments: (...args) =>{
args.map(a => console.log());
}
}
}
var exmpl = new Example();
exmpl.arguments(1, 2, 3, 'a', 'b', 'c');
I hope this helps
Rest parameters in ES6
const example = (...args) => {
for (arg in args) {
console.log(arg);
}
}
Note: you can pass regular parameters in before the rest params
const example = (arg1, ...args) => {
console.log(arg1);
for (arg in args) {
console.log(arg);
}
}
You can use the spread/rest operator to collect your parameters into an array and then the length of the array will be the number of parameters you passed:
function foo(...names) {
console.log(names);
return names;
}
console.log(foo(1, 2, 3, 4).length);
Using BabelJS I converted the function to oldschool JS:
"use strict";
function foo() {
for (var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++) {
names[_key] = arguments[_key];
}
console.log(names);
return names;
}
You can create a function using the spread/rest operator and from there on, you achieved your goal. Please take a look at the chunk below.
const print_names = (...args) => args.forEach(x => console.log(x));
let x = function(){
return [].slice.call(arguments);
};
console.log(x('a','b','c','d'));
Here is the best answer using spread operator :)
function sum(...nums)
{
let total =0;
for(num of nums)
{
total+=num;
}
console.log(total)
}
console.log(sum(2,4,5,6,7));
I like to do this:
This will not help if you don't know the number of arguments, but it helps if you don't want to remember the order of them.
/**
* #param params.one A test parameter
* #param params.two Another one
**/
function test(params) {
var one = params.one;
if(typeof(one) == 'undefined') {
throw new Error('params.one is undefined');
}
var two = params.two;
if(typeof(two) == 'undefined') {
throw new Error('params.two is undefined');
}
}

Categories

Resources