Arrays, Indexing & Mutating Methods

In Plain English

JavaScript arrays are zero-indexed, dynamically-sized ordered collections. They offer built-in length tracking and methods to push/pop from the end and shift/unshift from the start.

The Mental Model

"An array is like a numbered organizer tray with slots 0, 1, 2, 3... You can push new items onto the end or pop the last one off instantly."

Deep Dive: How It Works

Zero-Based Indexing: The first item is at index 0, and the last item is at array.length - 1 (or array.at(-1)).

push & pop: push() adds elements to the end (O(1)); pop() removes and returns the last element.

shift & unshift: unshift() inserts at index 0; shift() removes from index 0.

Syntax Blueprint

const list = ["A", "B", "C"]; list.push("D"); list[0] ──▶ "A"

Access elements with bracket notation list[index] and modify lengths dynamically.

Core Rules to Remember

Zero Indexing: First element is always array[0].

Dynamic Sizing: Arrays expand automatically as elements are inserted.

length Property: Contains the exact count of elements in the array.

Common Beginner Traps & How to Fix Them

Mistake:Accessing out-of-bounds index.

Why it happens: JavaScript does not throw index errors; reading array[99] returns undefined.

How to fix: Verify array.length or check if item !== undefined before accessing properties.

Pro Tip: Use array.at(-1) to read the last element without writing array[array.length - 1].

Live Interactive Example

Hit Run Code to see it live

Array Mutation and Inspection

JavaScript ES2024

Output Console

Click "Run Code" to view the rendered output.

How it works: Demonstrates pushing items, accessing length/indices, and popping elements.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Manipulate a task queue array

Initialize const tasks = ["Task 1", "Task 2"];
Use tasks.push("Task 3");
Print "Queue size: 3 | Last: Task 3".

Sandbox Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.