Exploring Arrays in JavaScript: Creating, Accessing, and Changing Values

An array is a special type of variable. It doesn't just store one value; it stores a list of values. Arrays come in handy whenever you're dealing with a list or a group of values that are related to each other.

Arrays are helpful when you're uncertain about the number of items a list will include. When you create an array, there's no need to specify how many values it will hold. Instead of creating a lot of variables for a long list, opting for an array is often a more better approach.

For example, an array can be suited to storing the individual items on a shopping list because it is a list of related items.

In this article, we'll explore how to work with arrays, covering everything from their creation to modifying their contents.

Creating an array

Creating an array is similar to creating any other variable – you provide it with a name.

let colors;

The values are assigned to the array inside a pair of square brackets, and each value is separated by a comma. This method of creating an array is called an array literal. It's commonly the preferred approach for creating arrays.

colors = ["white", "black", "red"];

The array's values can be of different data types – you can store a string, a number, and a boolean all within the same array.

You can also use a different technique called an array constructor. This involves using the new keyword followed by Array(). The values are then listed in parentheses (not square brackets), with each value separated by a comma.

let colors = new Array("white ", "black", "red");

Accessing values in an array

Values in an array are accessed as if they are in a numbered list. The numbering of this list starts at zero (not one).

Each item in an array is automatically assigned a number called an index. This can be used to access specific items within the array. For instance, take a look at the following array containing three colors:

let colors = ["white", "black", "red"];

The table below displays items from the array along with their corresponding index values:

To fetch the third item from the list, you mention the array name followed by the index number enclosed in square brackets.

let itemThree = colors[2];

Each array also has a property called length, which holds the number of items in the array. To access this property, use the array's name followed by a period and then the word length.

let numColors = colors.length;

Changing the values in an array

You can change the value of an item an array by selecting it and assigning it a new value just as you would any other variable. Use the equal sign followed by the new value for that specific item.

colors[2] = "yellow";