13. JavaScript Arrays

What you will learn

• What an array is and how to create one
• How to read and change items by position
• How to add and remove items
• How to loop through an array

What is an array?

An array is an ordered list of values stored in one variable. Use it whenever you have a collection, such as course names, prices, or scores.

Creating an array

Write the items inside square brackets, separated by commas.

<p id="demo"></p>

<script>
  const courses = ["HTML", "CSS", "JavaScript"];
  document.getElementById("demo").textContent =
    "First: " + courses[0] + ", length: " + courses.length;
</script>

Each item has an index, its position, which starts at 0. The last item is at length - 1. An array can hold any mix of types.

Changing items

<p id="demo"></p>

<script>
  const fruits = ["Apple", "Banana", "Cherry"];
  fruits[1] = "Blueberry";
  document.getElementById("demo").textContent = fruits.join(", ");
</script>

join() turns an array into text, with the separator you choose.

Adding and removing items

<p id="demo"></p>

<script>
  const list = ["b", "c"];
  list.push("d");       // b, c, d
  list.unshift("a");    // a, b, c, d
  const last = list.pop();   // removes d
  list.splice(1, 1);    // removes the item at index 1 (b)

  document.getElementById("demo").textContent =
    "List: " + list.join(", ") + " | popped: " + last;
</script>

Looping through an array

<ul id="demo"></ul>

<script>
  const tools = ["Editor", "Browser", "Terminal"];
  let html = "";

  for (const tool of tools) {
    html += "<li>" + tool + "</li>";
  }

  document.getElementById("demo").innerHTML = html;
</script>

Use a regular for loop when you need the index, and for...of when you only need the values.

Finding items

<p id="demo"></p>

<script>
  const colors = ["red", "green", "blue"];
  document.getElementById("demo").innerHTML =
    "includes('green'): " + colors.includes("green") + "<br>" +
    "indexOf('blue'): " + colors.indexOf("blue") + "<br>" +
    "indexOf('pink'): " + colors.indexOf("pink") + " (-1 means not found)";
</script>

Checking for an array

typeof reports object for arrays, so use Array.isArray(value) to be sure.

Common mistakes

• Counting from 1. The first item is at index 0.
• Reading past the end, which gives undefined.
• Thinking const makes the contents unchangeable.
• Confusing splice (changes the array) with slice (returns a copy of part).
• Copying with const b = a. Both names then point to the same array.

<p id="demo"></p>

<script>
  const todo = ["Wash up", "Study"];
  todo.push("Exercise");
  todo.shift();
  document.getElementById("demo").textContent = todo.join(" | ");
</script>

Summary

• Arrays are ordered lists with positions that start at 0.
• Use push, pop, shift, unshift, and splice to change them.
• Loop with for...of, and search with includes and indexOf.