JavaScript Arrays 101

When learning JavaScript, one situation appears very quickly: sometimes we need to store multiple values together. If we try to store every value in separate variables, the code becomes messy and difficult to manage.

For example, imagine storing marks of five subjects like this:

let mark1 = 78;
let mark2 = 82;
let mark3 = 90;
let mark4 = 66;
let mark5 = 88;

This works, but it is not very convenient. If the number of values increases, managing them becomes harder.

This is where arrays become useful.

What Arrays Are and Why We Need Them

An array is a structure used to store multiple values in a single variable.

Instead of creating many variables, an array allows us to keep everything together in an ordered collection.

Example:

let marks = [78, 82, 90, 66, 88];

Now all the values are stored in one variable called marks.

Arrays are useful whenever we need to store:

• a list of numbers

• a list of names

• a list of tasks

• a list of movies

Basically, whenever there is a group of related values, arrays are a good solution.

How to Create an Array

Arrays are created using square brackets [ ].

Inside the brackets we place the values separated by commas.

Example:

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

This array contains four elements.

Arrays can store different types of values as well.

Example:

let data = ["Ali", 21, true];

But usually arrays store similar types of values to keep things clear.

Accessing Elements Using Index

Every element in an array has a position number called an index.

One important thing to remember is that array indexing starts from 0.

Example array:

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

The indexes look like this:

Apple   → index 0
Banana  → index 1
Mango   → index 2
Orange  → index 3

To access an element, we use the index.

Example:

console.log(fruits[0]);

Output:

Apple

Another example:

console.log(fruits[2]);

Output:

Mango

So the syntax is:

arrayName[index]

Updating Elements in an Array

Array values can also be changed easily.

Example:

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

Suppose we want to change "Banana" to "Grapes".

fruits[1] = "Grapes";

console.log(fruits);

Updated array:

["Apple", "Grapes", "Mango"]

Here we replaced the value at index 1.

The Array Length Property

JavaScript provides a useful property called length.

It tells us how many elements exist in the array.

Example:

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

console.log(fruits.length);

Output:

4

This is especially useful when looping through arrays.

Another useful trick is finding the last element of an array.

Example:

fruits[fruits.length - 1]

This gives the last value in the array.

Looping Over Arrays

Often we want to access every element in an array. For that we can use a loop.

A simple for loop works well.

Example:

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

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

Output:

Apple
Banana
Mango
Orange

How this works:

1. The loop starts from index 0

2. It continues until it reaches the array length

3. Each iteration prints the current element

This allows us to process every value in the array.

Assignment for Practice

To understand arrays better, try this small exercise.

1. Create an Array of 5 Fruits

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

2. Print the First and Last Element

console.log(fruits[0]);

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

Example output:

Apple
Grapes

3. Change One Value

fruits[2] = "Pineapple";

console.log(fruits);

Updated array:

["Apple", "Banana", "Pineapple", "Orange", "Grapes"]

4. Loop Through the Array

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

Output:

Apple
Banana
Pineapple
Orange
Grapes

Final Thoughts

Arrays are one of the most important structures in JavaScript because they allow us to handle lists of data in an organized way.