Arrays and Loops

Arrays and Loops are important elements of JavaScript, in preparation of getting into Objects and Functions, we’ll start with a review of Arrays and then get into Loops this week.

1: Arrays

We’ve already talked about arrays in Lesson 2, but let’s review a bit as they are an important tool in programming and are a good introduction to the concept of the object that comes up soon.

An array is a convenient way to store multiple values under one variable, it makes it easier to programmatically use.

Here is a example array, in it we create an array called progLang and then add items to it:

var progLang = new Array();

progLang[0] = “JavaScript”;  //note, you always start an array at index 0.

progLang[1] = “PHP”;

progLang[2] = “Objective C”;

 

If we want to use any of them, we can call them out by their index …

alert(progLang[2]);

or

console.log(progLang[2]);

Some other methods to declare an array are:

var progLang = new Array(“JavaScript”,”PHP”,”Objective C”);

or

var progLang = [“JavaScript”,”PHP”,”Objective C”];

We can use different properties and methods with an array (because it’s an object … which we will discuss in a later class). For example, we can easily get the number of items in an array or sort the items in the array. To do so we use the dot notation (array.property).

Property

Here is an example of the property length, which tells you how many values are associated with the array. This can be useful when you are programming. See it in action by trying this in the console:

var progLang = [“JavaScript”,”PHP”,”Objective C”];

console.log(progLang.length);

//note, if you are using the Firefox scratchpad, make sure you have the console log open as well.

Method

Here is an example of a method, which is typically some way to transform or utilize your array variables.

Here is sort() in action – it’s subtle, but look carefully at how the out put changes between the alert boxes.

 

var progLang = new Array();
progLang[0] = “JavaScript”;  //note, you always start an array at index 0.
progLang[1] = “PHP”;
progLang[2] = “Objective C”;

//alert out the array as is:
alert (progLang);

//sort it using the sort method
progLang.sort();

//alert out the sorted array
alert (progLang);

 

Here is one that you may fine useful as well … toString(), which turns an array into a regular strong.

var progLang = new Array();
progLang[0] = “JavaScript”;  //note, you always start an array at index 0.
progLang[1] = “PHP”;
progLang[2] = “Objective C”;

var StringVersion = progLang.toString();

alert(StringVersion);

 

There are many more methods for you to check out as well, be sure to read this page: https://www.w3schools.com/js/js_array_methods.asp, and some of the other ones that get into the specific methods.

2: ‘Multi-dimensional’ Arrays

Arrays are pretty versatile tools, and in fact, you can store multiple values within a single array item. By which I mean, you can store a single value with multiple values and sub values!

Javascript doesn’t actually call this a multi-dimensional array, rather a jagged array, but that’s a detail for another day.

Check out this multi-dimensional array for the programming language example. Note that I am adding a hardness level to the language as my multi-dimensional value.

var progLang= [

[‘JavaScript’, ‘Easy!’],

[‘PHP’, ‘Medium’],

[‘Objective C’, ‘Hard’]

];

alert (progLang[0][1]);

What happens when you try it in the console? What value do you get? Why do you think it showed “Easy” and not the word Javascript?

Read this article for more about the Multi-dimensional array: http://www.javascripttutorial.net/javascript-multidimensional-array/

 

3: Loops

For the following example, I am still using the array of programming languages.

Let’s say that even though we know we have the array of values, we want to look through them one by one and not have to type out each one individually…

Enter the loop.

The loop is a way to repeat code depending on a condition. The condition in the above problem is that we want to print out all of the items in an array, one by one. For this, we use a loop.

There are a couple of different loop types we can use, but for our purposes, we’ll start with the for loop. Let’s check out the for loop and then apply it to the problem above.

for loop

The for loop is set up like this

for (initial value; condition ; increment) {   output/code   }

Here is a look that prints out the numbers 1 to 10:

for (i=1;i<=10;i++){

alert(i);

}

This loop simple is taking the variable i, which is initiated with the value 1, and while the i is less than 10, it will write out the value. i is incremented by one each time.

Now, back to the programming language problem.  To iterate through our array, we’ll use a little bit of everything from above.

 

//set up our initial array:

var progLang = new Array();

progLang[0] = “JavaScript”;

progLang[1] = “PHP”;

progLang[2] = “Objective C”;

//set the initial value to see the for loop.

var index=0;

//go through the loop, printing to the console the value of the array each time.

for (index; index < progLang.length; ++index) {

alert(“Language ” + [index] + ” = ” + progLang[index]);

}

 

So, now, instead of typing

alert(progLang[0]);

alert(progLang[1]);

etc…  we are looping through as many programming languages that we have in the array.

Try adding another language to your array and see how the loop works.

forEach

Here is another method for getting each element of the array, it’s called the .forEach and it uses a pre-defined function called “entry” to grab the value from the array.

Again using the progLang array:

var progLang = [“JavaScript”,”PHP”,”Objective C”];

progLang.forEach(function(entry) {

alert(entry);

});

This example uses some built in functionality to JavaScript.

The first thing we are doing is taking the array (progLang) and applying the “forEach” function to it.

“(function(entry))” is something called a callback. Let’s just, for now, say that each item in the array is an “entry” (something we just named, you could use a different name if you wanted)

There are several types of loops, each with a slightly different function. For/In, Do/While, make sure you read up on these here:

https://www.w3schools.com/js/js_loop_for.asp

http://www.w3schools.com/js/js_loop_while.asp

 

When ready, move on to Assignment #4 in Assignments section in the left navigation.