Project Falcon

Arrays and Objects

JS Collections

What Are They?

Arrays allow us to store multiple elements in a single variable. This could be items on a menu, lottery numbers, or the birds in your menagerie.

You can think of an array as a sequence of cups. Each of these "cups" in an array holds a value, which we call an element. We reference a specific element using its zero-based index.

Declaring an Array

When we declare an array in JavaScript, we are declaring a single variable that holds multiple elements.

To create an array destined to hold the values of our cups from the previous example, we would do this:

const cupValues = new Array(5);

This creates an array whose name is cupValues. It has five elements.

Assigning Values

We use array indices (that's the plural of index) to assign values to elements. This is how we'd declare our array and assign element values:

const cupValues = new Array(5);
cupValues[0] = 42;
cupValues[1] = 86;
cupValues[2] = 23;
cupValues[3] = 8;
cupValues[4] = 91;

Retrieving Values

To retrieve values, we use a syntax like we used to assign values:

console.log(cupValues[0]); // prints "42"
console.log(cupValues[1]); // prints "86"
console.log(cupValues[2]); // prints "23"
console.log(cupValues[3]); // prints "8"
console.log(cupValues[4]); // prints "91"

How Big Is It?

Often, it's important to know the size of an array. How many cups do I have?

To do this, we use the length property, like so (notice that dot operator):

let cupValues = new Array(5);
const numberOfCups = cupValues.length;
Console.log(numberOfCups); // prints "5"

cupValues = new Array(2);
Console.log(cupValues.length); // prints "2"

Revenge of the Square Brackets

We can also initialize an array with values. We do this using square brackets to surround a comma-delimited list of values, like so:

const giantWords = ['fee', 'fie', 'foe', 'fum'];

Note that we also do not include the size of the array. JavaScript figures this out based on the number of values we provide.

WAT?

This creates a String array with these values:

| index | value | reference | | ----- | ----- | --------------- | | 0 | "fee" | giantWords[0] | | 1 | "fie" | giantWords[1] | | 2 | "foe" | giantWords[2] | | 3 | "fum" | giantWords[3] |

There's more than one way...

When we do this:

const giantWords = ['fee', 'fie', 'foe', 'fum'];

It is equivalent to doing this:

const giantWords = new Array[4]();
giantWords[0] = 'fee';
giantWords[1] = 'fie';
giantWords[2] = 'foe';
giantWords[3] = 'fum';

We can also do this:

const cupValues = [];

We can initialize an array with this syntax, and use it to later assign it new values.

Let's Do It Together

If we needed to create a class roster, would an array be appropriate? How would we go about it?

Now You Do It!

  • For each of the following, create an array, assign its values, then print out those values:
    • The names of three people you know.
    • The GPAs on a 4.0 scale of five students.
  • Create an array of your top four vacation spots, then print the top (first) spot and the bottom (last spot).
  • Create a String that holds your last name. Print out the number of letters in your name.

And then and then and then...

There are some useful methods which return arrays.

Splitting Strings

split is one of them. It allows us to split a string into an array of strings. It accepts one argument, which is the delimiter it should use to split the string:

const source = 'this, that, the other';
const elements = source.split(', ');

console.log(elements[0]); // prints "this"
console.log(elements[1]); // prints "that"
console.log(elements[2]); // prints "the other

What is the value of elements.length?

Looking at characters

We have talked about strings as sequences of characters. Using the same tool, we can treat them that way. using the split method, and not giving it any parameters, it returns an array of chars:

    string myName = "Sue";
    const letters = myName.split();

    console.log("The first letter of my name is " + letters[0]);

A related method is indexof, which returns the first index at which a given element can be found in the array:

const myName = 'Sue';
const letters = myName.split();
console.log(letters.indexOf('S')); //prints "0"
console.log(letters.indexOf('e')); //prints "2"

A Little Wonky

Before teaching a bootcamp, I... uhhh... I mean a friend of mine often had to look up the syntax for arrays because they're not really like other things in JavaScript.

Arrays are objects, but they don't conform to all the rules of other objects. They are special snowflakes.

Some differences to be aware of:

  • We create them using the new operator(but not always).
  • Their values can be initialized with a creative (confusing) use of square brackets.
  • We use square brackets to both declare arrays and to access element values, something we won't see elsewhere.

Work It

  • Create an array holding the names of four of your peers sitting next to you. Print the first letter of each of their names.
    • Change your code (or create more code) that asks you to enter each of their names via the console.
  • Create a console application that asks you to enter a word and then a letter. Print out either "Yep, it's got one of those" or "So, sorry", depending on whether the word contains that letter.
  • Create a string representing a list of things that uses some delimiter (commas, dashes, etc). Split that string into an array of strings, then print one or more of these array elements.