Arrays

Back

Learning Goals

  • Use JavaScript syntax to declare variables that store Arrays in JavaScript
  • Use basic Array methods to manipulate data in Arrays

Vocabulary

  • Array
  • bracket notation
  • element
  • index position
  • method
  • square brackets []

Arrays

Let’s consider a list of students in a class, using the programming tools we’ve learned thus far:

var student1 = "Josiah";
var student2 = "Cindy";
var student3 = "Violet";
var student4 = "Jhun";
// on and on.

As the list of students inevitably changes and grows, this is difficult to maintain programmatically. If we wanted to send an email to every student or perform any other task for every student, we would have to write code for each, individual student, which defeats the purpose of having a computer program automate tasks.

An Array is a JavaScript Data Type that allows us to store multiple pieces of data in one variable. They can be compared to lists. The Array is an incredibly powerful and necessary Data Type for building web applications.

Thinking back to the Populi platform that helped you enroll at Turing, many Arrays are used to power its functionality:

  • student roster - list of all names in a given cohort
  • course catalog - list of all courses we offer

Notice that in the previous examples, the items in a given list are all of the same type.

Array Syntax

  • An Array is declared with the square brackets (they can be typed with the keys to the right of the p character on your keyboard).
  • Each piece of data in an Array is referred to as an element.
  • Elements should be separated with a comma and space.
  • An Array can hold any number of elements.
var students = ["Cindy", "Josiah", "Rigo"];

To describe what the previous line of code does, one might say, “The students variable stores an Array of Strings. This array has 3 elements.”


Talking and Writing about Code

In your notebook, write down the code that follows, then write a sentence that describes what that line of code does:

var ticket_prices = [87, 67, 99, 90, 87];


Best Practices for Arrays

  • The name of a variable that stores an Array should usually be plural to indicate that it has the potential to hold many elements of that type.
  • While JavaScript technically allows an Array to hold multiple Data Types, it is not best practice and in any real-world application, will usually be unhelpful anyways.


Accessing Elements

To access one element from an array, bracket notation and a number that corresponds with that element should be used. As weird as it may seem, counting starts with 0 in most programming languages. That number is referred to as an index position.

Through reading the code snippet in the embdedd replit that follows, one can infer that the first element is in index position 0, and counting increments by 1. (Click the green “Run” button to see the output in the Console at the bottom of the embdedded replit.)

Storing Arrays, Accessing Elements: Part 1

Given the following array, answer each question. Notice the way technical vocabulary is used to describe these things, and use this as a guide to practice articulating your responses, and how you talk about Arrays in the future.

var ticketPrices = [87, 67, 99, 90, 87];

  • How many elements are in this Array?
  • What is the index position of the Integer 99?
  • What is the value of the element in index position 3?
  • What is the value of the element in index position 0?
  • What is the index position of the last element in this Array?


Storing Arrays, Accessing Elements: Part 2

Complete the following work in an replit:

  • Declare a variable named friends that stores an Array of 5 Strings, each a friend's name.
  • Access the third element.
  • Access the last element.
  • Access the first element.


Array Methods

In most cases, a developer want to modify data in an Array at one point or another. Today, we will learn a number of ways to do that. They will probably not satisfy your every question of “How does X app do Y?” but this will lay an important foundation for the concept of Array methods, and some strategies to get that information you are craving!

An Array method is a piece of functionality that is built into the JavaScript language, intended to be used on Arrays specifically. Each method has a specific job to perform; we can use it if we want, but we can’t modify a built-in method. There are many Array methods - like anything else in programming, you will memorize a handful that you regularly use, then look to documentation for those you don’t use as regularly.

Array Methods Syntax

To use an Array method in JavaScript, we first must tell JavaScript which Array we want to perform the method on. After that, a dot or period, followed by the name of the method, then opening and closing parentheses.

var students = ["Cindy", "Josiah", "Rigo"];
students.pop();

console.log(students);

To describe what the previous line of code does, one might say, “This line of code calls the pop method on the students Array.”


Learning From Reading Code You Don’t Know

As a developer, an important skillset is researching and reading documentation (and to note, in many cases, documentation is not always current, rarely perfect, and usually quite dense).

Since researching and reading documentation can sometimes be time-consuming, another skill is to be able to make the decision about when it’s time to go to Google. In this activity, you will be provided with some structure to teach yourself a few technical concepts. The main goal is not to learn the technical concepts, it’s to practice and explore strategies to learn in an environment such as this, and how to make the decision about what to do when you need to learn something.

Array Methods & Learning Strategies:

You've seen the syntax for the pop method but its utility was not explained. Before going down a potential rabbit hole in Google, open up a replit or a new file in Atom. Declare an Array with 3 elements. Use the pop method with the syntax you learned earlier. Call the Array and observe the change that has been made since you initially declared it. Go through this process again, with the same Array. What can you infer the pop method does? Check Google (remember, MDN has the most reliable documentation) to confirm your inference. Write this down!

Your next task is to learn what the push, shift and unshift Array methods do. Consider - how easy or hard did the work you did for pop feel? Do you want to follow the same steps to learn about the other methods, or go straight to documentation to learn about the other 3? Act on whatever you decide, and be sure to write down your learnings about these methods.


Talking and Writing about Code

In your notebook, write down the code that follows, then write a sentence that describes what that line of code does:

var ticketPrices = [87, 67, 99, 90, 87];

ticketPrices.slice(1, 3)

Hint: Just by looking at this code, it's unlikely you know what it does. What can you do to explore, learn, and confirm what it does?

Check For Understanding

Create a new project (aka directory) and initialize a Git repository in it. Make 1 file - arrays.js, and make an initial commit. In that file:

  • Declare a variable that stores an Array of at least 4 Strings.
  • Declare a variable that stores an Array of at least 4 Numbers.
  • Declare a variable that stores an Array of at least 4 Booleans.
  • Commit your work.
  • Call a different Array method on each of the 3 arrays you created above. On the line of code above each method call, write (in a JavaScript comment) an explanation in plain English as to what impact calling that method will have on that specific array.
  • Commit your work.
  • [Intentionally open-ended] Demonstrate your understanding of index positions in this file. You can write an explanation, provide some examples with the Arrays you’ve created, or anything else.
  • Commit your work.

Create another file in the same directory, name it self-evaluation.md. In Markdown, answer the following questions:

  • How confident do you feel with the content on Arrays so far?
  • Is there any additional learning you need or want to do before moving to the next lesson?
  • What questions do you have about Arrays?
  • Commit your work.

After you’ve completed the tasks above, push your work up to a new GitHub repository. Provide the GitHub repository link in the submission form.





Back