What is the fundamental difference between call / apply and why does the code work this way?

Question

Hello. Let me ask a noob question on CALL / APPLY, maybe someone will cheat. As follows from many tutorials and textbooks, call differs from apply in that you can pass an array into an apply. And there is no call.

var object = { "arr": ["Первый элемент",2,3,4,5], "func": function() { function awayFromMe(arr){ console.log(arr); } awayFromMe.call (this, this.arr); awayFromMe.apply(this, this.arr); } }; object.func();

That is, I expected that call would give nothing, a apply will work, but contrary to my expectations, call gave the array output: ["First element", 2, 3, 4, 5] apply gave only the first element output: "First element"

Why it happens?

Answer 1 · 2017-02-17T16:34:50

foo.apply (thisArg, argsArray)
foo.call (thisArg, arg1, arg2, ...)

Although the call () function syntax is almost completely identical to the apply () function, the fundamental difference between them is that the call () function accepts a list of arguments, while the apply () function is a single array of arguments.

Those. the only difference is that in apply you pass the arguments as an array, and in call as is:

 function test(a, b, c, d) { console.log(a, b, c, d); } // Последующие вызовы идентичны test.apply(null, [1, 2, 3, 4]); test.call(null, 1, 2, 3, 4);

Another example:

 let a = [1, 2, 3]; // Один аргумент - массив console.log.call(console, a); // [1, 2, 3] // Три аргумента console.log.apply(console, a); // 1, 2, 3 // функция суммирует свои аргументы const sum = (...args) => args.reduce((c, a)=> c += a, 0); console.info('call', sum.call(null, a)); // sum([1,2,3]) = 0+'1,2,3' console.info('apply', sum.apply(null, a)); // sum(1,2,3) = 6

I can also pass an array in call, and in the function I can pull it out through arguments
When there is an array of unknown length, you will not get it.
In the new ecmascript specifications, ecmascript can expand the array into separate arguments: foo.call(null, ...arr1, ...arr2) .
The function will be called with all elements of both arrays.
An array is formed dynamically, for example when using Array.fiter?
var object = { "arr": [1,2,3,4,5,6,7,8,9,10], "func": function() { function awayFromMe(){ console.log(arguments); //[Array[6]] } awayFromMe.call(this, this.arr.filter(function(elem){if(elem>=5)return elem})); } }; object.func();
@DenisIvanov, you can pull out through arguments only if it is your function.
and that, it will be necessary to check whether the array came because it was called via a call, or is it just passed the array as the first argument.
If the function is not yours, then the call with the array may not be applicable.
Just an example of the function $ .when takes a list of objects, not an array.
Therefore, if you do not know how many deferred objects you have, the only way to call it and get the correct result is to use apply .

Nick Volynkin ♦ 24.6k 14 94 175 · Accepted Answer · 2017-02-20T20:57:27

Through trial and error, I think I caught a subtle sense of the difference between call / apply and would like to share it with you, it may still be the same as me. So, let's say we have a simple given function that returns the sum of two numbers:

 function sumTwoNumb(a, b){ return a + b; }

The code is extremely simple, we pass two arguments to the parameters of the function, and it returns the sum. And let's say we need to call this function for two elements of a certain array.

If we call it as: sumTwoNumb.call(null, [100,150]) , it turns out that the first parameter a will receive the entire array [100,150] as argument, and the second parameter, b will not receive anything and, accordingly, will be undefined. And in the end, the function will return the result of addition [100,150]+undefined , which equals 100,150undefined .

And if we call it like this: sumTwoNumb.apply(null, [100,150]) , then when entering the function, the first parameter a will receive the zero array element = 100 , and the second parameter will receive the first array element = 150 and eventually the function will return the result of the addition 100 + 150 , that is true.

Dear professionals, if I'm wrong, correct. I hope someone will come in handy.

Well, let's say I omit the arguments in the function, and pull them through the arguments .
If call, then there will be an object with an array, and if apply, then just an array ...
@Grundy, if his wording is clearer to him, it is possible that it will also be clearer for other beginners.
I (and, judging by the voices, the community) think - let it be
@Anon, I have a complaint not about the wording, but about the fact that he himself did not respond to his own comment.
Thus, it is not clear what exactly the new one added his answer to the existing ones, and also how exactly he answers his own questions, which he asked in the comments.
@Anon, maybe so, but asking a question, reading the answers, copying them into your “answer” almost completely is not good.
@DenisIvanov, but what about the vp_arth answer, in which there was an example with a challenge that could even be launched and see the difference?
And you never answered your own question, about getting from arguments.

user207618 · Answer 3 · 2017-02-17T16:31:04

That's right, the call in the first argument returns an array, and apply distributes the elements of the array by the arguments, i.e. arr will point to the first element Первый элемент .

Well, let's say I omit the arguments in the function, and pull them through the arguments.
If call, then there will be an object with an array, and if apply, then just an array ...

What is the fundamental difference between call / apply and why does the code work this way?

3 answers 3

More articles: