Explanation of [].slice.call in javascript?

Question

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?

Answer 1

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.

Answer 2

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:function(){
        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. What does the conversion is the fact that slice returns another array as it's result.

Answer 3

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.

Answer 4

It is a technique to convert array-like objects to real arrays.

Some of these objects include:

• arguments in functions
• NodeList (remember their content can change after being fetched! so converting them to array is a way to freeze them)
• jQuery collections, aka jQuery objects (some doc: API, type, learn)

This serves many purposes, for example objects are passed by reference whereas arrays are passed by value.

Also, note the first argument 0 can be omited, thorough explanation here.

And for the sake of completeness, there is also jQuery.makeArray().

Answer 5

How does that convert document.querySelectorAll('a') from a NodeList to a regular array?

This is the code that we have,

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

Lets dismantle it first,

  []    // Array object
.slice // Accessing the function 'slice' present in the prototype of Array
.call // Accessing the function 'call' present in the prototype of function object(slice)
(document.querySelectorAll('a'),0) 
    // 'call' can have arguments like, (thisArg, arg1,arg2...n). 
   // So here we are passing the 'thisArg' as an array like object,
  // that is a 'nodeList'. It will be served as 'this' object inside of slice function.
 // And finally setting 'start' argument of slice as '0' and leaving the 'end' 
// argument as 'undefined'

Step: 1 Execution of call function

• Inside call, other than the thisArg, the rest of the arguments will be appended to an argument list.
• Now the function slice will be invoked by binding its this value as thisArg (array like object came from document.querySelector) and with the argument list. i.e] argument start which contains 0

Step: 2 Execution of slice function invoked inside of call

• start will be assigned to a variable s as 0
• since end is undefined, this.length will be stored in e
• an empty array will be stored in a variable a

• After making the above settings the following iteration will be happened

  while(s < e) {
    a.push(this[s]);
    s++;
  }
  

• the filled up array a will be returned as the result.

---

P.S For better understanding of our scenario some steps that are necessary for our context has been ignored from the original algorithm of call and slice.

Answer 6

[].slice.call(document.querySelectorAll('.slide'));

1. The querySelectorAll() method returns all elements in the document that matches a specified selector(s). 

2. The call() method calls a function with a given this value and arguments provided individually.

3. The slice() method returns the selected elements in an array, as a new array object.

  so this line return the array of [object HTMLDivElement]. Here is the six div with classname "slide" so array length will be 6.

<div class="slideshow">

  <div class="slide">
    first slider1
  </div>
  <div class="slide">
    first slider2
  </div>
  <div class="slide">
    first slider3
  </div>
  <div class="slide">
    first slider4
  </div>
  <div class="slide">
    first slider5
  </div>
  <div class="slide">
    first slider6
  </div>

</div>

<script type="text/javascript">

  var arraylist = [].slice.call(document.querySelectorAll('.slide'));

  alert(arraylist);

</script>

Answer 7

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