Why doesn’t console.log work when passed as a parameter to forEach?

by

It’s worth pointing out that there is a difference in behavior in the implementation of console.log. Under node v0.10.19 you do not get an error; you simply see this:

> [1,2,3,4,5].forEach(console.log);
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]

This is because the callback to forEach is a three-parameter function taking the value, the index, and the array itself. The function console.log sees those three parameters and dutifully logs them.

Under the Chrome browser console, however, you get

> [1,2,3,4,5].forEach(console.log);
TypeError: Illegal invocation

and in this case, bind will work:

 > [1,2,3,4,5].forEach(console.log.bind(console));
 1 0 [ 1, 2, 3, 4, 5 ]
 2 1 [ 1, 2, 3, 4, 5 ]
 3 2 [ 1, 2, 3, 4, 5 ]
 4 3 [ 1, 2, 3, 4, 5 ]
 5 4 [ 1, 2, 3, 4, 5 ]

but there is an alternative way: note that the second parameter to forEach takes the value of this to use in the callback:

> [1,2,3,4,5].forEach(console.log, console)
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]

which works in the Chrome console and node for me. Of course, I’m sure what you want is just the values, so I’m afraid the best solution is, indeed:

> [1,2,3,4,5].forEach(function (e) {console.log(e)});
1
2
3
4
5

Whether node’s behavior is a bug, or it simply takes advantage of the fact that console.log is not specified by ECMA is interesting in its own right. But the varying behavior, and the fact that you have to be aware of whether your callback uses this is important and means we have to fall back to direct coding, even if it is verbose thanks to the keyword function.

More Related Contents:

  1. How can I create an option element using javascript and set it’s value [duplicate]
  2. For-each over an array in JavaScript
  3. Short circuit Array.forEach like calling break
  4. Javascript call() & apply() vs bind()?
  5. JavaScript: Difference between .forEach() and .map()
  6. Passing an array as a function parameter in JavaScript
  7. change values in array when doing foreach
  8. What does [].forEach.call() do in JavaScript?
  9. forEach on querySelectorAll not working in recent Microsoft browsers
  10. How to add an object to an array
  11. JavaScript, Node.js: is Array.forEach asynchronous?
  12. How can I create every combination possible for the contents of two arrays?
  13. forEach on array of undefined created by Array constructor
  14. How to loop through all the elements returned from getElementsByTagName [duplicate]
  15. Check if object value exists within a Javascript array of objects and if not add a new object to array
  16. Why doesn’t nodelist have forEach?
  17. The invocation context (this) of the forEach function call
  18. Javascript Array of Functions
  19. How to use promise in forEach loop of array to populate an object
  20. Fastest JavaScript summation
  21. Why Array.forEach is slower than for() loop in Javascript? [duplicate]
  22. Splicing a Javascript array from within the callback passed to forEach
  23. How can I use optional chaining with arrays and functions?
  24. Loop (for each) over an array in JavaScript
  25. Find all values by specific key in a deep nested object
  26. setTimeout not working inside forEach
  27. Group javascript array object by same key
  28. JavaScript foreach loop on an associative array object
  29. .indexOf function on an array not working in IE7/8 using JavaScript
  30. Can forEach in JavaScript make a return? [duplicate]

Leave a Comment