Arrays are useful elements of JS that enable us to define variables in an efficient way. Especially, if we have variables that can be classified under the same category, arrays are very helpful to store that information. The following example shows how arrays are created and used in JS;
var fruits = new Array("apple","banana","cranberry");
document.write("The 1st element of the array: " + fruits[0] + "<br/>");
document.write("The 2nd element of the array: " + fruits[1] + "<br/>");
document.write("The 3rd element of the array: " + fruits[2] + "<br/>");
And the Output would be:
The 1st element of the array: apple
The 2nd element of the array: banana
The 3rd element of the array: cranberry
Looks good, but imagine having thousands of entries like that... That would be a pain to manually write every single one of them.. Fortunately, we have a helper in such cases: Loops
In programming, a loop is a sequence of instructions that is repeated until a specified condition is reached. The following code shows how to use for loops with arrays;
var fruits = new Array("apple","banana","cranberry");
for (var i = 0 ; i <= fruits.length - 1; i++) {
document.write("The " + (i+1) + ". element of the array: " + fruits[i] + "<br/>");
}
An easier alternative ( called enhanced for loop ) would be;
var fruits = new Array("apple","banana","cranberry");
for (i in fruits) {
document.write("The " + Number(Number(i)+1) + ". element of the array: " + fruits[i] + "<br/>");
}
Notice the difference between the structure of the for loops. for (i in fruits) starts visiting each index automatically from 0 until it reaches the end of the array. On the other hand, in the first for loop structure, we get to pick the initial index value, the increment and the final index value.
And the Outputs:
The 1. element of the array: apple
The 2. element of the array: banana
The 3. element of the array: cranberry
This looks pretty similar to our initial output, but again if you have for instance; a thousand entries, the loop method is definitely should be the preferred method.
In some specific cases, using another type of loop called while loops might be beneficial. Especially, when we want our block of code to repeat itself until a specific condition is met, we use while loops. Here is an example,
var counter = 0;
while (counter != 8){
document.write("Counter Value: " + counter + "<br/>");
counter = counter + 1;
}
As you can see from the code block above, we print and increment our counter value in each iteration until it reaches to 8.
Let's move on to another fundamental statement called a conditional statement. Conditional statements enable us to perform some operations when a specific condition is met. There are two different types of conditionals in programming. The first one is called the if-else statement and the other one is the switch-case statement. The following code shows the use of if-else statements in JS;
var city = "New York";
if (city=="London"){
document.write("if condition is met");
}
else if(city=="Dubai"){
document.write("else if condition is met");
}
else{
document.write("else condition is met");
}
As you can see from the example, the string variable "New York" does not match with if and else if conditions, therefore ' else condition is met ' will be the output. You can change this variable to "London" or "Dubai" and observe the output.
The other conditional statement, switch-case, works in a similar fashion;
var city = "New York";
switch (city){
case "London":
document.write("first case condition is met");
break;
case "Dubai":
document.write("second case condition is met");
break;
default:
document.write("default condition is met");
break;
}
Notice how we 'break' after each case statement. The reason of this is to prevent other case statements to be met after one condition is satisfied. In this example, ' default condition is met ' will be the output.
Continue Reading Introduction to JavaScript Tutorial 3 - Functions, Event Listeners
Disqus Comments Loading..