JavaScript Arrays

What's an Array?

An array is like a numbered list. Imagine a shopping list where each item has a position number.

┌─────────────────────┐
│   Shopping List     │
│                     │
│  Position 0: Apple │
│  Position 1: Banana │
│  Position 2: Orange │
│  Position 3: Milk  │
└─────────────────────┘

In JavaScript, arrays let you store multiple values in order. Each value has a position number (called an index), starting from 0.

Creating an Array

Let's create an array step by step:

Step 1: Start with square brackets

const fruits = [];

Step 2: Add items, separated by commas

const fruits = ['apple', 'banana', 'orange'];

Step 3: Access items by their position

fruits[0];  // "apple" (first item)
fruits[1];  // "banana" (second item)
fruits[2];  // "orange" (third item)

Important: Arrays start counting at 0, not 1! The first item is at position 0.

Why Arrays Start at 0

This confuses a lot of beginners. Think of it like house numbers on a street:

Street Addresses:
┌─────────┬─────────┬─────────┐
│ House 0  │ House 1 │ House 2 │
│ (First)  │(Second) │ (Third) │
└─────────┴─────────┴─────────┘

The first house is number 0, the second is number 1, and so on. Same with arrays.

Adding Items to Arrays

You can add items to an array:

Add to the end:

const fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits);  // ['apple', 'banana', 'orange']

Add to the beginning:

fruits.unshift('grape');
console.log(fruits);  // ['grape', 'apple', 'banana', 'orange']

Removing Items from Arrays

You can also remove items:

Remove from the end:

fruits.pop();  // Removes 'orange'

Remove from the beginning:

fruits.shift();  // Removes 'grape'

Getting the Length

To see how many items are in an array:

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length);  // 3

Real Example: Working with Arrays

Let's say you're building a to-do list:

const todos = ['Buy groceries', 'Walk the dog', 'Finish homework'];

// Add a new task
todos.push('Call mom');

// Check what's first
console.log(todos[0]);  // "Buy groceries"

// See how many tasks
console.log(todos.length);  // 4

// Remove completed task
todos.shift();  // Removes first task

Arrays are perfect for lists of things - shopping items, user names, scores, anything you need to keep in order.

Arrays Can Hold Anything

Arrays aren't just for text. They can hold numbers, booleans, objects, even other arrays:

const numbers = [1, 2, 3, 4, 5];
const mixed = ['text', 42, true];
const nested = [[1, 2], [3, 4]];  // Array of arrays

Common Array Operations

Check if array has items:

const fruits = ['apple'];
fruits.length > 0;  // true (has items)

Get the last item:

const lastFruit = fruits[fruits.length - 1];

Loop through all items:

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Quick Tips

1. Arrays start at 0 - First item is [0], not [1]
2. Use push() to add - Most common way to add items
3. Use length to count - Tells you how many items
4. Arrays keep order - Items stay in the order you put them

Arrays are one of the most useful things in JavaScript. You'll use them constantly - for lists, collections, sequences of data. Once you get comfortable with arrays, you can handle much more complex programs.