Arrays

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 which represent the names of students. This array has 3 elements.”

Accessing Elements

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

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.)

Practice

Create a new project (aka directory). Make 1 file - arrays.js. 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.
• [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.

Check For Understanding

Please create a section in your Mod 0 Gist for Arrays and record your answers to these questions. (Including the question is very helpful!)

• 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?

Extension

The work below is meant as optional work to be completed and explored outside of the live Mod 0 sessions. This work is encouraged, but not required.

Array Methods

A t one point or another, a developer will need to modify data in an Array. 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.