Welcome back, learners. Today we are diving into another way
to work with arrays in JavaScript, focusing on the for...in loop. This might seem similar
to what we've done before with forEach, but for...in has its own special use cases and caveats and is a little easier
to use in my opinion. So let's explore how this loop can be
handy on the ServiceNow platform. the first part of our lesson. Let's go back and review
some of our other looping methods. And as a reminder, all the scripts
that you will be seeing can be found at devlink.sn/sn-js if you want to follow along at home. But let's review
some of our older looping methods. The first one is our for loop
and then our forEach loop. So let's walk through this. You'll see that
first I'm building an array of fruits. So in this array it's just a bunch of
strings: apple, banana and cherry. And then in this for loop,
what it's saying is, if we have a variable declared,
i equals zero, and as long as i is still smaller
than the length of this array, then do the code that's within this loop and then increase i by one. And so if you remember from Chuck's
original lessons, this is a very common way to do for loops; to iterate
through everything within a array so that you can execute a code
for everything inside of that array. And then the other way to do
a loop is forEach, one of Chuck's later lessons
reviewed this, you basically say the array name and then for each
and then you give it a function and then you similarly to the regular
for loop, you iterate on each item and
given an index. So you'll see as I run this script, it has the same results for both. For loop: at index zero, we have Apple. At index one, we have banana. At index two, we have cherry. And for the forEach loop the same thing. At index zero, we have apple. At index one, we have banana. At index two, we have cherry. So that is a very common way to do loops on arrays. Now let's talk about a different way
to do an array loop. I'm going to start off with my same array and I'm going to instead type for var index in fruits and build my array this way and notice it's a lot cleaner of a for loop
and it's a lot more simpler to read. And this is one of the reasons
why I like using it. and then from here. The code is very similar to the last one. So we're going to say let's create
a log statement for in loop (to know which one
kind of loop we are doing) at index and give it the index variable. We have fruits and then the index of where we are in the array
according to the loop. And there you have it, very similar
to the last way we did forEach, but it's a lot cleaner
in terms of what the syntax looks like. And if I run it, you could see that
for...in gives us the indexes as strings. You can use them
to access the array values just like the other ways that we do loops,
and it has the same result. So it's just another way
of doing a for loop and it's just a fun, clean way to do it
without having to say how many times
are you going to go through the loop if you are assuming
that you want to go through every single item inside the array. And then finally, for this lesson, I do want to talk about one caveat
about using the for...in loop that you may run into in your testing
and in your scripting. That makes it a little bit different
than the for loop and the forEach loop. And that's specifically what happens
when you use custom properties inside of your array. You'll see that I made two arrays in here, so Fruits is our original array
that we've been using. And then I've also created a vegetables
array with avocado, broccoli and carrot. And then for both of the arrays,
I've created a custom property inside both of those arrays
and declared them as a string “Not_in_array”, as in treating the array as like an object. I'm giving it its own property to sit
next to the actual array of indexes. So I'm going to run up for loop on the original array of fruits and then I'm going to run a for...in
loop on vegetables and see the difference. So you can see here on the fruits array,
it's the same result. At index zero, we have apple. At index one, we have banana. At index two, we have cherry. That ran exactly
as we expected it to as before. But let's look at the vegetables
array At index zero, Avocado. One, broccoli. Two, carrot, just as expected. But then at index customProperty,
we have “Not_in_array.” So it took those properties that we declared on the array and also displayed them in this loop. It's not likely to come up
very often in your scripting because not many people set
custom properties on arrays. But if you ever run into a situation
where more things are appearing on your for...in loop
than you're expecting, that's why. And that's it. That's the for...in loop. All right. Thanks everyone.