JavaScript Arrays

By the end of this lesson, you will be able to create JavaScript arrays, access and change their values by index, and use common array methods to manage ordered lists.

What it is

A JavaScript array is an ordered list of values. Each value is stored at a numeric position called an index. Arrays are zero-indexed, which means the first item is at index 0, the second at index 1, and so on.

You can think of an array like a row of numbered boxes. The boxes can hold strings, numbers, booleans, objects, functions, or even other arrays. The array also has a length property that tells you how many items are currently in the list.

Related terms include index, element, length, push, pop, includes, and splice.

Why it matters

• Arrays let you store many related values in one variable instead of creating separate variables.
• They are useful for lists such as tasks, products, users, scores, or search results.
• JavaScript provides built-in methods for adding, removing, searching, and transforming array items.
• Arrays work naturally with loops, which makes repetitive tasks easier to automate.
• They are the foundation for more advanced data handling, including filtering, mapping, and reducing data.

Syntax or steps

1. Create an array using square brackets: const list = [1, 2, 3];
2. Read an item by index: list[0] returns the first item.
3. Change an item by assigning to an index: list[1] = 99;
4. Add an item to the end with push().
5. Remove the last item with pop().
6. Check whether an item exists with includes().

Example

const tasks = ["buy milk", "write lesson", "call mom"];

console.log(tasks[0]);
console.log(tasks.length);

tasks.push("read docs");
console.log(tasks);

const lastTask = tasks.pop();
console.log(lastTask);
console.log(tasks);

console.log(tasks.includes("write lesson"));

This example creates an array of task strings. tasks[0] reads the first task. tasks.length shows how many tasks are in the array. tasks.push("read docs") adds a new task to the end. tasks.pop() removes the last task and returns it. Finally, tasks.includes("write lesson") checks whether a specific task is still in the array.

The expected output is:

buy milk
3
[ 'buy milk', 'write lesson', 'call mom', 'read docs' ]
read docs
[ 'buy milk', 'write lesson', 'call mom' ]
true

Common mistakes

• Assuming indexes start at 1. JavaScript arrays start at 0. If you want the first item, use array[0], not array[1].
• Using length as the last index. The last valid index is array.length - 1. Accessing array[array.length] returns undefined.
• Changing an array when you only wanted a copy. Methods like push() and pop() modify the original array. Use slice() or other copying techniques when you need a separate list.
• Using arrays for key-value data. If each item has a name or identifier, an object may be clearer than an array.

When to use it

Use arrays when order matters and you need a list of items. Use objects when you need named properties or key-value pairs.

Practice

Guided exercise: Create an array called numbers containing 10, 20, and 30. Add 40 to the end, remove the last item, and log the array length.

Expected output after the final log: 3.

Challenge: Given const scores = [85, 92, 78, 90];, change the second score to 95 and log the array.

Solution hint: assign a new value to index 1 using scores[1] = 95;.

Quick check

What does [1, 2, 3].length return?

It returns 3, because the array contains three elements.

Summary

JavaScript arrays are ordered, zero-indexed collections that are ideal for lists of related values. They support simple access by index and powerful built-in methods for adding, removing, and checking items. Choose arrays when order and list operations matter, and choose objects when named properties are more important.