JavaScript Arrays 101

Remember when we first started learning JavaScript and created a separate variable for every value? That works fine when we are storing just one thing, like a user's name. But what happens when our data grows?

Imagine you want to store your five favorite fruits. Your first instinct might be to write something like this:

let firstFruit = "Apple";
let secondFruit = "Banana";
let thirdFruit = "Mango";
let fourthFruit = "Orange";
let fifthFruit = "Pineapple";

This works, but it quickly becomes messy. What if you want to store 50 fruits? Managing that many variables would be difficult.

It also becomes inconvenient if you want to pass the whole list to a function or loop through all the fruits. You would have to deal with each variable separately.

This is exactly the problem arrays solve. Arrays allow us to store multiple related values inside a single variable, making our code cleaner and easier to manage.

What is an Array?

An array is a special variable that can hold more than one value at a time. Technically speaking, in JavaScript, arrays aren't primitives (like numbers or strings) but are instead Array objects. They enable us to store a collection of multiple items under a single variable name and come with built-in members (properties and methods) for performing common operations.

Think of it as a numbered list or a container that holds a collection of items in a specific order. Instead of having five separate movie variables, you can have one movies variable that holds them all.

Core Characteristics of JavaScript Arrays

Before we dive into the code, there are a few important things to know about how arrays work in JavaScript:

1. They are resizable: You don't have to declare how big an array will be upfront. You can add or remove items whenever you want.

2. They can hold mixed data types: An array can contain numbers, strings, objects, or even other arrays—all at the same time.

3. They are zero-indexed: This is crucial. The first element is at index 0, the second at index 1, and so on. The last element is always at the index of the array's length minus 1.

4. They create shallow copies: When you copy an array using standard methods, it creates a shallow copy. This means that if your array contains other objects (like nested arrays), the copy will still reference the original objects.

Creating an Array

The most common way to create an array is using square brackets [].

Example:

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

Arrays can store different types of values:

let mixedArray = ["Hello", 42, true];

Another way to create an array is using the Array constructor:

const colors = new Array("Red", "Green", "Blue");

However, most developers prefer the square bracket syntax because it is simpler and clearer.

Array Indexing

The real power of arrays comes from how we access the individual items inside them. Each item in an array has a numbered position called its index.

Here's the golden rule that every developer must memorize: Array indices start at 0, not 1. You cannot use arbitrary strings as indexes; you must use non-negative integers.

Let's look at our grocery list:

const groceryList = [
  "Apples",
  "Milk",
  "Bread",
  "Eggs",
  "Chicken"
];

In our groceryList array, the items are stored like this:

Index	Value
0	"Apples"
1	"Milk"
2	"Bread"
3	"Eggs"
4	"Chicken"

Updating Array Elements

You can change a value in an array using its index.

Example:

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

fruits[1] = "Orange";

console.log(fruits);

Output:

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

Here we replaced Banana with Orange.

The .length Property

JavaScript arrays have a built-in property called length.
It tells us how many elements are inside the array.

Example:

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

console.log(fruits.length);

Output:

3

A useful trick is accessing the last element of an array:

const shoppingCart = ["Milk", "Eggs", "Bread", "Butter"];

let lastItem = shoppingCart[shoppingCart.length - 1];

console.log(lastItem); // Butter

A Small Quirk of the .length Property

One interesting thing about the .length property is that it can also be manually changed. When we increase the length, JavaScript expands the array by adding empty slots.

Example:

const arr = [1, 2];

console.log(arr);
// [1, 2]

arr.length = 5;

console.log(arr);
// [1, 2, <3 empty items>]

Originally, the array had 2 elements, so its length was 2.
When we set arr.length = 5, JavaScript increased the size of the array. But instead of filling the new positions with values, it creates empty slots.

The array now looks like this:

Index:   0   1    2     3     4
Value:   1   2  empty empty empty
Length:  5

These empty positions are sometimes called holes in the array.

Looping Over an Array

Storing data is great, but the real magic is being able to work with that data automatically. A for loop is a perfect match for an array.

We use the loop's counter (often named i for "index") to access each array element one by one. We start at 0 and continue while i is less than the array's length.

let movies = ["The Matrix", "Inception", "Oppenheimer", "The Dark Knight", "Parasite"];

console.log("My updated movie list:");
for (let i = 0; i < movies.length; i++) {
    console.log(movies[i]); // This will print each movie on a new line
}

Why is this better?
Imagine if you had 100 movies. With an array and a loop, your code to print them all is still just these 4 lines. Without them, you'd have 100 console.log() statements!

---

Assignment

Try solving the following small problems to practice what you’ve learned about arrays.

Create an Array

Create an array that stores 5 of your favorite movies.

Example structure:

const movies = ["Movie1", "Movie2", "Movie3", "Movie4", "Movie5"];

Print the First and Last Element

Print the first movie and the last movie from the array.

Hint:

• First element → index 0

• Last element → length - 1

Update One Value

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

Example idea:

movies[2] = "New Movie Name";

Loop Through the Array

Use a for loop to print all the movie names in the array.

Example structure:

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

Conclusion

Arrays are a powerful way to store and manage multiple values in a single variable. They help keep our code cleaner and make it easier to work with collections of data.

In this article, we learned how to create arrays, access elements using indexes, update values, use the .length property, and loop through arrays.

Arrays are used everywhere in JavaScript, so understanding them is an important step toward writing better programs.

Happy Coding 💻

---

Reference:

• MDN Web Docs