Accessing and Modifying JS Array Elements Guide

Learn how to read, update, add, and remove elements from JavaScript arrays using bracket notation, at(), assignment, and common mutation methods. Covers indexing, bounds checking, nested access, and real-world modification patterns.

JavaScriptbeginner

RuneHub Team

February 27, 2026

12 min read

RuneHub Team

Feb 27, 2026

12 min read

Once you have created an array, the next step is reading and changing its contents. JavaScript gives you several ways to access individual elements, update existing values, and restructure an array's contents. Understanding these operations deeply, including what happens at the boundaries and with nested data, prevents subtle bugs that surface in production.

Accessing Elements with Bracket Notation

Bracket notation is the primary way to read array elements. Place the index (zero-based) inside square brackets:

javascript

const languages = ["JavaScript", "Python", "Rust", "Go"];
 
console.log(languages[0]); // "JavaScript"
console.log(languages[2]); // "Rust"
console.log(languages[3]); // "Go"

The index is actually converted to a string internally. JavaScript arrays are specialized objects where the "keys" are string representations of numbers:

javascript

const arr = ["a", "b", "c"];
console.log(arr["1"]); // "b" — string index works too
console.log(Object.keys(arr)); // ["0", "1", "2"]

Out-of-Bounds Access

Accessing an index that does not exist returns undefined without throwing an error:

javascript

const colors = ["red", "green"];
console.log(colors[5]);  // undefined
console.log(colors[-1]); // undefined (negative indices are not valid bracket notation)

Silent Failures

JavaScript does not throw an error when you access a nonexistent index. This means typos and off-by-one errors produce undefined instead of a crash, making bugs harder to track down. Always validate indices when working with dynamic data.

The at() Method for Flexible Indexing

The at() method (ES2022) accepts both positive and negative integers. Negative values count backward from the end:

javascript

const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
 
// Positive: same as bracket notation
console.log(fruits.at(0)); // "apple"
console.log(fruits.at(2)); // "cherry"
 
// Negative: count from the end
console.log(fruits.at(-1)); // "elderberry" (last)
console.log(fruits.at(-2)); // "date" (second to last)
console.log(fruits.at(-5)); // "apple" (first)

Traditional approach	`at()` equivalent	Result
`arr[arr.length - 1]`	`arr.at(-1)`	Last element
`arr[arr.length - 2]`	`arr.at(-2)`	Second-to-last
`arr[0]`	`arr.at(0)`	First element

The at() method returns undefined for out-of-bounds indices, just like bracket notation:

javascript

console.log(fruits.at(100));  // undefined
console.log(fruits.at(-100)); // undefined

Modifying Elements by Index

Assignment through bracket notation directly changes the element at that position:

javascript

const scores = [85, 92, 78, 95, 88];
 
// Update index 2
scores[2] = 80;
console.log(scores); // [85, 92, 80, 95, 88]
 
// Update last element
scores[scores.length - 1] = 90;
console.log(scores); // [85, 92, 80, 95, 90]

Assigning Beyond the Length

Assigning to an index past the current length extends the array and creates empty slots (holes) between the last element and the new one:

javascript

const letters = ["a", "b", "c"];
letters[6] = "g";
 
console.log(letters);        // ["a", "b", "c", empty x3, "g"]
console.log(letters.length); // 7
console.log(letters[4]);     // undefined (empty slot)

Avoid Sparse Arrays

Assigning to distant indices creates holes that degrade performance and cause unexpected behavior with iteration methods. If you need gaps, use a Map with numeric keys instead.

Accessing Nested Array Elements

Arrays can contain other arrays, creating multi-dimensional structures. Chain bracket notation to access inner elements:

javascript

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
 
console.log(matrix[0]);    // [1, 2, 3] — first row
console.log(matrix[0][1]); // 2 — first row, second column
console.log(matrix[2][2]); // 9 — third row, third column
 
// Modify a nested element
matrix[1][1] = 50;
console.log(matrix[1]); // [4, 50, 6]

Accessing Arrays Inside Objects (and Vice Versa)

Real-world data often mixes objects and arrays:

javascript

const classroom = {
  teacher: "Ms. Rivera",
  students: [
    { name: "Alice", grades: [90, 85, 92] },
    { name: "Bob", grades: [78, 82, 88] },
    { name: "Carol", grades: [95, 91, 97] },
  ],
};
 
// Access Carol's second grade
console.log(classroom.students[2].grades[1]); // 91
 
// Update Bob's first grade
classroom.students[1].grades[0] = 80;

Destructuring for Cleaner Access

Array destructuring lets you extract elements into named variables in a single statement:

