Videos
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.
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.
Nobody mentioned Object.entries() yet, which might be the most flexible way to do it. This method uses the same ordering as for..in when enumerating properties, i.e. the order that properties were originally entered in the object. You also get subarrays with both property and value so you can use whichever or both. Finally you don't have to worry about the properties being numerical or setting an extra length property (as you do when using Array.prototype.slice.call()).
Here's an example:
const obj = {'prop1': 'foo', 'prop2': 'bar', 'prop3': 'baz', 'prop4': {'prop': 'buzz'}};
You want to slice the first two values:
Object.entries(obj).slice(0,2).map(entry => entry[1]);
//["foo", "bar"]
All of the keys?
Object.entries(obj).slice(0).map(entry => entry[0]);
//["prop1", "prop2", "prop3", "prop4"]
The last key-value pair?
Object.entries(obj).slice(-1)
//[ ['prop4', {'prop': 'buzz'}] ]
The best modern solution to this is the combination of Object.fromEntries and Object.entries.
const foo = {
one: 'ONE',
two: 'TWO',
three: 'THREE',
four: 'FOUR',
}
const sliced = Object.fromEntries(
Object.entries(foo).slice(1, 3)
)
console.log(sliced)You'll want to start with the "slice" method. Note that it returns a NEW array without changing the old array, so you'll want to go back and mutate the old array as well.
For instance:
var a = [1,2,3,4,5],
b = a.slice(3);
a.length = 3;
// a is now [1,2,3]
// b is now [4,5]
Given this array:
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
If you want to split the array so that the first 4 items go to the left array and the rest to the right array, then do this:
var leftArr = arr.slice(0, 4);
and
var rightArr = arr.slice(4);
You can make a function that returns those two arrays based on the split-position:
function splitArr(arr, i) {
return [ arr.slice(0, i), arr.slice(i) ];
}