Arrays

Objectives!

Explain what an array is
Create and read and delete values in an array
Utilize array methods to update values in an array
Describe how to compare array values
Explain mutability of reference data types in JavaScript

What are some examples of things we store in lists?

Would it be helpful to store lists to variables?

What is an Array?

An array is an ordered lists of values

Anatomy of an Array

   var arr = [];

arr is the name of the variable.

"array" is a keyword.

var stands for?

[ ] are the array literal.

Bonus: Is [ ] truthy or falsy?

Creating an Array

   var arr = [];

Yes. It's that simple.

   var arr = new Array();

Alternate: FYI

What can an Array contain?

Strings
Numbers
Booleans
More arrays
Objects

Teach me how to create an array.

Create your own Array.

Make an Array that contains the following:

Your first name in a String
Your age as a Number
Answer the question, "Do you like ice cream?" with a Boolean.

Create your own Array.

Make an Array that contains 3 more arrays.

var matrix = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
];

Accessing Values in Arrays

Values are accessed by their index.

An index is the value's position in the array.

⬜️ What number does an array's index begin at?

var books = ["Harry Potter", 
             "Wheel of Time", 
             "Lord of the Rings"
            ];

books[0] 

// "Harry Potter"

Accessing Values in Arrays

Bracket notation is how you access particular values in an array.

var movies = ["Iron Man", "Titanic", "Up"];

⬜️ Write proper notation to access "Up"

Deleting Values in Arrays

"delete" is the keyword to delete a value from an array. You use bracket notation to point to which value you wish to delete

var movies = ["Iron Man", "Titanic", "Up"];

delete movies[1];

console.log(movies[1]);

⬜️ What will be returned?

Array Properties & Methods

var movies = ["Iron Man", "Titanic", "Up"];

Arrays have length!

movies.length
// 3

.indexOf() method behaves like a search and returns that the index of the item in parentheses

movies.indexOf("Titanic");
// 1

Array Properties & Methods

Methods Overview + Exercises

Comparing Arrays

[] == [] // false
[] === [] // false

Can you compare arrays using "==" or "==="?

You must compare values IN the array, not the arrays themselves.

Comparing Arrays

They have the same preferred name so they're the same right?

Mutability of Reference Types

liable for change or alteration

Mutability of Reference Types

var a = [1,2,3];

var b = a;

console.log(b);
// [1,2,3]

a[0] = 44;

console.log(b);
// ?

Review

🖐 What is an array?

Review

⬜️ What is the syntax of an array?

Review

🖐 What is an index?

Review

⬜️ How would you access "orange"?

var colors = ["blue", "orange", "pink", "yellow"];

Review

⬜️ How would you access "black"?

var colors = [
    ["blue", "orange", "pink", "yellow"], 
    ["purple", "red", "white"],
    ["black", "green", "indigo"]
];

Review

🖐 What happens when you use the keyword delete for an array value?

Review

.length

.pop()

.push()

.indexOf()

.shift()

.unshift()

.splice()

.slice()

.sort()

.reverse()

.join()

.concat()

Review

🖐What is a destructive method?

Review

🖐Can you compare arrays? Why?

Review

🖐What does mutable mean?