Complete Intro to Web Development, v3

Iterating Through an Array

Brian Holt

Brian Holt

SQLite Cloud
Complete Intro to Web Development, v3

Check out a free preview of the full Complete Intro to Web Development, v3 course

The "Iterating Through an Array" Lesson is part of the full, Complete Intro to Web Development, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates two methods of accessing everything in an array: a for loop and an array function called forEach.

Preview
Close

Transcript from the "Iterating Through an Array" Lesson

[00:00:00]
>> You'll spend a lot of time looping over arrays. It's a really common thing that you have a group of things, and you wanna do something to each item in the array, right? So, I have these cities here. And let's say I just wanna log them out, right?

[00:00:15]
Method one, this is one that you should probably remember that I would say this one is more useful in my opinion. You do a for loop, I is less than cities dot length, right, cuz length will be like, what is this one? This is of length five. You'll go from zero to four.

[00:00:33]
Once you hit five, five is out of bounds, right? If you ask for the fifth element in this, it's undefined, right? Sorry, if you ask for the five index, the fifth one is there because the fifth one would be Hong Kong, but the five index would be here, right, which is undefined there.

[00:00:57]
Okay, so that's what this is doing here. I ++, and then you let's just say console dot log cities. And then instead of putting, like a number here like zero, or one, or two, or three, right? You put I because what is I doing every singe literation? Keeps going up one, right?

[00:01:19]
So you can see here he goes from Seattle, San Francisco, Salt Lake City, Amsterdam, Hong Kong. Just as I demonstrate, if I just put it there you can see those are the numbers. Well, this is probably even more useful, 0 Seattle, 1 San Francisco, 2 Salt Lake City, 3 Amsterdam, 4 Hong Kong.

[00:01:51]
I probably didn't show you this before with console.log, you can just keep giving it stuff if you just separate it by commas, it'll log everything that you give it out, right? So I could just put lol here, and it would log that out too. Does that make sense?

[00:02:13]
Feeling good about that? This is really, really, really common. Okay, I wanted to show you this one cuz you'll see it and it might seem confusing. There's a function, like a built into arrays called for each, which takes in a function. Maybe this is a bit more clear.

[00:02:39]
Function logcity. So this is just like we're passing in a variable here, right? And it's running this function once on every single item in the array, and it's passing that city in as that item, right? So we have Seattle, San Francisco, Salt Lake City, Amsterdam, right? So, how many times is this function being called?

[00:03:16]
Five times, right? It gets called for one time for every single item in the array. Okay, and I will just say, timesCalled = a ++, right? Same thing. So, calls it that many times. This is called a more like more functional style of programming, if you've ever heard of like functional programming.

[00:03:56]
This is kind of the idea where you pass functions into other functions, and they do things for you. I don't really want you to worry too much about this now, but I wanted you to see because you're going to see it in code examples. So, here I've pulled this function out and then I pass this function into here, frequently you'll just see people put this directly here.

[00:04:19]
Like this, and the same for each item in the array, call this function once. Good, feeling okay about that? Some people prefer this style, some people for other style. I'm gonna argue that I think this is the more useful way of doing it. For a myriad of reasons.

[00:04:45]
But up to you. There's some people that would strongly disagree with that. This is kind of the end of basic programming, congratulations you've now gone through a lot, you've gone through the firehose. I'm not gonna teach you any more new programming techniques, not that there aren't any more out there in javascript or other programming languages, but you have the basic grammar to go out and do a lot of really interesting things.

[00:05:16]
If this was like a foreign language class, it would be like, you've completed like the first year of your French class, right? And you can go out there and order a croissant at a bakery or something like that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now