Learn To Code Part III: Arrays And Logic Statements

You’ve mastered the basics of variables and made it half way through our course, but are you up to the challenge of arrays and logic statements? Of course you are. Let’s get started!

These lessons work best with the video, which you can see above, but we’re also providing text for reference below. Even if you do prefer to read, the videos will be more explicit and demonstrate how to do everything we’re discussing. If the text seems a bit too complicated, be sure to watch the video.

This is where things get a bit more complicated. There’s no need to be intimidated by what’s to come, but just know you might hit a point of frustration because we’re going to cover some of the more complex — but incredibly useful — stuff today. This is going to be the hardest (and longest) part of the beginner lesson, but you can do it. You just may need to rewind and practice a little bit more than with the previous two lessons.

First, we’re going to learn about arrays. After that, we’re going to take a look at if statements and for loops, and also how to use those tools with your array.

Arrays

An array is a type of variable, but it’s more like a box with a bunch of sections. Unlike the simple variables we’ve discussed before, arrays can contain more than one piece of data. Let’s take a look at how an array can be defined and then we’ll talk about what it all means.

var myArray = new Array(“Lisa”, “George”, “Adam”, “Paloma”, “Jeffrey”);

I’ve just created an array called myArray that contains five names. Each is separated by a comma and each name is in quotes because they’re strings (if you forgot what a string is, refer back to lesson one). As you might have guessed, arrays are really useful for storing a bunch of similar data inside of one variable for easy access. It’s kind of like a mini database. When you want to access an item in an array you do so by number.

myArray[0]

What’s a Method?
A method is like a function, only it’s attached to a type of variable. So instead of just calling it out in the open, like alert(), you call a method along with a variable. Array.join(), for example, will take the array that .join() was added to and turn it into a single string. Don’t worry too much about functions and methods, though. We’ll cover that stuff tomorrow.

The above would resolve to Lisa, because Lisa is the first name in the array. If you changed the 0 to a 1, it would resolve to Adam. If you put a number beyond the number of items currently in the array (like 12), you won’t get anything at all.

That’s basically how arrays work. Not too tough, right? There’s a ton more that you can do with arrays (e.g. sorting, splicing, searching, etc.) but we’re not going to get into all of that here. If you’d like to skip ahead a little bit and take a look at array methods in JavaScript, check this out. For now, though, that’s all the information you really need.

For Loops

The for loop is going to be the most complicated thing we’re going to deal with today, and we’re looking at it before the if statement because we’re going to use an if statement to modify its behaviour. So what is a for loop exactly? Basically, a for loop runs a chunk of code a specified number of times and counts that number as it moves along. Imagine you’re a number variable called i. (You can pretend that stands for I as in yourself, but it really stands for iterator.) As i, you need to run a mile and you’re at the starting line of a quarter-mile track. To complete a mile, that means you have to run four laps around the track. Represented as a for statement, that might look something like this:

for (i=0; i<4; i++)

{

run();

}

Let’s break this down. When you say for, you’re telling the computer you’re declaring a for statement. That should make sense. That’s pretty much the same as saying var before declaring a variable. That’s the easy part. The complicated part happens inside the parentheses. Let’s look at each part individually.

i=0
When you use i in the for loop, it’s a variable you have to declare. It’s not just there for you to use. You could use any letter, or a sequence of letters. It doesn’t really matter what you call this variable, but traditionally i is the way to go. Because you’re declaring it inside of the for loop, you can reuse it in another loop later. This variable is local to the for loop and won’t conflict with stuff outside of it. What we’re doing here is setting it to 0. You don’t have to start at 0, but in this instance (and virtually every other situation where you’ll use a for loop) it makes sense. We haven’t run any laps yet, so we’re starting at zero.

i<4
A for loop is designed to run a bunch of code until you tell it to stop. This middle portion tells the for loop how long to run. We only want to run a mile, which is four laps, so we’re telling the for loop that so long as the variable i is less than 4, keep going. If we wanted to run two miles, we could change it to i<8.

i++
The last condition is very simple: increase i by 1 every time this loop completes. You can use ++ or -- to increase or decrease (respectively) a number by 1 anywhere else in your code, too, but chances are you’ll use it most with for loops. This part is very important because we’re telling the for loop to stop running when i is no longer less than the number 4. Because i starts at 0, we need to increment i by one each time the loops runs or it will run forever.

Inside the Curly Braces
The curly braces {} currently has run() in it, but in this example that’s not a real function. Basically, you put whatever code you want to run inside the curly braces. They’re just around to section off the specific code you want to run.

