Arrays and Loops
JavaScript comes with an array of looping constructs. We also have functional style loops which we'll get to soon.
Arrays
We can declare an array using the square bracket syntax, like this:
var a = ["cheese", "ham", "toast"];
Arrays are polymorphic
Arrays are fully polymorphic. You can store anything in them:
var a = [1, "ham", new Date()];
Get the length with .length()
a = [3,6,9]
a.length // 3
a[a.length] // 9
Arrays are not arrays
Arrays in JavaScript are not like arrays in other languages. They are in fact associative arrays, sometimes called hashmaps or hashes.
They have numerical keys associated with arbitrary values.
This means we can create gappy arrays without filling our computer's memory:
var a = [];
a[0] = 12;
a[10000000000] = 13;
alert(a[10]); // undefined
However, don't try to alert the array, or the browser will convert it to a very long string.
You can also store a value in an array with a non-numerical key:
var a = ["cheese", "ham", "toast"];
a['condiment'] = 'ketchup';
While Loops
A while loop will keep going while some condition is true. For example:
var sandwichesMade = 0;
while (sandwichesMade < 5) {
alert("Making Sandwich: " + sandwichesMade);
sandwichesMade = sandwichesMade + 1;
}
For Loop
A for loop is the most efficient type of loop in JavaScript. It looks very similar to classical languages such as C or Java.
people = ['dave', 'jon', 'mikey'];
for (var i = 0; i < a.length; i++) {
alert("Making Sandwich for: " + people[i]);
}
For in loop
We also have a for in loop. This is useful for iterating over gappy arrays with non-contiguous keys:
a = [];
a[0] = "Mikey";
a[12] = "Davey"
a[99] = "Stuey"
for (i in a) {
alert(a[i]);
}
forEach functional style loop
We can also iterate using a functional style loop. A functional loop leaves the iteration implementation up to the object itself. We pass a function to tha array, then the array calls this function for each element. In classical languages we sometimes refer to this as an iterator pattern.
[
'Mikey',
'Stuey'
'Davey'
].forEach(function(el,i){
console.log(el);
});
Exercise - Lunar Countdown
Simple one here. Use the alert function to alert the numbers from 10 down to zero.
When you reach zero, alert "Blast Off!"
Remember to lint your code.
Iterate with a for loop
Assume I have an array of products in my shop, like this:
products = ['Cats', 'Cheese', 'Spanners', 'Lemons', 'Candyfloss'];
Use a for loop to iterate over this and console.log the products.
Extension - Use a functional loop
Repeat the above exercise, but use a functional loop.
Pizza Exercise
Create an array of pizza toppings, like this:
var toppings = ['Cheese', 'Ham', 'Bits', 'Tomatoes'];
Now write a function that we can call like this:
makePizza(toppings);
This function should return a string of the form:
"A tasty pizza with Cheese and Ham and Bits and Tomatoes"
You will find the join function is very helpful here
Harder Exercise - Capitalise every element
Write a short function to capitalise every element of the array.
You must use the Array#map function and the String#uppercase function.