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 Kristian Woods
Kristian Woods
23,414 Points

I'm having trouble understanding a custom forEach loop...

I'm following along to an example of someone demonstrating how to attach a method to the Array prototype - That part is fine - But, what I'm having trouble with, is understanding the structure of the method that gets attached...

He creates the custom loop to accept a function. However, when he calls the 'myForEach', he adds the 'color' param. How does this work? Where is the 'color' param coming from? 

const myArray = ['red', 'green', 'blue'];

Array.prototype.myForEach = function(func) {
    for(let i = 0; i < this.length; i++) {
        func(this[i]);
    }
}

myArray.myForEach(function(color) {
 console.log(color);
});

So, I understand that 'this[i]' points to the current array item. But, what I'm having trouble with, is why you have to include the 'color' param in the anonymous function? Cant, you omit the 'color' param, and the function would work as normal? 

myArray.myForEach(function() {
 console.log(color);
});

When I try this, I get an error...

I don't understand...

Thanks

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! A parameter is essentially a variable declaration that lasts for the duration of the execution of that function. What you're sending in to the function will be assigned to a variable named color. If you omit the parameter color then you also omit the declaration for the variable color. When you then try to console.log(color);, color will, of course, be undefined and it won't know what you mean.

Hope this helps! :sparkles:

Kristian Woods
Kristian Woods
23,414 Points

Thank you for getting back to me, Jennifer. That's a great explanation. However, I'm still a little lost.

I thought that by default, the function console.logs the array item...so why do you need to include the parameter? I'm sorry if my question doesn't make sense... its just that I have never run into this problem before now...

Thanks

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I find it hard to believe that you've never encountered this. And I feel like when I show you a really simple example it might click. The console.log(); doesn't automatically log out anything. It logs out what you tell it to. You're telling it to log out the value of the variable color which was defined as a parameter.

Take a look at this in your console:

function addThem(x, y) {
    console.log(x + y);
}

function tryAddAgain() {
    console.log(x + y);
}

addThem(20, 50);
// tryAddAgain(80, 30);

If you attempt to uncomment and run the last line, you will get an error because x and y are not defined. You're trying to log out the result of information it received but never assigned to a variable. In the second function, there is no parameter (local variable definition) to accept the incoming arguments. When you send information to a function, it then needs a way to reference the information you sent it. The easiest way is with a parameter.

Hope this clarifies things! :sparkles:

edited for additional comment A parameter serves to sort of catch incoming information and then store it in a variable of that name, which you can then access inside the function.

Kristian Woods
Kristian Woods
23,414 Points
Kristian Woods
Kristian Woods
23,414 Points

Perfect! Yeah, I understand the concept of parameters and arguments - I just didn't understand it in the context of this example.

I think because I tried using the function using 'alert' - without any parameters, and it worked fine. So, I confused myself.

So, let me see if I have this right...

Is assigning 'this[i]' to a variable a JS default behaviour then? and In order to access the array item and use it however you like, you need to store it in a variable/parameter (color)?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

No, it's not. You assign the value when you send it to the func function that was passed in as an argument. I think you're missing the part where the bottom part is a call to a function that sends a function as a parameter.

myArray.myForEach(function(color) {
 console.log(color);
});

This is calling the myForEach on the array and sending that function to it. Remember, functions are first class citizens and can be passed around to other functions or even returned from other functions just like any other value. And the element in an array is a value just like any other. If you send it to a function, you need something to catch the value or, you can use args, but I don't really recommend that as it makes the code harder to follow.