Javascript functions as Arguments with Arguments

Question

What I want is to load multiple files. These files all use the same function to be loaded, only thing different is the file name. This function should return an object. Something like this:

var files = [ loadFile("file1.txt"), loadFile("file2.txt"), loadFile("file3.txt") ]; 

// Example function
function loadFile( file_name ) {
    return "loaded file " + file_name;
}

But when I run this it loads it directly.

var files = [ loadFile, loadFile, loadFile ];

// now please
for (var i = 0; i < files.length; i++) {
    files[i]();
}

But this way I can't give it arguments. Now I can create a filler function like this, but I there is probably a better way to do this...

function loadFile1() {
    return loadFile( "file1.txt" );
}

If it is possible, how can I load Javascript functions as Arguments with Arguments?

*done some testing. I am going with bind() for the answers, as that is what I was looking for. But I want to mention Stuart's answer that I definitely will keep in mind for the future use. MoeSattler & vlaz thank you guys for showing other good ways of doing this!

"but I there is probably a better way to do this" If you consider .bind to be a better way, then yes. Otherwise, no. — Felix Kling
– Felix Kling, Commented Dec 8, 2016 at 15:30

Stuart · Accepted Answer · 2016-12-08 15:20:15Z

6

Cant you do:

// Example function
function loadFile( file_name ) {
    return "loaded file " + file_name;
}

var files = ["file1.txt", "file2.txt", "file3.txt"]; 
for (i = 0; i < files.length; i++) {
    loadFile(files[i]);
}

answered Dec 8, 2016 at 15:20

Stuart

6,7692 gold badges29 silver badges42 bronze badges

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

5 Comments

Sandy Gifford Over a year ago

While bind is perfectly acceptable (as in my and Nina's answers) this is a FAR better solution. The only case in which bind is preferable to this is if the function being applied to each entry in files is different.

MoeSattler Over a year ago

There is absolutely no reason anymore to use for loops. map/forEach that stuff :)

Stuart Over a year ago

Indeed @MoeSattler but as OP was already using that kind of code, i answered in the same style (no confusion)

georg Over a year ago

should be files.map(loadFile). for (i.... is not how to write idiomatic javascript, especially without var which makes your i global.

MoeSattler Over a year ago

@georg though it's the least of the problems of the above codes. And binding would make it worse.

MoeSattler · Accepted Answer · 2016-12-08 15:42:17Z

3

How about map?

function loadFile( file_name ) {
  return "loaded file " + file_name;
}
const fileNames = ['file1.txt', 'file2.txt', 'file3.txt']
const files = fileNames.map(loadFile)

console.log(files)

edited Dec 8, 2016 at 15:42

answered Dec 8, 2016 at 15:32

MoeSattler

6,9148 gold badges27 silver badges44 bronze badges

1 Comment

Flummox uses codidact.com Over a year ago

Your map link goes to the Spanish version.

Nina Scholz · Accepted Answer · 2016-12-08 15:26:03Z

2

You could use Function#bind for binding the parameter to the function and call later without parameter.

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

function loadFile( file_name ) {
    return "loaded file " + file_name;
}

var files = [ loadFile.bind(null, "file1.txt"), loadFile.bind(null, "file2.txt"), loadFile.bind(null, "file3.txt") ]; 

files.forEach(function (a) {
    console.log(a());
});

answered Dec 8, 2016 at 15:26

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

MoeSattler Over a year ago

Please beware @flummox, this is a very hacky solution, not idiomatic, and hard to read. Please make sure you get solid JS/programming foundations before you dive in too deep.

VLAZ · Accepted Answer · 2016-12-08 15:28:17Z

Option 1 is to use what is called a thunk - it's simply a function that does not take any arguments and returns a value when executed. It's useful for returning something at a later point. You actually do have an example of that with loadFile1 but you can generalise it.

function loadFileLater(fileName) {
    return function() {
        loadFile( fileName );
    }
}

Or using Function.prototype.bind()

function loadFileLater(fileName) {
    return loadFile.bind(null, fileName);
}

Alternatively, you can flip it around and instead of having an array of functions that need values, you can have an array of values where you execute a function against each

function loadFile( file_name ) {
    return "loaded file " + file_name;
}
var filesNames = [
	"file1.txt",
	"file2.txt",
	"file3.txt",
	"file4.txt"
]

var files = filesNames.map(loadFile)

console.log(files);

In your case, you are most likely going to use .forEach rather than .map but it's the exact same principle.

Sandy Gifford · Accepted Answer · 2016-12-08 15:26:06Z

1

bind is going to be your best friend here.

Typically bind is used to assign a context to a function (ie: var myBoundFunc = myFunc.bind(myObj) will make sure that any references to this in MyFunc when called via myBoundFunc will point to myObj), but bind has the added bonus of also being able to store parameters to call myFunc with.

So in your case:

var files = [ loadFile.bind(this, "file1.txt"), loadFile.bind(this, "file2.txt"), loadFile.bind(this, "file3.txt") ];

Where this can be any context, and every argument after is used when the resulting function (ie files[0]()) is called.

answered Dec 8, 2016 at 15:26

Sandy Gifford

8,2156 gold badges45 silver badges74 bronze badges

Collectives™ on Stack Overflow

Javascript functions as Arguments with Arguments

5 Answers 5

5 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related