javascript

const rgb = [66, 135, 245];
 
// Without destructuring
const r = rgb[0];
const g = rgb[1];
const b = rgb[2];
 
// With destructuring
const [red, green, blue] = rgb;
console.log(red, green, blue); // 66 135 245

You can skip elements and use rest syntax:

javascript

const scores = [95, 88, 72, 64, 91];
 
// Skip the second element
const [first, , third] = scores;
console.log(first, third); // 95 72
 
// Capture the rest
const [top, ...remaining] = scores;
console.log(top);       // 95
console.log(remaining); // [88, 72, 64, 91]

Swapping Variables with Destructuring

A classic use case that eliminates the need for a temporary variable:

javascript

let a = 10;
let b = 20;
 
[a, b] = [b, a];
console.log(a, b); // 20 10

Modifying Arrays with Common Methods

Beyond direct index assignment, JavaScript provides methods that add, remove, or replace elements.

Adding Elements

Method	Position	Mutates original?	Returns
push()	End	Yes	New length
unshift()	Start	Yes	New length
splice()	Any position	Yes	Removed elements
Spread `[...arr, x]`	End (or start)	No (new array)	New array

javascript

const tasks = ["Design", "Build"];
 
// Add to end
tasks.push("Test");
console.log(tasks); // ["Design", "Build", "Test"]
 
// Add to start
tasks.unshift("Plan");
console.log(tasks); // ["Plan", "Design", "Build", "Test"]
 
// Insert at index 2
tasks.splice(2, 0, "Review");
console.log(tasks); // ["Plan", "Design", "Review", "Build", "Test"]

Removing Elements

Method	Position	Mutates original?	Returns
pop()	End	Yes	Removed element
shift()	Start	Yes	Removed element
splice()	Any position	Yes	Removed elements
filter()	By condition	No (new array)	New array

javascript

const queue = ["Alice", "Bob", "Carol", "Dave"];
 
// Remove from end
const last = queue.pop();
console.log(last);  // "Dave"
console.log(queue); // ["Alice", "Bob", "Carol"]
 
// Remove from start
const first = queue.shift();
console.log(first); // "Alice"
console.log(queue); // ["Bob", "Carol"]
 
// Remove by index (remove 1 element at index 0)
queue.splice(0, 1);
console.log(queue); // ["Carol"]

Replacing Elements

javascript

const team = ["Alice", "Bob", "Carol"];
 
// Direct assignment
team[1] = "Bobby";
console.log(team); // ["Alice", "Bobby", "Carol"]
 
// splice: remove 1 at index 0, insert "Zara"
team.splice(0, 1, "Zara");
console.log(team); // ["Zara", "Bobby", "Carol"]
 
// with() method (ES2023): immutable replacement
const updated = team.with(2, "Carla");
console.log(team);    // ["Zara", "Bobby", "Carol"] — unchanged
console.log(updated); // ["Zara", "Bobby", "Carla"] — new array

Safe Access Patterns

Optional Chaining with Arrays

When accessing nested data from an API or database, elements might not exist. Optional chaining prevents runtime errors:

javascript

const response = {
  data: {
    users: [
      { name: "Alice", preferences: { theme: "dark" } },
      { name: "Bob", preferences: null },
    ],
  },
};
 
// Safe access with optional chaining
const theme = response.data?.users?.[0]?.preferences?.theme;
console.log(theme); // "dark"
 
const missing = response.data?.users?.[5]?.preferences?.theme;
console.log(missing); // undefined (no crash)
 
// Without optional chaining, this would throw:
// response.data.users[5].preferences.theme → TypeError

Bounds-Checked Access Helper

For applications where out-of-bounds access should be explicit:

javascript

function getElement(arr, index) {
  if (index < 0 || index >= arr.length) {
    throw new RangeError(
      `Index ${index} out of bounds for array of length ${arr.length}`
    );
  }
  return arr[index];
}
 
const items = ["a", "b", "c"];
console.log(getElement(items, 1)); // "b"
// getElement(items, 5); // RangeError: Index 5 out of bounds for array of length 3

Performance Considerations

Different access and modification patterns have different performance characteristics:

Operation	Time Complexity	Notes
Read by index `arr[i]`	O(1)	Constant time, very fast
Write by index `arr[i] = x`	O(1)	Constant time
`push()` / `pop()`	O(1) amortized	End operations are fast
`shift()` / `unshift()`	O(n)	Re-indexes every element
`splice()` at start	O(n)	Must shift all subsequent elements
`splice()` at end	O(1)	Nearly equivalent to `push`/`pop`
`at()`	O(1)	Same as bracket access internally

