JavaScript Arrays 101

When working with JavaScript, you will often need to store multiple values together. For example, you might want to store:

• A list of fruits
• Student marks
• A list of tasks

Instead of creating many separate variables, JavaScript provides a better solution called arrays.

Arrays help us store and manage collections of data efficiently.

In this article, we will learn the basics of arrays in JavaScript and how to work with them.

---

Topics Covered

In this blog we will learn:

• What arrays are and why we need them
• How to create an array
• Accessing elements using an index
• Updating elements in an array
• The length property
• Looping through arrays

---

What Are Arrays?

An array is a data structure that stores multiple values in a single variable.

The values inside an array are stored in a specific order, and each value can be accessed using its index.

Example:

let fruits = ["Apple", "Banana", "Orange"];

Here:

• fruits is the array
• "Apple", "Banana", "Orange" are the elements inside the array

---

Why Do We Need Arrays?

Imagine storing five fruits without using an array.

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

This approach quickly becomes messy and difficult to manage.

Using an array makes the code cleaner and easier to maintain.

let fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];

Now all values are stored inside one variable.

---

How to Create an Array

Arrays are created using square brackets [].

Example:

let numbers = [10, 20, 30, 40];

You can also store different data types in an array.

let data = ["John", 25, true];

---

Understanding Array Index

Each element in an array has a position called an index.

In JavaScript, array indexing starts from 0.

Example:

let fruits = ["Apple", "Banana", "Orange"];

Index	Value
0	Apple
1	Banana
2	Orange

---

Accessing Elements Using Index

We can access elements using their index.

Example:

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[0]);
console.log(fruits[2]);

Output:

Apple
Orange

---

Updating Elements in an Array

You can change any value in an array by using its index.

Example:

let fruits = ["Apple", "Banana", "Orange"];

fruits[1] = "Mango";

console.log(fruits);

Output:

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

Here we replaced "Banana" with "Mango".

---

The Array Length Property

The length property tells us how many elements are inside the array.

Example:

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.length);

Output:

3

The length property is often useful when looping through arrays.

---

Looping Through Arrays

Sometimes we want to print or process every element in an array.

We can do this using a loop.

Example using a for loop:

let fruits = ["Apple", "Banana", "Orange"];

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

Output:

Apple
Banana
Orange

This loop goes through each element of the array one by one.

---

Assignment Example

Let’s apply what we learned.

Step 1: Create an array of 5 favorite movies

let movies = ["Inception", "Interstellar", "Avengers", "Titanic", "Joker"];

Step 2: Print the first and last movie

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

Step 3: Change one value

movies[2] = "The Dark Knight";
console.log(movies);

Step 4: Loop through the array

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

---

Visualizing an Array

You can imagine an array like a row of boxes.

Index:   0        1        2
       -------------------------
Value: | Apple | Banana | Orange |
       -------------------------

Each value is stored at a specific index position.

---

Final Thoughts

Arrays are one of the most commonly used data structures in JavaScript.

They help us:

• Store multiple values in one place
• Access elements using indexes
• Easily loop through data

Once you understand arrays well, you will be able to work with larger datasets and write cleaner and more efficient JavaScript programs.

---