Beginner25 min read

Arrays

Master JavaScript arrays — creating, accessing, modifying, and iterating over collections of data.

Creating Arrays

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:

javascript
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:

javascript
const mixed = ['hello', 42, true, null, [1, 2]];

Arrays inside arrays are called nested arrays (or multidimensional arrays):

javascript
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:

javascript
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():

javascript
Array.isArray([1, 2, 3]); // true
Array.isArray('hello');   // false
Array.isArray({ a: 1 });  // false

This is more reliable than typeof, which returns 'object' for arrays.

Accessing & Modifying

Arrays use zero-based indexing. The first element is at index 0, the second at index 1, and so on:

javascript
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:

javascript
console.log(fruits.length); // 3

You can access the last element using length - 1:

javascript
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:
    javascript
    fruits.push('date');       // ['apple', 'banana', 'cherry', 'date']
  • pop() — removes the last element and returns it:
    javascript
    const last = fruits.pop(); // 'date', array is now ['apple', 'banana', 'cherry']
  • unshift() — adds one or more elements to the beginning:
    javascript
    fruits.unshift('avocado'); // ['avocado', 'apple', 'banana', 'cherry']
  • shift() — removes the first element and returns it:
    javascript
    const first = fruits.shift(); // 'avocado'

For more precise control, splice() can insert, remove, or replace elements at any position:

javascript
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:

javascript
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] — unchanged

Iterating Over Arrays

You 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:

javascript
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:

javascript
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:

javascript
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:

javascript
// 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.

Arrays in Action

html
<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?

Ready to practice?

Create your free account to access the interactive code editor, run challenges, and track your progress.