# JavaScript Arrays 101

Let's say we want to store the names of five students in our program. Without arrays, we would do something like this:

```javascript
let student1 = "Gurjeet";
let student2 = "Priya";
let student3 = "Rahul";
let student4 = "Sneha";
let student5 = "Arjun";
```

That works for five students. But what about fifty? Or five hundred? We cannot create a separate variable for every single value. That is where arrays come in.

An array is a way to store multiple values in a single variable, in a specific order. Instead of five separate variables, we get one clean list.

```javascript
let students = ["Gurjeet", "Priya", "Rahul", "Sneha", "Arjun"];
```

One variable, five values, all organised in order. That is the core idea behind arrays.

* * *

## How to Create an Array

Creating an array in JavaScript is straightforward. We use square brackets and separate each value with a comma.

```javascript
let fruits = ["apple", "banana", "mango"];

let marks = [85, 92, 76, 88];

let mixed = ["Gurjeet", 22, true]; // arrays can hold different data types too
```

An array can hold strings, numbers, booleans, or even a mix of all of them. Each value inside an array is called an element.

* * *

## Accessing Elements Using Index

Every element in an array has a position, and that position is called an index. The important thing to know here is that arrays in JavaScript are zero-indexed. That means the counting starts from 0, not 1.

```javascript
let fruits = ["apple", "banana", "mango"];

//               0         1        2
```

So if we want to access the first element, we use index 0. The second element is at index 1, and so on.

```javascript
let fruits = ["apple", "banana", "mango"];

console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits[2]); // mango
```

This trips up almost every beginner at least once. We naturally think of the first item as number 1, but in JavaScript it is always number 0. The sooner that becomes second nature, the better.

What happens if we try to access an index that does not exist?

```javascript
console.log(fruits[5]); // undefined
```

JavaScript does not throw an error. It simply returns `undefined` because there is nothing at that position.

* * *

## Updating Elements

Accessing an element and updating it follow the same logic. We use the index to target the position and assign a new value.

```javascript
let fruits = ["apple", "banana", "mango"];

fruits[1] = "grapes"; // replacing "banana" with "grapes"

console.log(fruits); // ["apple", "grapes", "mango"]
```

We targeted index 1, which was `"banana"`, and replaced it with `"grapes"`. The rest of the array stays exactly as it was.

* * *

## The length Property

Every array has a built-in property called `length` that tells us how many elements are in it.

```javascript
let fruits = ["apple", "banana", "mango"];

console.log(fruits.length); // 3
```

This is more useful than it sounds. We use `length` constantly when looping through arrays, checking if an array is empty, or finding the last element.

Speaking of the last element, here is a neat trick. Since the last index is always one less than the total length, we can always access it like this:

```javascript
let fruits = ["apple", "banana", "mango"];

console.log(fruits[fruits.length - 1]); // mango
```

This works no matter how many elements are in the array. Whether there are 3 items or 300, `fruits.length - 1` will always point to the last one.

* * *

## Looping Over an Array

Most of the time, we do not just want to access one element. We want to go through the entire array and do something with each item. That is where loops come in.

The most basic way is a `for` loop:

```javascript
let fruits = ["apple", "banana", "mango"];

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

// Output:
// apple
// banana
// mango
```

Let's break down what is happening here. We start `i` at 0 because that is the first index. We keep going as long as `i` is less than `fruits.length`, which is 3. Each time the loop runs, we access `fruits[i]` and print it, then increase `i` by 1.

So the loop runs three times, once for index 0, once for index 1, and once for index 2, printing each fruit along the way.

A cleaner and more modern way to loop over an array is `for...of`:

```javascript
let fruits = ["apple", "banana", "mango"];

for (let fruit of fruits) {
  console.log(fruit);
}

// Output:
// apple
// banana
// mango
```

The `for...of` loop handles all the index tracking behind the scenes. We just get each element directly, one at a time. When we do not need the index number and just want to work with the values, `for...of` is the cleaner choice.

* * *