Arrays

A single tour has a name, a price, and an availability flag. But the STO site has multiple tours. When you need to work with a collection of related values, you use an array.

What an array is

An array is an ordered list of values. You can store any number of items and access them by their position.

const tourNames = ['Cascade Ridge Hike', 'Summit Loop Trek', 'Valley Floor Walk', 'Desert Canyon Tour'];

This is an array literal: square brackets containing comma-separated values. Each value is called an element.

Zero-based indexing

Elements are numbered starting at zero. The first element is at index 0, the second at index 1, and so on:

console.log(tourNames[0]);  // 'Cascade Ridge Hike'
console.log(tourNames[1]);  // 'Summit Loop Trek'
console.log(tourNames[3]);  // 'Desert Canyon Tour'
console.log(tourNames[4]);  // undefined — no element at index 4

.length

The .length property returns the number of elements:

console.log(tourNames.length);  // 4

To access the last element regardless of array size:

console.log(tourNames[tourNames.length - 1]);  // 'Desert Canyon Tour'

Modifying elements

You can assign a new value to any index:

tourNames[2] = 'Meadow Valley Walk';
console.log(tourNames[2]);  // 'Meadow Valley Walk'

Note: declaring an array with const does not prevent modifying its contents — it only prevents reassigning the variable to a completely different array. The elements inside are still mutable.

Common array methods

.push()

Add one or more elements to the end of the array:

tourNames.push('Ridgeline Sunrise Tour');
console.log(tourNames.length);  // 5
console.log(tourNames[4]);      // 'Ridgeline Sunrise Tour'

.pop()

Remove and return the last element:

const removed = tourNames.pop();
console.log(removed);           // 'Ridgeline Sunrise Tour'
console.log(tourNames.length);  // 4

.indexOf()

Find the index of a value, or -1 if not found:

console.log(tourNames.indexOf('Summit Loop Trek'));  // 1
console.log(tourNames.indexOf('Volcano Hike'));       // -1

Arrays of mixed types and objects

Arrays can hold any type of value, including other arrays and objects:

const mixed = ['Cascade Ridge Hike', 149, true, null];

In practice, you typically store one type per array — mixing types makes code harder to reason about. The most useful pattern, which you will use throughout this course, is an array of objects:

const tours = [
  { name: 'Cascade Ridge Hike', price: 149 },
  { name: 'Summit Loop Trek', price: 199 },
  { name: 'Valley Floor Walk', price: 99 },
];

console.log(tours[0].name);   // 'Cascade Ridge Hike'
console.log(tours[1].price);  // 199

Objects are covered in depth in the next lesson. This preview shows where arrays naturally lead: a list of structured records.

Exercise

const tourNames = ['Cascade Ridge Hike', 'Summit Loop Trek', 'Valley Floor Walk', 'Desert Canyon Tour'];

// Access first and last elements
console.log(tourNames[0]);
console.log(tourNames[tourNames.length - 1]);

// Add a new tour
tourNames.push('Ridgeline Sunrise Tour');
console.log(tourNames.length);  // 5

// Log the updated array
console.log(tourNames);

// Find the index of a specific tour
console.log(tourNames.indexOf('Summit Loop Trek'));  // 1

Then try accessing tourNames[10] and observe the undefined result.

Recap

• An array is an ordered list of values created with square bracket syntax: [item1, item2, item3].
• Indexes start at zero — array[0] is the first element.
• .length returns the number of elements. array[array.length - 1] is always the last element.
• const prevents reassigning the array variable, not modifying its contents.
• .push() adds to the end; .pop() removes from the end; .indexOf() finds a value’s position.
• Arrays of objects — [{ name: ..., price: ... }, ...] — are the core data structure for collections like tour listings.