JavaScript Arrays 101

What Arrays Are and Why We Need Them?

When writing programs, we often need to store multiple related values. Imagine keeping a list of your favorite movies, a list of marks, or a list of daily tasks. If you stored each value in a separate variable, your code would quickly become messy.

For example:

let movie1 = "Inception";
let movie2 = "Interstellar";
let movie3 = "The Dark Knight";

This works for a few values, but it becomes difficult to manage as the list grows. Arrays solve this problem by allowing you to store multiple values in a single structure.

An array is simply a collection of values stored in order. Each value inside the array has a position, which allows you to access it later.

How to Create an Array?

Creating an array in JavaScript is simple. You use square brackets and place values inside them, separated by commas.

Example:

let movies = ["Inception", "Interstellar", "The Dark Knight", "Avatar", "Titanic"];

Here, the variable movies holds a list of five movie titles. Instead of managing five separate variables, everything is stored in one organized structure.

Arrays can store different types of values, but most of the time they contain values of the same kind, like a list of numbers or names.

Accessing Elements Using Index

Each item in an array has a position called an index. In JavaScript, indexing starts from 0, not 1.

This means the first element has index 0, the second has index 1, and so on.

Example:

console.log(movies[0]);

Output:

Inception

If you want to access the third movie:

console.log(movies[2]);

Output:

The Dark Knight

Because indexing starts at 0, the position number is always one less than the element's order.

To get the last element:

console.log(movies[4]);

Updating Elements

Array values can be changed by assigning a new value to a specific index.

Example:

movies[2] = "Oppenheimer";

Now the array becomes:

["Inception", "Interstellar", "Oppenheimer", "Avatar", "Titanic"]

You can verify this by printing the array.

console.log(movies);

Updating elements like this allows arrays to change as your program runs.

Array Length Property

JavaScript provides a built-in property called length that tells you how many elements are in an array.

Example:

console.log(movies.length);

Output:

5

This property becomes especially useful when looping through arrays, because it tells the program when to stop.

Basic Looping Over Arrays

Often you need to go through each element in an array and perform some action. A simple for loop can be used for this.

Example:

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

Here’s what happens step by step. The loop starts with i = 0, which represents the first index. The program prints the element at that position. Then i increases by one each time until it reaches the end of the array.

This loop will print every movie in the list.

Example Putting Everything Together

Let’s combine everything we learned.

let movies = ["Inception", "Interstellar", "The Dark Knight", "Avatar", "Titanic"];

console.log("First movie:", movies[0]);
console.log("Last movie:", movies[movies.length - 1]);

movies[1] = "Oppenheimer";

console.log("Updated array:", movies);

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

Above example creates an array, accesses elements, updates one value, and loops through all the elements.