Performance Tip

If you frequently add or remove elements from the start of a large array, consider using a deque (double-ended queue) data structure or reversing your logic to use push/pop at the end instead. Each shift() or unshift() call re-indexes every element in the array.

Common Mistakes

Forgetting that array indices start at zero:

javascript

const items = ["first", "second", "third"];
// Bug: trying to get the first item
console.log(items[1]); // "second" — not "first"!
// Fix:
console.log(items[0]); // "first"

Modifying an array during iteration:

javascript

// Bug: skips "banana" because indices shift after splice
const fruits = ["apple", "banana", "cherry", "date"];
for (let i = 0; i < fruits.length; i++) {
  if (fruits[i].startsWith("b")) {
    fruits.splice(i, 1);
  }
}
console.log(fruits); // ["apple", "cherry", "date"]
 
// Fix: iterate backward or use filter()
const filtered = fruits.filter(f => !f.startsWith("c"));

Confusing at(-1) with arr[-1]:

javascript

const nums = [10, 20, 30];
 
// Bracket notation with -1 does NOT work for last element
console.log(nums[-1]);   // undefined (no property named "-1")
 
// at() is the correct way
console.log(nums.at(-1)); // 30

Rune AI

Key Insights

Bracket notation for read and write: arr[i] is O(1) for both reading and assigning values
at() for negative indexing: arr.at(-1) is the clean way to access elements from the end
End operations are fast: push() and pop() are O(1); shift() and unshift() are O(n)
Optional chaining for safety: Use arr?.[i]?.property when the data structure might be incomplete
Prefer immutable patterns: Use filter(), with(), and spread to create new arrays instead of mutating originals

Frequently Asked Questions

Can I use negative indices with bracket notation?

No. Bracket notation converts the index to a string property name. `arr[-1]` looks for a property literally named `"-1"`, which does not exist on standard arrays. Use `arr.at(-1)` or `arr[arr.length - 1]` to access the last element.

What happens if I assign to an index that does not exist?

JavaScript extends the array to accommodate the new index and fills any gap with empty slots. For example, assigning `arr[10] = "x"` on a 3-element array creates indices 3 through 9 as empty holes. Avoid this pattern because sparse arrays have worse performance and unexpected behavior with methods like `map` and `forEach`.

Is bracket notation or at() faster?

They perform identically in modern engines. The `at()` method internally resolves the index and accesses the same underlying storage. Choose `at()` when negative indexing improves readability (accessing the last element), and bracket notation for everything else.

How do I replace an element without mutating the original array?

Use the `with()` method (ES2023): `const updated = arr.with(index, newValue)`. This returns a new array with the specified index replaced. For older environments, use `const updated = arr.map((el, i) => i === index ? newValue : el)`.

When should I use splice() vs filter() to remove elements?

Use `splice()` when you know the exact index to remove and want to mutate the original array. Use `filter()` when you want to remove elements by condition and prefer creating a new array without mutation. In modern functional JavaScript, `filter()` is generally preferred because it avoids side effects.

Conclusion

Accessing and modifying array elements is the foundation of every array operation in JavaScript. Bracket notation handles direct reads and writes, at() simplifies negative indexing, and destructuring makes extracting multiple values clean and expressive. For mutations, push, pop, shift, unshift, and splice cover every position, while filter and the with() method provide immutable alternatives. The key is knowing which tool to reach for and understanding the performance trade-offs, especially the O(n) cost of operations that shift elements at the start of an array.

Accessing and Modifying JS Array Elements Guide

Accessing Elements with Bracket Notation

Out-of-Bounds Access

Silent Failures

The at() Method for Flexible Indexing

Modifying Elements by Index

Assigning Beyond the Length

Avoid Sparse Arrays

Accessing Nested Array Elements

Accessing Arrays Inside Objects (and Vice Versa)

Destructuring for Cleaner Access

Swapping Variables with Destructuring

Modifying Arrays with Common Methods

Adding Elements

Removing Elements

Replacing Elements

Safe Access Patterns

Optional Chaining with Arrays

Bounds-Checked Access Helper

Performance Considerations

Performance Tip

Common Mistakes

Rune AI

Frequently Asked Questions

Can I use negative indices with bracket notation?

What happens if I assign to an index that does not exist?

Is bracket notation or at() faster?

How do I replace an element without mutating the original array?

When should I use splice() vs filter() to remove elements?

Conclusion

Tags

More in this topic

OffscreenCanvas API in JS for UI Performance

Advanced Web Workers for High Performance JS

JavaScript Macros and Abstract Code Generation

Stay Updated