# JavaScript Arrays 101
### JavaScript Arrays (Beginner Friendly Guide)
In many programs we need to store **multiple related values together**.
Instead of creating many variables, JavaScript provides **arrays**.
In this guide we will learn:
* What arrays are and why they are needed
* How to create arrays
* Access elements using index
* Update elements
* The length property
* Looping over arrays
* * *
# 1\. What Are Arrays?
An **array** is a collection of values stored in a single variable, where each value has a position called an **index**. ([GeeksforGeeks](https://www.geeksforgeeks.org/javascript/javascript-arrays/?utm_source=chatgpt.com))
Example idea:
```plaintext
Fruits list
Apple
Banana
Mango
Orange
```
In JavaScript:
```plaintext
let fruits = ["Apple", "Banana", "Mango", "Orange"];
```
Here:
Index | Value |
0 | Apple |
1 | Banana |
2 | Mango |
3 | Orange |
Important rule:
```plaintext
Array indexing starts from 0
```
So the **first element is always index 0**. ([GeeksforGeeks](https://www.geeksforgeeks.org/javascript/javascript-arrays/?utm_source=chatgpt.com))
* * *
# 2\. Why We Need Arrays
Imagine storing marks of students **without arrays**.
```plaintext
let mark1 = 85;
let mark2 = 90;
let mark3 = 78;
let mark4 = 88;
```
This quickly becomes messy.
With arrays:
```plaintext
let marks = [85, 90, 78, 88];
```
Arrays let us **store many values under one name** and access them easily. ([w3schools.com](http://w3schools.com))
* * *
# 3\. How to Create an Array
The most common way is using **square brackets \[\]**.
```plaintext
let fruits = ["Apple", "Banana", "Mango"];
```
You can also create an empty array:
```plaintext
let tasks = [];
```
Then add values later.
Arrays can store:
* numbers
* strings
* booleans
* objects
They are very flexible in JavaScript. ([GeeksforGeeks](https://www.geeksforgeeks.org/javascript/javascript-arrays/?utm_source=chatgpt.com))
* * *
# 4\. Accessing Elements Using Index
Each element has a **position number (index)**.
Example:
```plaintext
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]);
console.log(fruits[1]);
```
Output:
```plaintext
Apple
Banana
```
Remember:
```plaintext
0 → first element
1 → second element
2 → third element
```
* * *
# Array Index Visualization
```plaintext
fruits array
Index: 0 1 2 3
--------------------------------
Value: Apple Banana Mango Orange
```
* * *
# 5\. Updating Array Elements
Array elements can be changed by assigning a new value.
Example:
```plaintext
let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits);
```
Output:
```plaintext
["Apple", "Orange", "Mango"]
```
Here we replaced **Banana with Orange**.
* * *
# 6\. Array Length Property
Every array has a **length property** that tells how many items it contains. ([Wikipedia](https://en.wikipedia.org/wiki/JavaScript_syntax?utm_source=chatgpt.com))
Example:
```plaintext
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.length);
```
Output:
```plaintext
3
```
### Accessing last element
A common trick:
```plaintext
let lastFruit = fruits[fruits.length - 1];
```
Because the last index is **length − 1**.
* * *
# 7\. Looping Over Arrays
When arrays contain many elements, we usually use loops.
Example using for loop:
```plaintext
let fruits = ["Apple", "Banana", "Mango"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
```
Output:
```plaintext
Apple
Banana
Mango
```
Explanation:
```plaintext
i = index number
fruits[i] = element at that index
```
* * *
# Memory-Style Array Visualization
```plaintext
fruits
┌───────┐
│ Apple │ index 0
├───────┤
│Banana │ index 1
├───────┤
│ Mango │ index 2
└───────┘
```
Arrays store values **in order**, making them easy to iterate through.
* * *
# Quick Summary
Concept | Meaning |
Array | Collection of values |
Element | Value inside an array |
Index | Position of element |
Index start | 0 |
length | Number of elements |
Access element | array[index] |
* * *
💡 **Mental model**
```plaintext
Variable → one value
Array → list of values
Object → key-value structure
```