One More Time, Please!
OK, let’s just run through this one more time because it’s sort of complicated (or, at least, it was for me the first time I learned it):

  • The for tells the computer that we’re defining a for loop.
  • i=0 sets a variable called i equal to 0, which is our starting point.
  • i<4 tells the for loop to stop once i is no longer less than the number 4.
  • i++ tells the for loop to increment i by 1 after each time it finishes running the designated code.
  • All the designated code that the for loop is supposed to run needs to be placed inside the curly braces.

Let’s Put It to Use
OK, let’s now make a for loop that loops through our array and alerts us of each name in the array. That code should look something like this:

for (i=0; i<5; i++)

{

alert(myArray[i] );

}

This real example should look very similar to the fake example we just dissected except for one thing: myArray[i] . Earlier we looked at how we can access the contents of an array by number, so myArray[0] will give us something different than myArray[1] . Because i is a number that changes as the for loop runs, each time the loop will access a different point in the array. This saves you the trouble of writing the code out five times.

OK, but what if we don’t know the length of the array? Right now we know there are five elements, but if you make a change we’ll either be running the loop more than we need to or we won’t be running it enough. What we want to do is to run the for loop until we’ve accessed the entire array. That requires one little alteration:

for (i=0; i<myArray.length; i++)

{

alert(myArray[i] );

}

To make life easier, JavaScript (and most languages that use arrays) have a property built in to all arrays you create. (Actually, there are a bunch of different properties but we’re only going to look at this one right now). This property, called length, gives you the number of items in the array. So, instead of saying i<5 we’ll just say i<myArray.length and the for loop will run until it’s run out of items in the array.

Did you survive all that? If you did, that’s mainly what you need to know about for loops. There are few more examples in the video up top, so be sure to check it out if you want to see a few other things you can do with them.

If Statements

If statements are probably the easiest type of logic statement to understand. They’re powerful too, so it can be easy to get addicted to them. Novice coders tend to cling to if statements because it seems that if you have enough of them, you can do just about anything. That is true, if you don’t mind losing your mind in the process. You can write some fairly complex code that operates on if statements, but you’d need a lot of them and it will drive you crazy. So, although you’re probably going to love them, don’t overuse them. Too many ifs do not make for efficient, good code.

So what is an if statement? It’s basically a statement that says if the specified condition is true, then run this block of code. It can also be used to say, if the first condition isn’t met, do this instead. You can also check if an alternate condition is met if the first one fails. For example, if you want to wash your dog if your dog is blue, you can use an if statement to find out and wash the dog if it turns out to be blue. Here’s how that could look as a piece of code:

if (myDog == “blue”)

{

washDog();

}

Like we’ve seen before, if tells the computer that we’re declaring an if statement. In parentheses, we’re defining the condition. You’ll see we have a variable called myDog, which presumably contains a simple piece of information: the colour of your dog represented as a string. It could be “red” or “green” or “blue”, but we don’t know yet. To find out, we’re going to ask if myDog is equal to “blue” to find out if it’s actually blue. To test for equality, we use ==. If you use a single = then you are setting the value of a variable. If you use two == then you’re testing to see if one variable is equal to another, or just equal to some kind of data. If the dog turns out to be blue (meaning if the condition is met and myDog is equal to “blue”), then the if statement will allow the code in curly braces {} to be run. In this example, the code inside the curly braces is washDog();. While washDog() is not a real function (not yet, anyway), if it were it would presumably go forth and wash the blue out of your dog.

OK, so how can we apply this in our code? Well, the video will walk you through a more complex example but we’re just going to test for someone’s name. Let’s say you included my name (Adam) in the array and you wanted to receive an alert only if my name comes up. Well, we can can combine your for loop and your if statement to do just that:

for (i=0; i<myArray.length; i++)

{

if (myArray[i]== “Adam”)

{

alert(“I found ” + myArray[i]+ ” in the array!”);

}

}

Basically, we’ve just put an if statement inside of the for loop, and our if statement is now asking if any position in the array is equal to Adam rather than asking if a simple variable, like myDog, is equal to “blue”.

Got all of that? Good! If you made it through this lesson it’ll be smooth sailing tomorrow. In our sort-of last and final beginner lesson (there will be an “epilogue” and recap after), we’ll learn about functions and make a little game. See you tomorrow!


The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.

Comments


6 responses to “Learn To Code Part III: Arrays And Logic Statements”

Leave a Reply