Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

Why can't I use console.log function as an argument for the forEach() method on arrays?

As most of you know the forEach() method requires a function as an argument to perform on each element of the array it is called on. My question is why we cannot use the console.log function as an argument.

//this works.


[3,4,5,"banana"].forEach(alert)

/*This doesn't work, but I am not sure why.  Both 'alert' and 'console.log' are variables referencing functions */


[3,4,5,"banana"].forEach(console.log)

6 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Great question Ryan Scharfer! And at first I was scratching my head too. But then I remembered how the forEach callback works: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Here's the basic structure of how that callback works:

[1,2,3].foreach( function (element, index, array) {

});

Notice that the callback is passed 3 arguments -- the actual element from the array during the loop, the index value of the element in the array, and the entire array.

You can call the console.log method with any number of parameters separated by commas. For example this:

console.log('Hi', 'there', 'Ryan');

Will print out "Hi there Ryan" to the console. So what's happening is when you pass the console.log method to the forEach method it's kind of like calling console log like this:

console.log(1,0,[1,2,3]);

The Chrome JavaScript console doesn't seem to like using forEach with console, but I've tested your code -- [3,4,5,"banana"].forEach(console.log) -- in an online JavaScript repl -- http://repl.it -- and this was the output

3 0 [ 3, 4, 5, 'banana' ]
4 1 [ 3, 4, 5, 'banana' ]
5 2 [ 3, 4, 5, 'banana' ]
banana 3 [ 3, 4, 5, 'banana' ]

The alert function works because it only accepts a single parameter and simply ignores the two other arguments passed to it by the forEach method.

Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

For others interested, Dave meant http://repl.it. : )

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Thanks Ryan Scharfer for the correct URL. I updated the URL in my post.

Matthew Greenberg
Matthew Greenberg
8,173 Points
Matthew Greenberg
Matthew Greenberg
8,173 Points

You need to pass a function to for each... Like this

    ['hi', 'bye', true, 'false'].forEach(function(arrayitem){
        console.log(arrayitem);
    })

edit

Some basic info about the forEach method.

the foreach method iterates through an array, invoking a function you specify for each element. You pass the forEach method a function as the first argument. Your function can accept three arguments, the value of the array element, the index, and the array itself

var data = [1,2,3,4,5];

//use the foreach method to increment array values by 1

data.forEach(function(arrayValue, arrayIndex, thisArray){
     thisArray[arrayIndex] = arrayValue + 1;
});

//data is now [2,3,4,5,6]

Console is an object with a method log, that is why you cant use it to print like that, same with alert. alert is a method of the window object. forEach is looking for a function, not an object.

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

Thanks for taking the time to answer. What confuses me is that passing "alert" in as an argument for the forEach() method works. I think it also works for other "built-in" functions, which are actually methods on the window object. e.g - [1,2,3].forEach(confirm) works as well. The forEach() doesnt require you to use an anonymous function as an argument. It can simply be a variable referencing a function such as "confirm" or "alert". But for some reason " console.log" doesnt work.

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

Hi, I still haven't found the answer I am looking for, but I wanted to show you that you can easily pass other methods to the forEach() method.

var everest = {country:"Nepal", 
                altitude:"high", 
                climbable:function(fitnessLevel){
                  if (fitnessLevel == 10) 
                    console.log("yes");
                  else 
                    console.log("no");

                }
              };



var fitnessLevels = [3,6,10,4,8,10];
fitnessLevels.forEach(everest.climbable);

In fact every function you create in the global space becomes a method on the window object.

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

I bet Dave McFarland can help. : ) I am wondering why you can't pass console.log() method in as an argument for forEach.

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

Thanks Dave! I never realized you had answered this till now. Good stuff.