CS133JS Beginning Programming: JavaScript

Arrays: Array Methods

Table of Contents

Introduction

Announcements

Registration is open. These are the spring term classes reccomended for Software Dev majors:

• CS 233JS Intermediate JavaScript

• WR 227 Technical Writing

• CS 161N Computer Science 1: C# (.NET)

• CS 235IM Mobile App Development with JavaScript

Q and A

• Lab 5: Have you started it? Any questions?

• Does anyone have any questions about anything?

What's Due this Week

• Term project proposal: Thursday

• Reading quiz: Thursday

• Lab 5 beta version: Sunday

Review

Array Declaration and Initialization

xxxxxxxxxx
const myArray = [];  // Declaration

xxxxxxxxxx
const starWars = ["Rey", "Finn", "Han Solo"];  // Declaration and Initialization

Array Operations

xxxxxxxxxx
console.log(starWars[0]);  // Getting a value

xxxxxxxxxx
starWars[1] = "Poe";    // Setting a value

xxxxxxxxxx
console.log(starWars.length);   // Getting the array length

xxxxxxxxxx
starWars[starWars.length] = "Yoda";   // Adding a new element and value

Arrays are not copied by the assignment operator. Only a reference is copied.

xxxxxxxxxx
starWarsAgain = starWars;  // starWarsAgain is like an alias for starWars

Arrays and Loops

The for loop is especially suited to working with arrays and the for...of loop is only used with arrays.

for loop

xxxxxxxxxx
for (let i = 0; i < starWars.length; i++)
{
   console.log(starWars[i]);    // The loop counter is used to index the array
}

for...of loop

xxxxxxxxxx
for (let character of starWars) {
   console.log(character);             // No array index is needed
}

2D Arrays

Arrays can contain other arrays (nested arrays).

xxxxxxxxxx
// Declare a 2D array with three nested arrays
const myArray = [
  [], [], []
];

xxxxxxxxxx
// Initialize a 3 X 3 array
const grid = [ [" ", " ", " "], [" ", " ", " "], [" ", " ", " "]];

// Put an X in the top-left, then center, then bottom-right squares
grid[0][0] = "X";
grid[1][1] = "X";
grid[2][2] = "X";

Array Methods (and a Property)

Get Array Information

In the examples below, assume we have defined the array continents as shown below.

xxxxxxxxxx
const continents = ["Asia", "Africa", "North America", "South America", "Antarctica", "Europe", "Australia"];

length

A property that contains the length of an array.

xxxxxxxxxx
console.log(continents.length);

Use this property when you don't know how many elements are in an array, but need to do some operation that requires knowing that.

Example, swapping values in an array

xxxxxxxxxx
// Exchange the value stored at the end of the array with the one stored at the beginning. (Move Asia to the end of the array and Austrailia to the beginning).
const firstValue = continents[0];
const lastIndex = continents.length -1;
const lastValue = continents[lastIndex];
continents[0] = lastValue;
continents[lastIndex] = firstValue;

The continents array is shown as a table below with the operations that swap the values in the first and last elements shown to the right of the array.

indexOf(...)

A method that returns the index of the element containing a specified value. If the value isn't found, indexOf will return -1.

xxxxxxxxxx
// This will print 4 to the console
console.log(continents.indexOf("Antarctica"));

Use this method when you need to do an operation on a specific element of the array, but only know the value stored in the element and not the index of the element. For example:

xxxxxxxxxx
// Change the name of South America to américa del Sur
const index = continents.indexOf("South America");
continents[index] = "américa del Sur";

Modify Array Elements

splice(...)

The splice() method can be used to insert, remove, or replace elements anywhere in an array. It returns the removed elements.

• Insertion: When a new element is inserted, all the elements at higher numbered indices are shifted even higher and the array grows.

• Removal: When an element is removed, the elements at higher indices are shifted to lower indices and the array shrinks.

• Replacement: When an element is replaced it is essentially the same as assigning a new value to the element and the array stays the same size.

Syntax

array.splice(index, numberToDelete, newValue1, ....., newValueN)

Examples

xxxxxxxxxx
continents.splice(3, 0, "Atlantis"); // Insert Atlantis at index 3
continents.splice(3, 1);   // remove Atlantis
continents.splice(2, 2, "Americas"); // Remove N. and S. America, replace with Americas

concat(...)

Join two arrays.

xxxxxxxxxx
const tooks = ["Merry", "Pippin"];
const bagginses = ["Bilbo", "Frodo"];
const hobbits = tooks.concat(bagginses);

Copy an array. This kind of copy is called a deep copy. because it copies all the elements in the array instead of just copying references.

xxxxxxxxxx
const hobbitsCopy = [].concat(hobbits);

Remove Array Elements

pop()

Removes the last element from an array and returns it.

xxxxxxxxxx
const continent = continents.pop(); // removes Austrailia

shift()

Removes the first element from an array and returns it.

xxxxxxxxxx
const continent = continents.shift(); // removes the first element, Asia

Add Array Elements

push(...)

Adds an element to the end of an array and returns the length of the new array.

xxxxxxxxxx
const arrayLength = continents.push("Austrailia"); // adds Austrailia at index = length

unshift(...)

Adds an element to the beginning of an array and returns the length of the new array.

xxxxxxxxxx
const arrayLength = continents.unshift("Asia"); // adds Asia at index 0

Reference

JavaScript Array Reference on W3Schools

JavaScript Reference: Array on MDN

Beginning JavaScript Lecture Notes by Brian Bird 2018, revised 2024 are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.