JavaScript Arrays

In the previous articles, we learned how to store data using variables, perform operations using operators, control program flow using conditions, and organize reusable logic using functions.

But as programs grow larger, another interesting challenge appears.

What if we need to store multiple related values together?

Let’s take a simple example. Imagine we want to store the names of our five favorite movies.

We could write something like this:

let movie1 = "Inception";
let movie2 = "Interstellar";
let movie3 = "The Dark Knight";
let movie4 = "Avatar";
let movie5 = "Titanic";

This works perfectly fine, right? But notice something here. If we want to store more movies, we would need to keep creating more variables.

Very quickly, the code becomes long and difficult to manage. Creating a separate variable for each value would be extremely messy.

So the natural question becomes:

Is there a way to store multiple values together in a single variable?

And the answer is: Yes — and this is exactly where Arrays come in.

In this article, we will learn:

• What arrays are

• How to create an array

• How to access elements using index

• How to update values inside an array

• How to use the length property

• And how to loop through array elements

Let’s start by understanding what arrays actually are.

---

What is an Array?

An array is a data structure that allows us to store multiple values inside a single variable. Instead of creating many separate variables, we can store all the values together in one place.

Let’s take a simple example.

Suppose we want to store a list of fruits. This is how we will store them using an array:

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

Here, instead of using four separate variables, we stored all the fruit names inside a single array called fruits.

You can think of an array as a list of values stored in order. Each value inside the array is called an element.

For example, in the array:

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

Apple, Banana, Mango and Orange are called elements of the array fruits.

Now, let us learn how we can create an array in JavaScript.

---

How to Create an Array?

In JavaScript, the most common way to create an array is by using square brackets []. Inside these brackets, we place the values we want to store, separated by commas.

Here is a simple example:

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

Let’s understand what is happening here.

• const fruits creates a variable named fruits

• [ ] indicates that we are creating an array

• the values inside the brackets are called elements of the array

JavaScript Arrays Can Store Different Types of Values

JavaScript Arrays are very flexible. They can store numbers, strings, booleans, or even a mix of different types.

For example:

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

const mixedValues = ["Apple", 25, true];

Here:

• numbers stores only numbers

• mixedValues stores different types of values

However, in most real programs, arrays usually store similar types of data to keep things organized.

Now that we know how to create an array, the next question is:

How do we access individual values inside an array?

To do that, we need to understand something called array indexing.

---

Accessing Elements Using Index

To access individual an element of an array, JavaScript uses something called an index.

But here is something important to remember:

In JavaScript, array indexing starts from 0.

Let’s take our fruits array again.

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

Internally, JavaScript stores these values with positions like this:

So:

• "Apple" is at index 0

• "Banana" is at index 1

• "Mango" is at index 2

• "Orange" is at index 3

Now, to access a specific element, we use square bracket notation with the index.

Example:

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

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

Output:

Apple
Banana
Mango
Orange

Here’s what is happening:

• fruits[0] accesses the element at index 0

• fruits[1] accesses the element at index 1

• fruits[2] accesses the element at index 2

• fruits[3] accesses the element at index 3

Now what if we try to access an index that does not exist?

If we try to access an index that does not exist, JavaScript returns undefined.

Example:

console.log(fruits[10]);

Output:

undefined

This happens because there is no element stored at index 10.

---

Understanding indexing is important because almost every array operation depends on it.

Now that we know how to access elements, the next question is:

Can we change or update values inside an array?

Let’s explore that in the next section.

---

Updating Elements in an Array

In JavaScript, we can update an element in an array by assigning a new value to its index.

Let’s take our fruits array again.

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

Suppose we want to change "Banana" to "Pineapple". How can we do this?

We can do this using its index. Let's take a look:

fruits[1] = "Pineapple";

Now if we print the array:

console.log(fruits);

Output:

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

What happened here?

• "Banana" was stored at index 1

• We replaced that value with "Pineapple"

So the updated array now contains the new value. This shows that array elements can be modified using their index.

---

The Array length Property

When working with arrays, it is often useful to know how many elements the array contains.

For that purpose, JavaScript provides a built-in property called length. The length property tells us the total number of elements present in an array.

Let's look at an example:

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

console.log(fruits.length);

Output:

4

The result is 4 because the array contains four elements.

Remember this important idea:

The index starts from 0, but the length counts the total number of elements.

This is why the length is always one more than the last index.

---

The length property becomes especially useful when we want to go through all elements of an array, which is something we often do in programming. To do that, we usually use something called a loop.

Let’s see a simple example of looping through an array in the next section.

---

Looping Through an Array

In many programs, we often need to work with every element inside an array.

For example, imagine we want to print all the fruits stored in our array. One way to do this would be writing:

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

This works, but it quickly becomes inefficient, especially if the array contains many elements.

So instead of writing multiple lines manually, we can use something called a loop.

A loop allows us to repeat a piece of code multiple times.

Let’s see a simple example.

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

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

The variable i represents the index of the array element, which increases on every iteration.

Output:

Apple
Banana
Mango
Orange

This way, we can process every element in the array automatically, no matter how large the array is.

Don't worry if loops feel slightly unfamiliar right now. In the next article, we will explore loops in JavaScript in detail.

---

Practice Time

Now it’s your turn to experiment with arrays.

1. Create an Array

Create an array that stores five of your favorite movies.

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

2. Print the First and Last Element

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

3. Update One Value

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

movies[2] = "The Dark Knight";

console.log(movies);

4. Loop Through the Array

Use a loop to print all the elements.

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

Try running these examples yourself and experiment by changing the values inside the array.

---

Wrapping Up

In this article, we explored arrays in JavaScript, one of the most important data structures in programming.

We learned:

• What arrays are and why they are useful

• How to create an array

• How to access elements using index

• How to update values inside an array

• How to use the length property

• And how to loop through array elements

Arrays make it much easier to work with multiple related values without creating many separate variables.

Understanding arrays is an important step toward writing more structured and scalable programs.

---

What's Next?

In this article, we briefly used something called a loop to go through the elements of an array.

Loops allow us to repeat a piece of code multiple times, which becomes extremely useful when working with arrays or large collections of data.

In the next article, we will explore Loops in JavaScript, where we’ll learn how loops work and how they help automate repetitive tasks in programming.

---

⬅ Previous Article: Arrow Functions in JavaScript

➡ Next Article: Loops in JavaScript