WDD 131: Dynamic Web Fundamentals

W03 Learning Activity: JavaScript Arrays

Overview

An array is a data structure that stores multiple values in a single variable instead of declaring separate variables for each value.

Prepare

In JavaScript, arrays can be declared like this:

let scores = [100, 72, 83, 94, 88, 87];
let names = ['Nancy','Blessing','Jorge','Svetlana'];

Arrays are zero-indexed, meaning the first element is at index 0, the second element is at index 1, and so on.

Arrays can be accessed by an index reference:

let aScore = scores[0];  // The aScore variable is assigned the value of 100

Array values can be modified:

scores[0] = 99; // This assignment expression changed the first score in the array from 100 to 99.

Arrays can be iterated over using a classic for loop:

for (let i = 0; i < scores.length; i++) {
  console.log(scores[i]);
}

Preferred: Arrays can also be iterated using other looping structures, such as forEach: 

scores.forEach(function(score) {
  console.log(score);
});

Arrays have a length property:

let numScores = scores.length; // The numScores variable is assigned the value of 6

Array Methods

Arrays have several methods that can manipulate (change) them:

scores.push(100); // Adds a new element to the end of the array
scores.pop(); // Removes the last element from the array
scores.shift(); // Removes the first element from the array
scores.unshift(100); // Adds a new element to the beginning of the array
scores.slice(2,3); // Returns a shallow copy from the start index up to, but not including, the end index
scores.splice(2, 1); // Removes 1 element from the array starting at index 2
scores.join(', '); // Transforms the array into a single string using a comma and space as the delimiter

Check Your Understanding

Given this array declaration:

let names = ['Nancy','Blessing','Jorge','Svetlana'];

Optional Resources