Skip to content

Instantly share code, notes, and snippets.

@RobAWilkinson
Created March 18, 2015 18:28
Show Gist options
  • Save RobAWilkinson/340ca7911ff1209f4039 to your computer and use it in GitHub Desktop.
Save RobAWilkinson/340ca7911ff1209f4039 to your computer and use it in GitHub Desktop.

#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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment