Javascript For Loop - Part 2

Hello There Soldier ...

Had a rough day? ... it's okay, you're still here. And that's a lot my friend.

In the first part of our Javascript For Loop lesson, we had a general view of iteration methods in programming languages. We then worked on a few examples to get you going. If you haven't had a chance to go over some of the examples in the first part of Our Javascript For Loops Lesson, please feel free to go back and play around with those examples.

In this tutorial we'll continue showcasing the For Loop and how it can can be used in real life projects. We'll start with iterating over a single Javascript Array.

The array will essentially be a list of German cars.

<script>
    var cars = ['Benz', 'BMW', 'VW', 'Audi'];
</script>

I know ... I can't afford them either!

Note that the array has four items, Put another way, the array looks like this:

<script>
    cars[0] = 'Benz';
    cars[1] = 'Bmw';
    cars[2] = 'VW';
    cars[3] = 'Audi';
</script>

Arrays always start at an index of zero [0], not one [1]. This is just something to note for today. Later on we'll get deeper in to arrays, and explain all these little intricacies. For now we iterate through this array and see what happens. The code should look something like this:

<script>
    for (i = 0; i < cars.length; i++) {
        console.log(cars[0]);
    }
</script>

Instead of saying i < 4 on the limit condition , we use the length of the array because it's a variable. Meaning it could change anywhere between when it's declared and where the loop runs. As someone could add or subtract an item from the array. Using cars.length ensures that we alaways have the updated length/ size of the this array.

"Alright, okay ..." - Denzel Washington

Now we're gonna try and build a string from words in an array. Many times a developer will have to do this in a real project. This might be when you process incoming data from a user's form input or some sort of external api call. And you don't particularly like the way in which the incoming data is formatted.

Let's say we have a string of this sort:

var testString = ' I drink coffee at night';

Let's say maybe you wanted to get rid of the word coffee from this string. One method of doing this, requires that you first have to create an array out of your words.

var testArray = testString.split(" ")

this will create an array that looks like this:

var testArray = ['I', 'drink', 'coffee', 'at', 'night'];

We then loop through the array and try a recreate the sentence without the word coffee :

<scrip>
    var coffeeLessString = ''; 
    for (i = 0; i < testArray.length; i++) {
        if (testArray[i] !== 'coffee') {
            coffeeLessString += testArray[i] + ' ';
        }
    }
</script>

In the code above we append every item value from the array to a new string we named coffeeLessString, unless it has a value of coffee ofcourse. This will build the new sentence :

I drink at night - see no coffee.

It's still a valid question if you ask my neighbour ...

For our final For Loop example, we'll loop over an object. Objects are a bit tricky in Javascript because different versions of Javascript handle some objects differently. We'll try and cover our basis.

Unfortunately this is a topic for another tutorial.

"Arrays always start at an index of zero [0], not one [1]"

The Village Geek

"Alright, alright, alright ..." - Matthew McConaughey

Pheeeww .. get your brain some break will ya. Toss a few nuts in the air and roll around in the sand with your bull dog.

In the next tutorial we'll continue with For Loops, specifically iterating over Javascript objects.

Ayytt playa ... peace!!


Cape Town, South Africa

Buy me a coffee ? :) Buy me a coffee :)

Reply to this discussion

Bookmarks

Build
Learn
Coming Soon ...