Why can't i pass `push` as a foreach function?

Question

var array = [];
document.querySelectorAll("a").forEach(array.push); //Uncaught TypeError: Cannot convert undefined or null to object

Why does this fail? what does this error mean? It seems perfectly reasonable to pass an array method as a function, what am I not understanding/seeing?

Answer 1

array.push loses context (its this), so you need to pass a function with context captured.

But, even if what you wanted worked - you still would not get the result you want, since NodeList:forEach passes 3 arguments to the callback function, so you would fill your array with elements, indexes and the list of nodes.

So a solution would be to do

var array = [];
document.querySelectorAll("a").forEach(e => array.push(e));

Answer 2

You can rebind the this context

var arr = []; document.querySelectorAll("a").forEach(arr.push.bind(arr));
console.log(arr);

<a href="#foo1">one</a>
<a href="#foo2">two</a>
<a href="#foo3">three</a>

BUT the big issue here is the fact that push() when given multiple arguments, will add all of those arguments to the array.

So push(1,2,3) will add 1, 2, and 3 to the array. So the above code would have 3 links, but it will add 9 entries into the array because forEach has 3 arguments element, index, array. So you will need to use a function to do it. Or just use Array.from() to create the array.

var arr = []; 
document.querySelectorAll('a').forEach(el => arr.push(el))
console.log(arr);

var arr2 = Array.from(document.querySelectorAll('a'))
console.log(arr2);

<a href="#foo1">one</a>
<a href="#foo2">two</a>
<a href="#foo3">three</a>

Answer 3

The problem at first instance is not passing array.push, the problem is you are iterating over a NodeLists and this structure is not an array, you can use Array.from in next way:

const array =Array.from(document.querySelectorAll("a"));

Answer 4

When you extract a function from an object, it loses its context, so when you call it and it accesses this, its original value has been lost.

To fix the issue you need to use Function.prototype.bind() to keep the this reference pointing to the right object.

You can see the problem and how bind works in this example:

const obj = {
  prop: 'there',

  print(prefix) {
    console.log(`${ prefix }: Hello ${ this.prop }.`);
  }
};

obj.print('obj.print');

// Context lost:

const extractedPrint = obj.print;

extractedPrint('extractedPrint');

// Context preserved to the original object:

const bindedPrint = obj.print.bind(obj);

bindedPrint('bindedPrint');

// Context replaced:

const alsoBindedPrint = obj.print.bind({ prop: 'bro' });

alsoBindedPrint('alsoBindedPrint');

Wondering where is this pointing when it's "lost"? It points to window:

const obj = {
  prop: 'there',

  print(prefix) {
    console.log(`${ prefix }: Hello ${ this.prop }.`);
  }
};

const extractedPrint = obj.print;

window.prop = 'window';

extractedPrint('extractedPrint');

In your case, you need to make sure that when push is called by forEach its context is preserved, that is, its this value should still be referencing the original array:

links.forEach(array.push.bind(array));

Anyway, that won't work as expected because NodeList.prototype.forEach() calls its callback with 3 arguments: currentValue, currentIndexand listObj and Array.prototype.push() accepts multiple arguments at once, so you could do:

const array = [];
const links = document.querySelectorAll('a');

links.forEach(array.push.bind(array));

console.log(array.length);

<a>1</a>
<a>2</a>
<a>3</a>

But for each Node or your NodeList, you would be calling push with 3 arguments instead of 1, ending up getting some unwanted elements on the list.

To convert a NodeList to an Array you could use Array.from() instead:

console.log(Array.from(document.querySelectorAll('a')).length);

<a>1</a>
<a>2</a>
<a>3</a>

Although there are other ways to do it, like pushing all the elements one by one defining your own callback:

const links = document.querySelectorAll('a');
const arr = [];

// Note we only define a single argument, so we ignore the other 2:
links.forEach((link) => {
  arr.push(link);
});

console.log(arr);

<a>1</a>
<a>2</a>
<a>3</a>

Or the the same thing using a loop:

const links = document.querySelectorAll('a');
const arr = [];

for (const link of links) {
  arr.push(link);
}

// Also valid:

// for (let i = 0; i < links.length; ++i) {
//   arr.push(links[i]);
// }

console.log(arr);

// Note this won't work, as NodeList has some other iterable
// properties apart from the indexes:

const arr2 = [];

for(const i in links) {
  arr2.push(links[i])
}

console.log(arr2);

<a>1</a>
<a>2</a>
<a>3</a>

Answer 5

I'm not 100% sure what you're trying to do, but I'm going to guess that you'd like to push the elements returned by querySelectorAll into 'array'. In which case, you can't just pass the function push to forEach, you must call push on array with each element as the argument, like so:

document.querySelectorAll("a").forEach(item => array.push(item));

Answer 6

What are you trying to push in your example? Maybe you are missing some parameters?

Try it out:

document.querySelectorAll("a").forEach(function(item) {
    array.push(item);
});