How I learned call() and apply() in JavaScript

In the past whenever I came across code snippets with the usage of call() and apply(). I would ignore them as they appeared to be on advanced level. It was scary for me, as any new thing is. Than I found this code snippet

function add(){
 console.log(arguments) //Arguments { 0: 1, 1: 2, 2: 3, … }
 const args = [].slice.call(arguments);
 …
}

add(1,2,3)

Here Line 3 is converting array like arguments to Arguments Array.

What is arguments in function?

Every functions has the arguments array that has all the elements that are passed while invoking the function. It’s not exactly array because functions like array.sort(), array.reverse(), array.splice() won’t work. That’s why they are called array like object. You can loop through them and can find it’s length by arguments.length

You know what else is array like object,

DOM selection apis

Whenever we select elements like document.querySelector(‘*’) we get array like object without all the array methods discussed above.

How it works

Normally call & apply allow your object to borrows methods from other objects and invoke them as their own.

const person = {
  pro: 'Backend',
  is: function (who) {
    console.log('I am ' + who + ' I develop ' + this.pro
  }
}

person.is('Programmer') // I am Programmer, I develop Backend

Here we are invoking is method of person object. Provided by the param “programmer”, console log is displayed with the name property using this. this here refers to current object. This is not always the case, definition of this varies based on the way function is called.

Now we have another object, that needs is method

const someObj = { pro: 'Frontend' }
person.say.call(someObj, 'Programmer') // I am Programmer, I develop Frontend

In this case some_obj is so obsessed with is, that it has borrowed from the person object and invoked as it own. All is possible thanks to the call(). The apply() is identical, except it receives parameters in the form of array.

person.say.call(someObj, ['Programmer'])

Example of call() and apply()

So in the very beginning remember how we have converted array like object to array.

function add(){
 console.log(arguments) //Arguments { 0: 1, 1: 2, 2: 3, … }
 const args = [].slice.call(arguments);
 …
}

add(1,2,3)

Here on line 3, we are borrowing slice method from Array. Let’s dissect his line further. A method like [1,2,3].slice() returns copy of the portion of array. In our case it will return a brand new array to args constant. If we don’t provide any object to our call() or apply() methods than global object is assumed.

Conclusion

Although converting array like object to actual array is a smart way to use call() and apply() methods. But I think its main purpose is much more than that. It definitely their for code reusability and sharing.