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

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?

arrays

By Valerie Kraucunas

Made with Slides.com

arrays

  • 631

More from Valerie Kraucunas