Explanation of [].slice.call in javascript?

user_1360985 0
Viewed 90049

I stumbled onto this neat shortcut for converting a DOM NodeList into a regular array, but I must admit, I don't completely understand how it works:

[].slice.call(document.querySelectorAll('a'), 0)

So it starts with an empty array [], then slice is used to convert the result of call to a new array yeah?

The bit I don't understand is the call. How does that convert document.querySelectorAll('a') from a NodeList to a regular array?

call slice arrays javascript
9 Answers

What's happening here is that you call slice() as if it was a function of NodeList using call(). What slice() does in this case is create an empty array, then iterate through the object it's running on (originally an array, now a NodeList) and keep appending the elements of that object to the empty array it created, which is eventually returned. Here's an article on this.

EDIT:

So it starts with an empty array [], then slice is used to convert the result of call to a new array yeah?

That's not right. [].slice returns a function object. A function object has a function call() which calls the function assigning the first parameter of the call() to this; in other words, making the function think that it's being called from the parameter (the NodeList returned by document.querySelectorAll('a')) rather than from an array.

user_1817650

In JavaScript, methods of an object can be bound to another object at runtime. In short, javascript allows an object to "borrow" the method of another object:

object1 = {
    name: 'Frank',
    greet() {
        alert(`Hello ${this.name}`);
    }
};

object2 = {
    name: 'Andy'
};

// Note that object2 has no greet method,
// but we may "borrow" from object1:

object1.greet.call(object2); // Will show an alert with 'Hello Andy'

The call and apply methods of function objects (in JavaScript, functions are objects as well) allows you to do this. So, in your code you could say that the NodeList is borrowing an array's slice method. .slice() returns another array as its result, which will become the "converted" array that you can then use.

user_1677350

It retrieves the slice function from an Array. It then calls that function, but using the result of document.querySelectorAll as the this object instead of an actual array.

user_697550

From ES6: Simply make array with Array.from(element.children) or Array.from({length: 5})

user_87283970

In the 2020s we use

[...document.querySelectorAll('.slide')]

It is useful when you want to use map or filter but no longer needed to use forEach since forEach now works on the collection returned from document.querySelectorAll('.slide')

user_2957830

This may help too.

slice method

Description:

slice does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array.

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified. see more: Reference/Global_Objects/Array/slice

call method

Description:

The call() allows for a function/method belonging to one object to be assigned and called for a different object.

The call() method calls a function with a given this value and arguments provided individually. call() provides a new value of this to the function/method. With call(), you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

see more: Reference/Global_Objects/Function/call

user_91900800
Related