Array Basics — I can create arrays, access/update elements by index, and explain common index errors. - Computer Programming 1 JavaScript

SECTION 1

Historical Context & Motivation

Imagine you are building a game that tracks the top ten high scores. You could create ten separate variables — score1, score2, all the way through score10 — but that quickly becomes painful to manage. What if the leaderboard grows to one hundred or one thousand entries? Early computer scientists faced exactly this problem: they needed a way to store many related values under a single name, with fast access to any individual item. The solution they developed was the array, one of the most fundamental data structures in all of computing.

1945 • Von Neumann Architecture

John von Neumann proposed storing instructions and data in consecutive memory locations, establishing the concept of indexed memory that arrays would later exploit.

1957 • Fortran Introduces Arrays

IBM's Fortran language became one of the first high-level languages to let programmers declare arrays, making it dramatically easier to work with lists of numbers for scientific calculations.

1972 • C Language & Zero-Based Indexing

Dennis Ritchie's C language popularized zero-based indexing, where the first element sits at position 0. This convention mapped directly to how memory addresses work under the hood.

1995 • JavaScript Is Born

Brendan Eich created JavaScript in just ten days. The language inherited zero-based arrays from C and Java, but made them far more flexible — JavaScript arrays can hold mixed data types and resize dynamically.

The core question that arrays answer is deceptively simple: how do we organize multiple pieces of related data so we can quickly find any single piece by its position? Understanding arrays is your first step toward mastering data structures — the building blocks that professional developers use every day.

SECTION 2

Core Principles & Definitions

An array is an ordered collection of values stored in a single variable. Each value in the array is called an element, and every element has a numeric position called its index. In JavaScript, the first element always sits at index 0, not index 1. This zero-based counting system trips up many beginners, but once you internalize it, it becomes second nature.

Creating an Array

Use square brackets [] and separate values with commas. For example, let colors = ["red", "green", "blue"]; creates an array with three string elements.

Accessing Elements

Use the array name followed by the index in brackets: colors[0] returns "red". The index tells JavaScript exactly which slot to look in.

Updating Elements

Assign a new value to an existing index: colors[1] = "yellow"; replaces "green" with "yellow". The array is modified in place.

The .length Property

Every array has a .length property that tells you how many elements it contains. For colors, colors.length is 3.

Common Index Errors

Accessing an index that doesn't exist (like colors[3] in a 3-element array) returns undefined instead of throwing an error — a silent bug that can be tricky to find.

✦

KEY TAKEAWAY

Think of an array like a row of numbered lockers in a school hallway. Locker 0 is the first one, locker 1 is the second, and so on. You can peek inside any locker instantly if you know its number, swap out what's stored inside, or check how many lockers exist in the row. The key rule: counting starts at 0, not 1.

SECTION 3

Visual Explanation

The diagram below shows how a JavaScript array is organized in memory. Each box represents one element, and the number above it is the index. Notice how the index always starts at 0 and the last valid index is always length − 1.

Each colored box is one element. The index above each box shows its position. Notice that fruits[5] is out of bounds because valid indices run from 0 to length − 1 (i.e., 0 to 4).

The diagram highlights a pattern you will use constantly: the last valid index is always array.length − 1. If your array has five elements, its indices are 0, 1, 2, 3, and 4. Trying to access index 5 does not crash your program — JavaScript quietly returns undefined, which can cause confusing bugs later if you don't realize what happened.

SECTION 4

How Arrays Work Under the Hood

Although you don't need to memorize complex formulas to use arrays, understanding a few key relationships will help you avoid common mistakes. Below are the most important "rules" of array indexing expressed as concise formulas.

LAST VALID INDEX

lastIndex = array.length − 1

Because indexing starts at 0, the highest index is always one less than the total count of elements. A 10-element array has indices 0 through 9.

VALID INDEX RANGE

0 ≤ index ≤ array.length − 1

Any integer index within this range will return an element. Any index outside this range — whether negative or too large — returns undefined in JavaScript.

ACCESSING THE LAST ELEMENT

array[array.length − 1]

This pattern is so common that modern JavaScript added array.at(-1) as a shortcut. Both expressions return the final element.

