Understanding Arrays in JavaScript

Hello readers! 👋

When learning programming, we often need to store multiple related values. For example, a list of fruits, daily tasks, or students' marks.

One way to store them is by creating separate variables for each value. However, as the number of values grows, this approach quickly becomes difficult to manage.

This is where arrays come in. Arrays allow us to store multiple values inside a single variable while keeping them organized and easy to access.

In this article, we’ll understand what arrays are, why we need them, and how to work with arrays in JavaScript using simple examples.

What Is an Array?

An array is a special variable that can hold multiple values in a single variable. These values are stored in a specific order.

Example:

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

Here:

• fruits is the array

• "Apple", "Banana", and "Mango" are elements inside the array

You can think of an array as a list of items stored together.

Why Do We Need Arrays?

Imagine you have 5 fruits. Without an array, you would have to write something like this:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";

This works, but imagine storing 50 fruits like this. It quickly becomes messy and hard to manage.

Arrays solve this problem by allowing us to store multiple related values in a single variable.

For example:

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

How to Create an Array

In JavaScript, arrays are created using square brackets [].

Example:

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

const tasks = ["Study", "Exercise", "Code"];

Arrays can also store different types of values in JavaScript:

const mixed = ["JS", 2026, true, {name: "dnano"}, undefined, null];

Other Ways to Create Arrays

1. Using the Array Constructor

const marks = new Array(80, 90, 70);

1. Using Array.of()

const numbers = Array.of(10, 20);

Both of these methods also create arrays, although using square brackets [] is the most common and recommended way.

Accessing Elements Using Index

Each value inside an array has a position called an index.

In JavaScript, array indexing starts from 0. This means the first element is at position 0, the second at 1, and so on.

Example:

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

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango

So the index positions look like this:

• Index	Value
  0	Apple
  1	Banana
  2	Mango

Updating Elements

You can update an element in an array by using its index.

Example:

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

fruits[1] = "Orange";

console.log(fruits);

Output:

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

Here we updated the value at index 1.

Visualization:

Array Length Property

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

Example:

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

console.log(fruits.length);

Output:

3

This property is very useful when working with loops.

Looping Over Arrays

We often need to go through each element in an array. A common way to do this is using a for loop.

Example:

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

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

Output:

Apple
Banana
Mango

The loop runs until it reaches the length of the array.

Practice Exercise

Now that we understand how arrays work, try solving this small exercise.

Create an array of 5 of your favorite movies and perform the following tasks:

1. Print the first element of the array

2. Print the last element of the array

3. Change one movie in the array and print the updated array

4. Loop through the array and print all the movies

Example starter code:

const movies = ["Inception", "Interstellar", "Avengers", "Joker", "Avatar"];

// Print first movie

// Print last movie

// Change one movie

// Loop through the array

Try solving it yourself before looking at the solution.

const movies = ["Inception", "Interstellar", "Avengers", "Joker", "Avatar"];

console.log(movies[0]); // first movie
console.log(movies[movies.length - 1]); // last movie
movies[2] = "The Dark Knight";
console.log(movies);
for (let i = 0; i < movies.length; i++) {
  console.log(movies[i]);
}

Conclusion

Arrays are an important part of programming because they allow us to store multiple values in a single variable. They help keep data organized and make it easier to work with groups of related values.

Once you understand arrays, handling lists of data and looping through them becomes much easier.

In the next article, we’ll explore common array methods like push(), pop(), and how to add or remove elements from arrays.

Thanks for reading!