Explanation of [].slice.call in javascript?

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.

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.

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, usually it is in order to use the array methods.

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

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

Edit 2024: Note that this answer dates back to 2015 (and the question back to 2010). Even though [].slice.call() is still a widespread technique, nowadays you might prefer using the Array.from() static method (refs MDN, Can I use).

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.

[].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.

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

<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>

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

We have for some time been able to use

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

and the more descriptive

Array.from(document.querySelectorAll('.slide'))

which is useful when you want to use map or filter on a nodelist or other array-like objects that do not have these methods.

It is however no longer needed when you use forEach since forEach now works in all browsers on the nodelist returned from document.querySelectorAll('.slide')

This may help too.

slice method

Description:

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