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

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

loops in Javascript

I have the following piece of Javascript:

var SLIDESHOW_ITEMS = null;
var SLIDESHOW_CURRENTITEM = 0;
var SLIDESHOW_TIMER = null;
function slideshowInitialise() {
    if ($('#slideshow').length > 0) {
        //build array
        SLIDESHOW_ITEMS = $('#slideshow li').each(function (i, val) {
            var thisHtml = '';
            thisHtml = '<img src="' + $(this).attr('data-image-src') + '" />';
            var thisCaption = $(this).attr('data-caption');
            if (thisCaption && thisCaption != '') {
                thisHtml += '<div class="caption">' + thisCaption + '</div>';
            }
            $(this).html(thisHtml);
        });

I'm trying to get my head around this line of the code:

        SLIDESHOW_ITEMS = $('#slideshow li').each(function (i, val)

Where do the 'i' and the 'val' come from, what do they represent? Any help would be great appreciated.

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Marcus,

Thanks for your help yet again!

So if I'm understanding this correctly, in this exact example, if we are at the second item in the loop, 'i' will be 1, as per indexing numbering conventions. And if the value of the second item in the loop is 'jimbob', then 'val' will be equal to 'jimbob'?

And also just to clarify, 'i' and 'val' could be changed to anything? So we could have the code looking like 

 SLIDESHOW_ITEMS = $('#slideshow li').each(function (thingy, thingysvalue)
Marcus Parsons
Marcus Parsons
15,719 Points

Absolutelypositivelyexactomundo on everything you said! :D You're welcome, Gabriel!

Just remember the order of the arguments that are in your function and in your case, thingy would be the index and thingysvalue would be the value! ^_^

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hi Gabriel,

The i and the val you see in the each function are optional parameters you can specify in that jQuery method. The first argument of the each function always represents the current index the loop is on, and so in this case, that is the i variable. The second argument of the each function represents the value at the current index and in this case that is the val variable.

You can leave off both arguments if you wish, but in order to get the value argument, you must have both arguments. You could also put only one argument which would be the current index. You can name each of these to whatever valid variable name you would like including carrot and potato if you wish, although i and val are a bit more intuitive haha :)

You can also see what I am talking about in the jQuery API reference for the .each method: https://api.jquery.com/each/

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Thanks so much for your clear and understandable explanation Marcus. How's things been? Are you currently working as a professional developer?

Marcus Parsons
Marcus Parsons
15,719 Points

You're very welcome, Gabriel. Things have been pretty good man. I'm not working as a professional developer just yet, but I actually had a phone interview this morning for a position in Texas as a web developer. And I'm thinking that things went really well on the phone call, so I'm waiting to hear back from them about that. I had a recruiter get a hold of me for another company, as well, for a UI/UX designer position, and I'm looking into that. How are things your way?

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Oh awesome, good for you! Things are all good with me. I'm writing the HTML, CSS, and a little bit of Javascript for the website of a volunteer organisation I volunteer at. Hopefully that goes live soon. I also landed a couple of small jobs putting Wordpress sites together. I also am building my own Wordpress theme. It's proving good practice and a good project to actually work on, as opposed to just doing tutorials all the time.

Can I ask, what was your process in learning Javascript when you were starting out with it? Did you go through a book/online course? Or did you just find small projects/things to build, and learn the Javascript relevant to them?

Marcus Parsons
Marcus Parsons
15,719 Points

That is fantastic to hear! I'm glad to hear everything is going good for you, and you're getting some money doing what you like to do. That's the greatest thing in the world!

To be honest, learning JS has been a mixed bag of a great many things. It's been helping people out on these forums, working on something random using JavaScript every single day, spending time playing with the console in Chrome, and also working on bigger JavaScript projects. I'm the type of person that I can't just watch a video with someone do something and then be able to replicate it or even understand it. I have to get in there and get my hands dirty and do it myself to truly understand what's going on.

The forums have truly been a HUGE help to understand JavaScript, not only with helping to solve other people's problems but trying to explain what's going on with their code and the why behind their code giving errors is a huge task. I've had over 300 best answers on here so far and that doesn't include all of the other answers I've given out on here, and so I think that, over this last year, I've seen quite a few of the same things pop up where people were getting the same errors. You notice patterns when it happens a few times.

It's hard to really put down exactly what helps with learning JavaScript because people have different learning styles. One thing I will say though is use the console! I still log out random things to the console from my program just to see if I'm right about what it does. The console is such a powerful and helpful tool.

Anyways, good luck, Gabriel, and if you want, shoot me an email on my site and I'll email you back. I don't like giving my main email address out publicly. Here's the link to that: http://www.marcusparsons.com/contactme.php