# JavaScript Arrays 101

Let's say you need to store a list of your five favorite movies. The naive approach? Create five variables.

```javascript
const movie1 = 'The Matrix';
const movie2 = 'Inception';
const movie3 = 'Interstellar';
const movie4 = 'The Dark Knight';
const movie5 = 'Fight Club';
```

This works, technically. But what if you want to loop through them? Or find out how many there are? Or sort them alphabetically? You're writing that logic yourself, over and over, for every list you ever need.

Arrays solve this. An array is an ordered collection of values — think of it like a numbered list where JavaScript keeps track of the numbers for you.

## Creating an Array

The simplest way to create an array in JavaScript:

```javascript
const movies = ['The Matrix', 'Inception', 'Interstellar', 'The Dark Knight', 'Fight Club'];
```

Those square brackets `[]` are your clue that you're working with an array. You can also start with an empty array and add items later:

```javascript
const movies = [];
movies[0] = 'The Matrix';
movies[1] = 'Inception';
// and so on
```

But you'll usually create them with items already inside.

## Accessing Elements by Index

Each item in an array has an index — a number that tells you where it lives. Here's the crucial part: **indexing starts at 0, not 1**.

```javascript
const fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

// Index:     0        1         2        3

console.log(fruits[0]); // 'Apple'
console.log(fruits[2]); // 'Mango'
console.log(fruits[4]); // undefined (we only have 4 items, index 4 doesn't exist)
```

This trips up beginners constantly. The first element is at index 0. The second is at index 1. It feels wrong, but there's a reason — it's rooted in how computers count memory addresses. Once you internalize it, you stop thinking about it.

To get the last element without knowing the array size, use `array[array.length - 1]`:

```javascript
const lastFruit = fruits[fruits.length - 1];
console.log(lastFruit); // 'Orange'
```

## Updating Elements

Arrays are mutable, meaning you can change them after creation. To update an element, assign a new value to a specific index:

```javascript
const fruits = ['Apple', 'Banana', 'Mango'];
fruits[1] = 'Blueberry';

console.log(fruits); // ['Apple', 'Blueberry', 'Mango']
```

The variable `fruits` still points to the same array — only the contents changed.

## The Length Property

Every array has a `.length` property that tells you how many items it contains:

```javascript
const movies = ['The Matrix', 'Inception', 'Interstellar'];
console.log(movies.length); // 3
```

This comes in handy more than you'd expect. Need the last item? Use `array.length - 1`. Want to loop through everything? Use `array.length` as your loop limit.

## Looping Over Arrays

The classic `for` loop works fine with arrays:

```javascript
const movies = ['The Matrix', 'Inception', 'Interstellar', 'The Dark Knight'];

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

Here's what happens step by step:

*   Start at `i = 0`
    
*   Print `movies[0]` → 'The Matrix'
    
*   Increment `i` to 1
    
*   Print `movies[1]` → 'Inception'
    
*   Keep going until `i = 3`
    
*   Print `movies[3]` → 'The Dark Knight'
    
*   `i` becomes 4, which is not less than 4, so the loop stops
    

JavaScript also has a simpler `for...of` loop for when you don't need the index:

```javascript
for (const movie of movies) {
  console.log(movie);
}
```

This reads almost like English: "for each movie of movies, print the movie." No index management required.

## Your Turn: Practice Assignment

Here's a small exercise to reinforce what you've learned. Try it before checking the solution:

1.  Create an array of your 5 favorite movies
    
2.  Print the first and last movie (hint: use index 0 and `array.length - 1`)
    
3.  Change the third movie to something else
    
4.  Loop through your updated array and print all movies
    

**Solution:**

```javascript
const movies = ['The Matrix', 'Inception', 'Interstellar', 'The Dark Knight', 'Fight Club'];

// Print first and last
console.log(movies[0]); // 'The Matrix'
console.log(movies[movies.length - 1]); // 'Fight Club'

// Change third movie
movies[2] = 'Dunkirk';

// Loop and print all
for (let i = 0; i < movies.length; i++) {
  console.log(movies[i]);
}
```

## Wrapping Up

Arrays are one of the most fundamental data structures in JavaScript — and in programming generally. They're ordered, zero-indexed collections that let you group related values together and work with them programmatically.

Once you're comfortable with basic array operations, you'll find yourself reaching for arrays constantly. And when you're ready for more, methods like `.map()`, `.filter()`, and `.find()` will unlock even more powerful ways to work with collections.

For now, practice creating arrays, accessing by index, and looping. Get those fundamentals solid.