Accessing and Modifying JS Array Elements Guide

Every array element has a numbered position called an index. The first element is at index 0, the second at 1, and so on. To read or change an element, you use bracket notation with that index.

This is the most basic array operation in JavaScript and the foundation for every other array skill you will learn. If you can create an array, access its elements, and change them, you are ready for every array method that follows. If you are unsure how to create arrays, see the guide on creating and initializing arrays first.

Reading Elements with Bracket Notation

Every array has a numbered position for each item, starting at 0 for the first one. Square brackets combined with that number, called the index, read or change the value stored there:

javascript

const colors = ["red", "green", "blue"];
 
console.log(colors[0]); // "red"
console.log(colors[1]); // "green"
console.log(colors[2]); // "blue"

The index is zero-based. Think of it as "how many positions from the start" rather than "the Nth item."

Bracket notation does not protect you from typos or out-of-range positions. Instead of throwing an error, an index that does not exist simply returns undefined, and a negative number is treated as a property name rather than a position:

javascript

const colors = ["red", "green", "blue"];
 
console.log(colors[5]);  // undefined
console.log(colors[-1]); // undefined (not the last element!)

Getting the last element with plain bracket notation means calculating colors[colors.length - 1], which is easy to get wrong. The at() method, added in ES2022, accepts negative numbers to count from the end instead:

javascript

const colors = ["red", "green", "blue"];
 
console.log(colors.at(-1)); // "blue"  (last)
console.log(colors.at(-2)); // "green" (second to last)
console.log(colors.at(0));  // "red"   (same as colors[0])

at() supports negative indices, which bracket notation does not, so it is the cleaner choice whenever you need to count from the end of the array.

Modifying Existing Elements

To change an element, assign a new value to its index:

javascript

const tasks = ["buy milk", "walk dog", "read book"];
 
tasks[1] = "walk cat";
 
console.log(tasks); // ["buy milk", "walk cat", "read book"]

The array is mutated in place. The variable tasks still points to the same array, but element 1 now holds a different value.

Adding Elements by Index

If you assign to an index that is beyond the current length, JavaScript expands the array:

javascript

const scores = [10, 20, 30];
 
scores[5] = 60;
 
console.log(scores);        // [10, 20, 30, <2 empty slots>, 60]
console.log(scores.length); // 6

JavaScript fills the gap between the old last index and the new one with empty slots. Those slots are not undefined in the same way a declared variable is, they are truly empty and are skipped by some array methods like forEach and map.

If you just want to add to the end without empty slots, use push() instead.

Using the length Property

Every array has a length property that tells you how many elements it holds:

javascript

const letters = ["a", "b", "c"];
 
console.log(letters.length); // 3

length is always one more than the highest index. An array with indices 0, 1, and 2 has a length of 3.

But length is not read-only. You can set it to truncate or clear an array:

javascript

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5
 
// Truncate to first 3 elements
numbers.length = 3;
console.log(numbers); // [1, 2, 3]
 
// Clear the entire array
numbers.length = 0;
console.log(numbers); // []

Setting length to 0 is the fastest way to empty an array. It removes all elements in one operation.

Practical Patterns

Here are two patterns you will use constantly:

Get the last element by subtracting 1 from the length, since the last valid index is always one less than the total count:

javascript

const items = ["pen", "notebook", "eraser"];
 
const last = items[items.length - 1];
console.log(last); // "eraser"

Loop through all elements with a standard for loop, using the index to read each item in order from start to end:

javascript

const fruits = ["apple", "banana", "cherry"];
 
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}
// 0: apple
// 1: banana
// 2: cherry

The loop uses i < fruits.length as the stop condition, so it runs for indices 0, 1, and 2, printing exactly one line per element.

Common Mistakes

Confusing index with position. The third item is at index 2, not 3. This off-by-one error is the most common array mistake.

javascript

const arr = ["first", "second", "third"];
 
// Wrong: thinks index 3 is the third item
console.log(arr[3]); // undefined
 
// Right: third item is at index 2
console.log(arr[2]); // "third"

Using negative indices directly on bracket notation. Many other languages let you index from the end with a negative number, but JavaScript does not support that with plain square brackets. Use arr[arr.length - 1] or arr.at(-1) to get the last element instead.

javascript

const arr = [10, 20, 30];
 
// Wrong
console.log(arr[-1]); // undefined
 
// Right
console.log(arr[arr.length - 1]); // 30
console.log(arr.at(-1));          // 30

Now that you can create, access, and modify arrays, the next step is learning methods that add and remove elements from the ends. Jump into push and pop to continue.