Arrays

Essential Question: How can I create a list or array in JavaScript?

Mastery Objectives:

• SWBAT create arrays in JavaScript.

• SWBAT index arrays in JavaScript and recall indexed items.

Do Now: Create an array of a New Year's Resolution. 

Assignment 1: Declare a variable using const named hobbies and set it equal to an array with three strings inside of it. 

Use console.log() to print hobbies to the console. 

Arrays have indexes that indicate the position of each item in the array. Javascript uses zero-indexing which means they start with the number zero. You can also index strings. For example, 

const hello = 'Hello World';

console.log(hello[8]);

// Output: r 

Assignment 2: 

const famousSayings = ['Fortune favors the brave.', 'A joke is a very serious thing.', 'Where there is love there is life.'];

Individual elements in arrays can also be stored to variables.

Create a variable named listItem and set it equal to the first item in the famousSayings array using square bracket notation ([]).

Then use console.log() to print the listItem variable to the console.

Now, console.log() the third element in the famousSayings array using bracket notation to access the element.

Do not save the element to a new variable before you log it.

But what happens if you try to access an index that is beyond the last element?

Try to log the item at index [3] of famousSayings to the console. What is logged to the console?

Assignment 3:

let groceryList = ['bread', 'tomatoes', 'milk'];

Change the second element of the array groceryList to 'avocados'. 

Assignment 4:

let condiments = ['Ketchup', 'Mustard', 'Soy Sauce', 'Sriracha'];

const utensils = ['Fork', 'Knife', 'Chopsticks', 'Spork'];

Below the two existing arrays, re-assign the element in index 0 of condiments to 'Mayo'.

Log the updated array, condiments, to the console.

Below your code from Step 1, reassign condiments to be a new array that contains a single string ['Mayo']

Log the result to the console.

Notice that you can re-assign elements in an array and re-assign an entire new array to a variable declared using the let keyword.

Below your code from Step 2, re-assign the last item from the utensils array to 'Spoon'.

Log the updated array to the console.

Assignment 5: 

const newYearsResolutions = ['Keep a journal', 'Take a falconry class'];

console.log(newYearsResolutions.length); 

const objectives = ['Learn a new languages', 'Read 52 books', 'Run a marathon'];

 Find the length of the objectives array and log it to the console. 

Assignment 6:

const chores = ['wash dishes', 'do laundry', 'take out trash'];

Add two elements to the chores array using .push(). 

Use console.log to print your chores array to make sure your items were added. 

Assignment 7:

Add two items to the chores array.

Use console.log to display the chores array.

Use the pop() method to remove the last item.

Use console.log to display the chores array.

Mutating - Changes the array permanently

Non-mutating - means that the function does not change the array permanently

Assignment 8: 

const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];

Use the .shift() method to remove the first item from the array groceryList.

Log the new groceryList to the console.

Use the documentation for arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array to try out two more functions for arrays - in the comments, describe what the functions do.

Under the code added in step 1, use the .unshift() method to add 'popcorn' to the beginning of your grocery list.

After calling .unshift() on groceryList, log groceryList to the console.

You’re in a hurry so you decide to ask a friend to help you with your grocery shopping. You want him to pick up the 'bananas', 'coffee beans', and 'brown rice'. console.log(groceryList.slice(1,4));

Under the code you added for step 2, use .slice() to provide your friend with a list of these three things.

Log this part of the list to the console. Unlike the two previous checkpoints, you should do both of these steps in one line.

After calling .slice() on groceryList, log the grocery list to the console one more time.

• Let’s find the index of a particular element in groceryList using .indexOf().

Call .indexOf() on groceryList to find the index of the element 'pasta' and save the returned value to a const variable named pastaIndex.

Then log pastaIndex to the console. 

Assignment 9: 

there is an array concept. There is also a function changeArr that will assign the element in index 3 of an array to 'MUTATED'. The function changeArr was called with an argument of concept.

Underneath the function call, log concept to the console to check if this reassignment mutated the array.

Let’s mutate an array using a built-in method inside a function.

Under the console.log() statement, define another function named removeElement that takes a parameter of newArr. Inside the function body call .pop() on newArr.

Call removeElement() with an argument of concept. 

After calling removeElement(concept), check the value of concept by logging it to console. 

Nested Arrays

Arrays that are inside another array are called 'Nested Arrays'

Assignment 10: 

Create a variable colorList. Assign as its value an array with three array elements.

• The first array element should hold the elements 'red' and 'blue' in that order.

• The second array element should hold the elements 'green' and 'pink' in that order.

• The third array element should hold the elements 'purple' and 'yellow' in that order.

Now declare a variable named colorSet using the const keyword and assign to access the element 'yellow' inside colorList