Master JavaScript arrays — creating, accessing, modifying, and iterating over collections of data.
An array is an ordered collection of values. It is one of the most fundamental data structures in JavaScript and is used whenever you need to store a list of items.
The most common way to create an array is with an array literal — square brackets containing comma-separated values:
const colors = ['red', 'green', 'blue'];
const numbers = [1, 2, 3, 4, 5];
const empty = [];JavaScript arrays can hold mixed types — numbers, strings, booleans, objects, even other arrays:
const mixed = ['hello', 42, true, null, [1, 2]];Arrays inside arrays are called nested arrays (or multidimensional arrays):
const grid = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
console.log(grid[1][2]); // 6 (row 1, column 2)You can also create arrays with the Array() constructor, but the literal syntax is almost always preferred:
const arr = new Array(3); // Creates [empty x 3] — often not what you want!
const arr2 = Array.of(1, 2, 3); // [1, 2, 3]To check whether a value is an array, use Array.isArray():
Array.isArray([1, 2, 3]); // true
Array.isArray('hello'); // false
Array.isArray({ a: 1 }); // falseThis is more reliable than typeof, which returns 'object' for arrays.
Arrays use zero-based indexing. The first element is at index 0, the second at index 1, and so on:
const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'cherry'
console.log(fruits[3]); // undefined (out of bounds)The .length property tells you how many elements the array contains:
console.log(fruits.length); // 3You can access the last element using length - 1:
console.log(fruits[fruits.length - 1]); // 'cherry'JavaScript provides several methods for adding and removing elements:
push() — adds one or more elements to the end:
fruits.push('date'); // ['apple', 'banana', 'cherry', 'date']pop() — removes the last element and returns it:
const last = fruits.pop(); // 'date', array is now ['apple', 'banana', 'cherry']unshift() — adds one or more elements to the beginning:
fruits.unshift('avocado'); // ['avocado', 'apple', 'banana', 'cherry']shift() — removes the first element and returns it:
const first = fruits.shift(); // 'avocado'For more precise control, splice() can insert, remove, or replace elements at any position:
const nums = [1, 2, 3, 4, 5];
nums.splice(2, 1); // Remove 1 element at index 2 → [1, 2, 4, 5]
nums.splice(1, 0, 99); // Insert 99 at index 1 → [1, 99, 2, 4, 5]
nums.splice(0, 2, 10, 20); // Replace first 2 elements → [10, 20, 2, 4, 5]To create a copy of an array (rather than a reference), use the spread operator:
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] — unchangedYou will frequently need to loop through every element in an array. JavaScript offers several ways to do this:
1. for loop with index — the classic approach, gives you full control over the index:
const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
console.log(i, colors[i]);
}
// 0 'red'
// 1 'green'
// 2 'blue'Use this when you need the index, want to skip elements, or need to iterate in reverse.
2. for...of loop — a cleaner syntax when you only need the values:
for (const color of colors) {
console.log(color);
}
// 'red'
// 'green'
// 'blue'This is the recommended loop for most array iteration. It is concise, readable, and works with any iterable.
3. forEach method — calls a function for each element:
colors.forEach(function(color, index) {
console.log(index, color);
});forEach is useful when you want to use a callback style, but note that you cannot break out of a forEach loop (unlike for and for...of).
Avoid for...in for arrays. The for...in loop is designed for iterating over object properties, not array elements. It iterates over string keys (including inherited ones), which can produce unexpected results:
// Don't do this with arrays!
for (const key in colors) {
console.log(key); // '0', '1', '2' — strings, not numbers
}Use for...in for objects and for...of for arrays.
<h2>Shopping List</h2>
<ul id="list"></ul>
<p id="count"></p>
<script>
const groceries = ['Milk', 'Eggs', 'Bread', 'Butter', 'Cheese'];
// Build a list from the array
const list = document.getElementById('list');
for (const item of groceries) {
const li = document.createElement('li');
li.textContent = item;
list.appendChild(li);
}
// Display the count
document.getElementById('count').textContent =
'Total items: ' + groceries.length;
</script>What does [1, 2, 3].length return?