Function receives only first element of String array [duplicate]

Question

Dear fellow programmers

I'm dealing with a atrange issues I've been trying to debug for the last two hours. I'm writing a web front end that receives commands from a server that are executed using the window.apply function. A triggerEvents function is used to handle all the different command and passes the arguments sent from the server to the appropriate function (see below code).

function triggerEvents(commands){
for (var index = 0; index < commands.length; index++){
    var command = commands[index];
    console.debug("execute");
    console.debug(command);
    console.debug(command.arguments);
    window[command.function].apply(null, command.arguments)
}

}

In general that works pretty well, however, one particular function (next code listing) is passed an array of strings but for some reason, only the first element is available in the function.

function updateAvailableBlocks(args) {
availableBlocks = []
for(i=0; i < args.length; i++) {
    availableBlocks[i] = args[i];
}

}

Now, when I inspect the debugger I can confirm that I do receive an array of Strings from the server and that that particular array is passed to window.apply as expected.

But when I step into the execution of the function, I am only able to see the first element.

I made sure that all caches are deleted and that Im not using outdated code, but I can't think of something that would cause this. I'd be very grateful for your sharp minds on this.

Thanks in advance!

Answer 1

Use .call instead of .apply. Apply spreads the arguments of passed array as if they were passed one by one. So if your function doesn't expect variable numbers of arguments and you are not handling them properly then it simply won't work as you would expect.

function foo(arg) {
  console.log(arg);
}

const arr = ['a', 'b', 'c'];
foo.apply(null, arr);
foo.call(null, arr);

Or you could use the rest operator with apply to achieve the same effect.

function foo(...arg) {
  console.log(arg);
}

const arr = ['a', 'b', 'c'];
foo.apply(null, arr);