07 CARDS

What we need to learn: 

 

• Arrays 6

• Logical operators 3-8 + Comparision Operators 3-5, 6

• Loops (for) 7

• Libraries 1 (Math)

 

A foundational concept of programming is how to organize and store data.

One way we organize data in real life is to make lists. Let’s make one here:

New Year’s Resolutions:

1. Rappel into a cave

2. Take a falconry class

3. Learn to juggle

Let’s now write this list in JavaScript, as an array:

let newYearsResolutions = [‘Rappel into a cave’, ‘Take a falconry class’, ‘Learn to juggle’];

Arrays are JavaScript’s way of making lists. These lists can store any data types (including strings, numbers, and booleans) and they are ordered, meaning each item has a numbered position.

 

Property Access

Each item in an array has a numbered position. We can access individual items using their numbers, just like we would in an ordinary list.

Something important to note is that JavaScript starts counting from 0 rather than 1, so the first item in an array will be at position 0. This is because JavaScript is zero-indexed.

We can select the first item in an array like this:

let newYearsResolutions = [‘Rappel into a cave’, ‘Take a falconry class’, ‘Learn to juggle’];

console.log(newYearsResolutions[0]);

// Output: ‘Rappel into a cave’

You can also access individual characters in a string. For instance, you can write:

let hello = ‘Hello World’;

console.log(hello[6]);

// Output: W

W will be the output since it’s the character in the 6th position. This works because JavaScript stores strings in a similar way that it stores arrays.

 

Update Elements

In the previous exercise, you learned how to access elements of an array or a string using their index number. You can also change elements of an array using their indices.

let seasons = [“Winter”, “Spring”, “Summer”, “Fall”];

seasons[3] = “Autumn”;

console.log(seasons) 

//Output: 

//Winter 

//Spring

//Summer

//Autumn

In the example above, the seasons array contained the names of the four seasons.

However, we decided that we preferred to say “Autumn” instead of “Fall”.

seasons[3] = “Autumn”; tells our program to change the item at index 3 of the seasons array to be “Autumn” instead of what is already there.

 

length property

We may wish to know how many items are stored inside of an array.

We can find this out by using one of an array’s built-in properties, called length. We can attach this to any variable holding an array and it will return the number of items inside.

let newYearsResolutions = [‘Rappel into a cave’, ‘Take a falconry class’];

console.log(newYearsResolutions.length);

// Output: 2

In the example above, we log newYearsResolutions.length to the console. This code retrieves the length property of the newYearsResolutions array and logs it to the console. This array has two items, so 2 would be logged to the console.

 

push Method

JavaScript has built in methods for arrays that help us do common tasks. Let’s learn some of them.

First, .push() allows us to add items to the end of an array. Here is an example of how this is used:

 

let newYearsResolutions = [‘item 0’, ‘item 1’, ‘item 2’];

newYearsResolutions.push(‘item 3’, ‘item 4’);

 

The method .push() would make the newYearsResolutions array look like:

 

[‘item 0’, ‘item 1’, ‘item 2’, ‘item 3’, ‘item 4’];

 

How does .push() work?

• It connects to newYearsResolutions with a period. 
• Then we call it like a function. That’s because .push() is a function and one that JavaScript allows us to use right on an array. 

Another array method, .pop(), is similar to .push(). This method removes the last item of an array.

 

let newYearsResolutions = [‘item 0’, ‘item 1’, ‘item 2’];

 

newYearsResolutions.pop();

 

console.log(newYearsResolutions); 

// Output: [ ‘item 0’, ‘item 1’ ]

 

 

In the example above, calling .pop() on the newYearsResolutions array removed item 2 from the end.

 

 Loops

One of a computer’s greatest abilities is to repeat a task multiple times. Loops let us tell the computer to loop over a block of code so that we don’t have to write out the same process over and over.

Loops are especially useful when we have an array where we’d like to do something to each of its items, like logging each item to the console.

There are two kinds of loops we will learn in this lesson:

• • for loops, which let us loop a block of code a known amount of times. 
  • while loops, which let us loop a block of code an unknown amount of times.

Let’s say that you and a friend would like to go on vacation together. You’ve both made arrays of your favorite places and you want to compare to see if any of them match. This is a job for loops!

The big idea is that we can run a for loop inside another for loop to compare the items in two arrays.

Every time the outer for loop runs once, the inner for loop will run completely.

These are called nested for loops and we can use them to check to see if any of your vacation spots match your friend’s spots.

See the example below for proper formatting of nested for loops.

 

for (let i = 0; i < myArray.length; i++) {

  for (let j = 0; j < yourArray.length; j++) {

    //Code To Run

   }

 }

Note that in the example above, we used i and j as the iterator variables to make the structure of the code easier to see, but it is a better practice to use descriptive variable names.

 

 while Loops

Awesome job! for loops are great, but they have a limitation: you have to know how many times you want the loop to run. What if you want a loop to execute an unknown or variable number of times instead?

For example, if we have a deck of cards and we want to flip cards (loop a card flipping function) until we get a Spade, how could we write that in JavaScript?

That’s the purpose of the while loop. It looks similar to a for loop. See the example below.

 

while (condition) {

  // code block that loops until condition is false

} 

 

• • The loop begins with the keyword while.
  • Inside the parentheses, we write a condition. As long as the condition evaluates to true, the block of code will loop.
  • Inside the code block, we can write any code we’d like to loop.

Loops are a useful tool for improving the functionality of our programs. However, loops can also cause us problems if we aren’t careful.

Both for loops and while loops need explicit instructions on when to terminate. Infinite loops are more common in while loops because they don’t have an iterator built into their syntax. When writing a while loop, be sure to write the code that will guarantee the condition will eventually be met.

for loops require a start condition, a stop condition, and an iterator. The iterator should bring the loop from the start condition to the stop condition.

 

for (let i = 0; i < array.length; i–) {

   //some code

}

 

• • The loop begins with i = 0.
  • After one iteration through the loop, i is equal to -1. This is because i begins at 0 and 1 is subtracted from i each loop.

Do you see the problem? i is decreasing each time. It will never equal the length of the array. This code will execute forever.

for (let i = 0; i < array.length; i++) {

   //some code

}

 

We changed the iterator to i++ which means i will eventually equal the length of the array. We have eliminated the infinite loop!

Note: While completing this exercise, you may run into an infinite loop if you do not find the correct answer. If that happens, you may need to refresh the page.