When you write let scores = [90, 85, 72];, JavaScript allocates memory to hold those three numbers and creates a variable scores that points to that memory. When you later write scores[1], the engine jumps directly to position 1 and returns 85. This direct jump is extremely fast — it doesn't need to scan through element 0 first. That instant lookup is one of the biggest advantages of arrays.

💡

Zero-Based vs. One-Based Counting

Not all languages use zero-based indexing. Lua and MATLAB start arrays at index 1. When you switch languages, always check which convention is used — a single off-by-one mistake can break an entire program.

SECTION 5

Common Index Errors & How to Avoid Them

Index-related bugs are some of the most common mistakes in programming. The tricky part in JavaScript is that many of these errors are silent — the code runs without crashing, but produces incorrect results. The diagram and table below catalog the most frequent pitfalls so you can recognize and prevent them.

Four common index errors and the correct alternatives. Each red/orange/violet/pink box shows a mistake, and the green box at the bottom shows the safe patterns to memorize.

Mistake	What Happens	How to Fix It
`arr[arr.length]`	Returns `undefined` because the last index is `length − 1`	Use `arr[arr.length − 1]` or `arr.at(-1)`
Starting a loop at `i = 1`	Skips the first element at index 0	Start loops at `i = 0`
Looping with `i <= arr.length`	The final iteration reads an undefined element	Use `i < arr.length` (strict less-than)
`arr[-1]` using brackets	Returns `undefined` — bracket notation doesn't support negatives	Use `arr.at(-1)` (ES2022+)

Common array index mistakes and their fixes

SECTION 6

Worked Example: Building a Playlist

Let's walk through a realistic scenario step by step. You are building a simple music playlist app that stores song titles in an array. You need to create the playlist, read a specific song, update one, and safely access the last song.

Playlist Manager

1
Step 1 — Create the Array

Declare a variable called playlist and initialize it with three song titles using square-bracket notation.

let playlist = ["Bohemian Rhapsody", "Stairway to Heaven", "Imagine"];
2
Step 2 — Access the Second Song

The second song is at index 1 (remember, counting starts at 0). Use bracket notation to read it.

console.log(playlist[1]); // Output: "Stairway to Heaven"
3
Step 3 — Update the Third Song

Replace "Imagine" (at index 2) with a new song by assigning to that index.

playlist[2] = "Hotel California"; — the array is now ["Bohemian Rhapsody", "Stairway to Heaven", "Hotel California"]
4
Step 4 — Safely Access the Last Song

Rather than hard-coding playlist[2], use the length − 1 formula. This still works even if the playlist grows or shrinks later.

let lastSong = playlist[playlist.length - 1]; → "Hotel California"
5
Step 5 — Check for an Out-of-Bounds Error

What if you accidentally try to access index 3? Since the array only has indices 0, 1, and 2, index 3 is out of bounds.

console.log(playlist[3]); // Output: undefined — no crash, but the value is undefined, which would cause a bug if used in a calculation.

SECTION 7

Arrays vs. Other Ways to Store Data

Arrays aren't the only way to store data in JavaScript. It's helpful to compare them with alternatives so you understand when arrays shine and when another structure might be better suited.

Feature	Separate Variables	Array	Object
How you access data	By variable name (`score1`)	By numeric index (`scores[0]`)	By string key (`student.name`)
Order matters?	No inherent order	Yes — elements have a fixed order	No guaranteed order
Good for lists?	No — tedious with many items	Yes — ideal for lists	No — designed for named properties
Can loop through easily?	No	Yes — with for loops	Yes — with for...in or Object.keys()
Best use case	One or two unrelated values	Collections of similar items (scores, names, prices)	A single entity with named properties (a student, a car)

Comparing data storage approaches in JavaScript

📦

WHEN TO USE AN ARRAY

Choose an array whenever you have a collection of similar items — like a list of test scores, usernames, or product prices. If the order of items matters (first place, second place, etc.), arrays are especially well-suited. If each piece of data has a meaningful label rather than a position (like name, age, email), an object is usually a better fit.

SECTION 8

Connection to Advanced Topics

The simple arrays you learned today are the foundation for much more powerful techniques. As you progress through your computer science courses, you'll encounter many concepts that build directly on array basics.

