README.md

#Javascript Arrays, Loops, Iterating

##Learning Objectives

• Describe why arrays are useful and how to use them effectively in JavaScript
• Describe the difference between “for” Loops, “for..in” Loops, and “forEach”
• create while loops and for loops
• iterate through arrays

###Arrays What is an Array

• A container for data, similar to a list. You could think about it like a pill box.
• An array is a data structure
• Each item in an array is called an element.
• Arrays can hold all kinds of different data types: strings, integers, objects, functions, even other arrays!

What types of arrays did we see in the prework?

Theres two ways to create an array right, one that you all have seen before and one that relatively rare, but I still want you to be able to understand

// rare syntax
var superheroes = new Array("Batman", "Swamp Thing", "Spawn", "Captain Marvel");

// what we're going to be using

var superheroes = ["Batman", "Swamp Thing", "Spawn", "Captain Marvel"];

So we know how to create an array, the most important thing we're going to be using them for is to access the elements inside of them.

What would I need to type to access the element "Batman" in my superheroes array?
superheroes[0] right?

How could I access "Spawn"?

Let's do a quick minilab

I want you all to break up into groups and create an array of your favorite sports teams and test out some different methods on that array, I'll call on your group after 5 minutes and ask you to explain what one of these methods do, and an example of why you might want to use it.

• Array.length (this is actually a property, not a method)
• Array.pop()
• Array.push()
• Array.reverse()
• Array.shift()
• Array.sort()
• Array.unshift()

###Loops What is a loop

So far we've used two different loops in Javscript right? What are they?

• While
• For

###While Loops

Let's start with a while loop and then move onto for loops later.

Whats the two parts of a while loop:

• A condition that it checks
• Something that it does

I want you all to walk me through creating a while loop that will console.log every number from 1-9

As an exercise I want you all to put this into practice

• Create an array of vergetables
• loop through those vegetables and use document.write() to print it on a webpage

####For Loops While loops are similar to for loops but they take care of the assignment, the ending condition and the incrementation/decrementation all in one step.

for(assignment; end condition; increment/decrement){
    //LOOP ACTION HERE
}

• THE ASSIGNMENT sets a variable before the loop begins
• THE END CONDITION defines the condition for the loop to run
• INCREMENTS/DECREMENTS executes after each completed loop

While Loops are similar to For Loops, but with ASSIGNMENT & END CONDITION left out

lets loop through an array of people and console.log both the index and the element

I want you all to pair up now and describe what is happening in this loop to each other

Lets create another one but have it log in reverse.

We will have to subtract 1 from Array.length in our assignment.

What will our new end condition be?

What about our increment condition?

  var numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];

Create a loop that loops through this array from end to start but jumps by two each time!

Why don't we convert our veggies loop that we wrote at the start and convert it to a for loop!

Avoiding Infinite Loops

Loops operate based on conditional statements, running as long as the condition it is checking against is true. Take care not to write a condition that will always evaluate to true, otherwise you will create an infinite loop that will crash your browser (and maybe your whole computer!!!).

###Looping through Arrays of Objects As a challenge here I want you guys to figure out how to loop through this array of movies and output whether or not that movie sucks or rocks based on whether the movie rating is greater than 8 or not. Heres the array:

var movies = [
  {name: "Goonies", rating: 10},
  {name: "Spice World", rating: 9},
  {name: "Titanic", rating: 5},
  {name: "Pluto Nash", rating: 3}
];

We're going to expand on this and create two new functions getNumGoodMovies and another, getNumBadmovies. To figure out how to do this we're going to use a function that I'm going to give to you all:

function assertEquals(actual, expected) {
  if(actual == expected) {
    console.log("Test passed");
  } else {
    console.log("Expected: " + expected + " and instead received: " + actual);
  }
}

This function introduces the concept of testing!

Lets try it out with a simple example assertEquals(true, false)

Play around with it in your console until you get a good idea of how it works.

What did you guys try as arguments in this function?

We could pass anything any argument into this function right?

What does this line say to you all? Take your time and try to decode what this is telling you about our two functions getNumFreshMovies and getNumRottenMovies

assertEquals(getNumFreshMovies(),2);
assertEquals(getNumRottenMovies(),1);

###Resources https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array