An array is an ordered structure that stores multiple values under one identifier. Each individual value is referred to as an element, and an element may be any valid JavaScript type—such as a string, number, boolean, or object.
Creating Arrays
There are two common ways to instantiate an array: the Array constructor and the array literal syntax.
Using the constructor:
const basket = new Array();
The word Array must be capitalized. While functional, this pattern is rarely used in modern development.
The literal form consists of square brackets and is the standard approach:
const empty = [];
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
Declaring a variable and assigning bracketed values in the same statement is called array initialization. This literal style is recommended for its brevity and clarity.
JavaScript arrays are heterogeneous, meaning they can store mixed types simultaneously:
const entry = ['Sarah', 28, false, 102.4];
Accessing Elements by Index
Elements are positioned by numeric indices that begin at zero. The first item is at index 0, the second at 1, and so on.
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
// index: 0 1 2 3
You can retrieve or modify an element using the bracket notation arrayName[index]:
const levels = [10, 20, 30];
console.log(levels[1]); // 20
Traversing Arrays
To process every element from start to finish, use an iteration construct:
const steps = ['alpha', 'beta', 'gamma'];
for (let idx = 0; idx < steps.length; idx++) {
console.log(steps[idx]);
}
On each cycle, the counter advances by one, exposing the next element until the loop reaches the final index.
Adding New Elmeents
Extending the length Property
Because length is writable, you can manually enlarge the array. New positions that receive no explicit value contain undefined:
const tags = ['html', 'css'];
tags.length = 5;
console.log(tags); // ['html', 'css', empty × 3]
console.log(tags[3]); // undefined
Assigning via Index
Appending data by targeting an index is the most common technique. Set a value at the next open position, or at any higher index, to grow the array:
const tags = ['html', 'css'];
tags[2] = 'javascript';
console.log(tags); // ['html', 'css', 'javascript']
Never assign directly to the array variable with a non-indexed value, because doing so overwrites the entire structure rather than inserting an item.
Implementing Bubble Sort
Bubble sort is a classic introductory algorithm that orders values by repeatedly comparing neighboring elements. If a pair is out of order, the two values are swapped. These passes continue until a complete traversal requires no exchanges, confirming the sequence is sorted.
const data = [7, 3, 9, 2, 5];
for (let round = 0; round < data.length - 1; round++) {
for (let cursor = 0; cursor < data.length - round - 1; cursor++) {
if (data[cursor] > data[cursor + 1]) {
let buffer = data[cursor];
data[cursor] = data[cursor + 1];
data[cursor + 1] = buffer;
}
}
}
The outer loop governs the number of passes, while the inner loop handles the pairwise comparisons. Because each pass places the next largest element in its correct final location, the inner bound shrinks with every completed round.