What You Know Now	What's Coming Next
Creating arrays with `[ ]`	Adding/removing elements with `.push()`, `.pop()`, `.splice()`
Accessing elements by index	Looping through all elements with `for`, `forEach`, `map`
Updating single elements	Sorting arrays, filtering, and searching with built-in methods
One-dimensional arrays	Multi-dimensional arrays (arrays of arrays) — used for grids, game boards, and spreadsheets
Storing primitive values (strings, numbers)	Storing objects inside arrays — combining arrays and objects for real-world data modeling

How today's array basics connect to future topics

Every one of these advanced techniques relies on the same zero-based indexing, .length property, and bracket-notation access you practiced today. Master these fundamentals now and the advanced topics will feel like natural extensions, not entirely new concepts.

SECTION 9

Practice Problems

Question 1: CONCEPTUAL

An array called pets contains ["dog", "cat", "hamster", "fish"]. What is the index of "hamster"? Explain why it is not 3.

Show answer

The index of "hamster" is 2. JavaScript arrays use zero-based indexing, which means "dog" is at index 0, "cat" is at index 1, and "hamster" is at index 2. If you counted starting at 1 (like everyday counting), you'd say "hamster" is the 3rd item, but in code, its index is 2. The index 3 actually points to "fish".

Question 2: BASIC CALCULATION

Given let temps = [72, 68, 75, 80, 65];, write a single line of JavaScript that stores the last element in a variable called lastTemp using the .length property.

Show answer

The correct line is let lastTemp = temps[temps.length - 1];. The array has 5 elements, so temps.length is 5. Subtracting 1 gives index 4, which holds 65. This formula works for any array size and is safer than hard-coding temps[4] because it still works if you add or remove elements later.

Question 3: INTERMEDIATE

You have let grades = [88, 92, 76, 95, 81];. Write JavaScript code that: (a) changes the third grade from 76 to 84, and (b) logs the updated array to the console. What does the array look like after both operations?

Show answer

The third grade is at index 2 (since indexing starts at 0). The code is: grades[2] = 84; followed by console.log(grades);. After the update, the array is [88, 92, 84, 95, 81]. Only the element at index 2 changed; all other elements remain in their original positions. When you assign a new value to an existing index, JavaScript overwrites the old value in place.

Question 4: APPLIED

A student wrote this code to print the first and last items of a shopping list, but it has bugs. Identify both bugs and fix the code.

let items = ["milk", "eggs", "bread", "butter"];
console.log(items[1]);              // "first item"
console.log(items[items.length]);    // "last item"

Show answer

Bug 1: The first item is at index 0, not index 1. items[1] actually returns "eggs", the second item. Fix: change to items[0]. Bug 2: items.length is 4, but index 4 doesn't exist (valid indices are 0–3). This returns undefined. Fix: change to items[items.length - 1] to correctly get "butter". Both errors are classic off-by-one mistakes caused by forgetting zero-based indexing.

Question 5: CRITICAL THINKING

Consider this code:

let data = [10, 20, 30];
data[5] = 60;
console.log(data.length);
console.log(data[3]);

Predict the output of both console.log statements. Then explain what happened to indices 3 and 4, and why this could be problematic in a real application.

Show answer

The first console.log prints 6. The second prints undefined. When you assign to index 5 in a 3-element array, JavaScript stretches the array to length 6. Indices 3 and 4 become "empty slots" — they exist in the array's length count but hold no value, returning undefined when accessed. This is called a sparse array. In a real application, sparse arrays can cause unexpected bugs: a loop might process undefined values, leading to NaN in calculations or errors when calling string methods on non-string values.

SUMMARY

Lesson Summary

Summary

An array is an ordered collection of values stored under a single variable name. You create arrays with square brackets and commas, access individual elements using their numeric index in bracket notation, and update elements by assigning a new value to an existing index. JavaScript uses zero-based indexing, so the first element is always at position 0 and the last is at position array.length − 1.

The most common mistake is the off-by-one error — forgetting that indices start at 0 and that array.length itself is always one past the last valid index. Accessing an out-of-bounds index returns undefined instead of crashing, which makes these bugs silent and hard to find. Use the formula array[array.length - 1] (or array.at(-1)) to safely access the last element, and always start loops at index 0 with the condition i < array.length.