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 ```javascript const fruits = []; ```

**Step 2:** Add items, separated by commas ```javascript const fruits = ['apple', 'banana', 'orange']; ```

**Step 3:** Access items by their position ```javascript 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:** ```javascript const fruits = ['apple', 'banana']; fruits.push('orange'); console.log(fruits); // ['apple', 'banana', 'orange'] ```

**Add to the beginning:** ```javascript fruits.unshift('grape'); console.log(fruits); // ['grape', 'apple', 'banana', 'orange'] ```

Removing Items from Arrays

You can also remove items:

**Remove from the end:** ```javascript fruits.pop(); // Removes 'orange' ```

**Remove from the beginning:** ```javascript fruits.shift(); // Removes 'grape' ```

Getting the Length

To see how many items are in an array:

```javascript 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:

```javascript 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:

```javascript 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:** ```javascript const fruits = ['apple']; fruits.length > 0; // true (has items) ```

**Get the last item:** ```javascript const lastFruit = fruits[fruits.length - 1]; ```

**Loop through all items:** ```javascript 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.