JavaScript Arrays 101: Create, Access, Update, and Loop Through Arrays

When we start learning JavaScript most of the time we work with simple values. Maybe a number, or maybe a string.

let fruit = 'Apple';
let marks = 95;

Something like this pretty straightforward. But now imagine a slightly different situation. Suppose you want to store five favorite fruits.

You could write something like this:

let fruit1 = "Apple";
let fruit2 = "Mango";
let fruit3 = "Banana";
let fruit4 = "Orange";
let fruit5 = "Grapes";

This works... but it already start feels messy. What if you want to add more fruits later? What if you want to loop through them or want to update one of them? And if later you want to print all fruits, you would have to write:

console.log(fruit1);
console.log(fruit2);
console.log(fruit3);
console.log(fruit4);
console.log(fruit5);

That’s a lot of repetition for something that should be simple. Managing many individual variables quickly becomes difficult. And this is exactly the proble arrays solve. Arrays allow us to store multiple values together in one place instead of creating separate variables for each value.

---

What Are Arrays?

An array is simply a way to store multiple values together in a single variable. Instead of creating many variables, we store everything in one place. Think of an array like a list for ex- a list of fruits, student marks, tasks, movies.... All of these are perfect use cases for arrays.

In JavaScript an array keeps values in order, and each value has a position. That position is called an index.

---

How to Create an Array

Creating an aray in JavaScript is very simple. We use square brackets []

const fruits = ["Apple", "Mango", "Banana", "Orange"];

Here we created an array called furits inside those brackets, we place the values separated by commas. So this array contains four values.

Apple
Mango
Banana
Orange

Instead of creating four separate variables, everything is now inside one array.

See simple that's it...

---

Understanding Array Index

Now here's an important concept. In JavaScript array indexing starts from 0, not 1. This sometimes surprises beginners.

const fruits = ["Apple", "Mango", "Banana", "Orange"];

Internally it looks something like this:

Index     Value
0         Apple
1         Mango
2         Banana
3         Orange

So the first element is at index 0, the second at 1, & so on...

---

Accessing Elements from an Array

Now the question is how do we get a value from the array?
We use the index.

const fruits = ["Apple", "Mango", "Banana", "Orange"];

console.log(fruits[0]); // Apple

Why?
Because index 0 stores "Apple"

let's try another one:

console.log(fruits[2]); // Banana

because "Banana" is stored at index 2. So whenever we want to access an element from an array, we simply use:

arrayName[index]

---

Updading Elements in an Array

Arrays are not fixed. We can change values whenever we want.

const fruits = ["Apple", "Mango", "Banana", "Orange"];

Now suppose we want to replace "Banana" with "Pineapple" we just update that index.

fruits[2] = "Pineapple";

Now if we print the array:

console.log(fruits);

Output:

["Apple", "Mango", "Pineapple", "Orange"]

So the value at index 2 has changed. This makes arrays very flexible.

---

The Array Length Property

So here's another useful thing about arrays is the length property. It tells us how many elments are inside the array.

const fruits = ["Apple", "Mango", "Banana", "Orange"];

console.log(fruits.length); // 4

because the array contains four items. this becomes very useful when working with loops. Instead of manually counting items, we can simply chech .length

---

Looping Through an Array

Often we don't wnat just one element. We want to go through all elements in the array. This is where loops become helpful.

Let's say we want to print all fruits.

const fruits = ["Apple", "Mango", "Banana", "Orange"];

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

Now let's understant what's happening there. i starts from 0 Then the loop continues until i becomes equal to the array length

Inside the loop we print:

fruits[i]

which means

fruits[0] // Apple
fruits[1] // Mango
fruits[2] // Banana
fruits[3] // Orange

So the loop goes through the array's one element at a time. This is one of the most common ways arrays are used.

---

Assignment Practice

Let's try a small exercise to practice what we have learned so far.

1. Create an array of 5 favorite movies

const movies = ["Daredevil", "Money Heist", "Avengers", "Dark", "Joker"];

2. Print the first and last element

console.log(movies[0]); 
console.log(movies[movies.length - 1]);

Why length - 1?
Because arrays start from index 0. So the last element is always length minus one.

3. Change one value in the array

movies[2] = "Spider-Man";

console.log(movies);

4. Loop through the array

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

This prints every movie in the array.

---

Final Understanding

Arrays are one of the most important data structure in JavaScript. They allow us to store multiple values in a single variable, keep them in order and access them using indexes.

Instead of creating many separate variables, arrays let us organize data in a simple and structured way. Once you understand arrays, you can start doing much more powerful things in JavaScript like looping through data, processing lists, and working with real world datasets.

And honestly once you start using array regularly... you'll realize they appear everywhere in programming.