Web Development - JavaScript Arrays
JavaScript Arrays
An array stores multiple values in a single variable. You can think of it as a list of items.
Creating an Array
You create an array using square brackets [ ], and separate the items with commas.
Example
Create an array of fruits:
const fruits = ["Apple", "Banana", "Cherry"];
document.getElementById("demo").innerHTML = fruits;
Try it Yourself »
The array fruits holds three values.
Each value has an index number starting from 0.
Accessing Array Elements
You can get a specific value from an array by using its index number inside brackets.
Example
Access the first item in the array:
const fruits = ["Apple", "Banana", "Cherry"];
const first = fruits[0];
document.getElementById("demo").innerHTML = first;
Try it Yourself »
Array indexes start at 0, so the first item is at position 0, the second at 1, and so on.
Changing Array Elements
You can change an element by referring to its index and assigning a new value.
Example
Change an array element:
const fruits = ["Apple", "Banana", "Cherry"];
fruits[1] = "Mango";
document.getElementById("demo").innerHTML = fruits;
Try it Yourself »
This replaces "Banana" with "Mango" in the array.
Note: The array is declared with const, but you can still change its contents. You just cannot reassign the whole fruits variable to a new array.
Array Length
The length property tells you how many items are in the array.
Example
Find the number of items in an array:
const fruits = ["Apple", "Banana", "Cherry", "Mango"];
const count = fruits.length;
document.getElementById("demo").innerHTML = count;
Try it Yourself »
Here, length is 4 because there are four items in the array.
Looping Through Arrays
You can use a for...of loop to go through each item in an array.
Example
List all fruits:
const fruits = ["Apple", "Banana", "Cherry"];
let text = "";
for (const fruit of fruits) {
text += fruit + "<br>";
}
document.getElementById("demo").innerHTML = text;
Try it Yourself »
The for...of loop goes through all items one by one and gives you each value directly.
Tip: For arrays, for...of is a simple and readable way to loop through all values. Use a regular for loop only when you really need the index number.
Adding and Removing Elements
Arrays have built-in methods to add or remove items.
| Method | Description | Example |
|---|---|---|
push() |
Adds an item to the end | fruits.push("Kiwi") |
pop() |
Removes the last item | fruits.pop() |
unshift() |
Adds an item to the beginning | fruits.unshift("Lemon") |
shift() |
Removes the first item | fruits.shift() |
Example
Add and remove items:
const fruits = ["Apple", "Banana"];
fruits.push("Cherry"); // add to end
fruits.unshift("Lemon"); // add to start
document.getElementById("demo").innerHTML = fruits;
Try it Yourself »
After these changes, the array will contain: Lemon, Apple, Banana, Cherry.
Sorting Arrays
You can sort array items alphabetically using sort().
Example
Sort an array alphabetically:
const fruits = ["Banana", "Apple", "Cherry"];
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
Try it Yourself »
The sort() method changes the array to: Apple, Banana, Cherry.
Finding Elements
You can find items in an array with methods like indexOf() and includes().
Example
Check if an item exists:
const fruits = ["Apple", "Banana", "Cherry"];
const result = fruits.includes("Banana");
document.getElementById("demo").innerHTML = result;
Try it Yourself »
This returns true because "Banana" is in the array.
Summary
- Arrays hold multiple values in one variable.
- Access items with
[index](starting from 0). - Use
lengthto count items. - Add or remove with
push(),pop(),shift(), andunshift(). - Loop through arrays using
for...offor simple, readable code. - Sort and search arrays with
sort()andincludes().
Next, you'll learn about JavaScript Objects — how to store data in name:value pairs.
