JavaScript Simplified · One concept, one day, one project · Day 10 of 32

Arrays

Holding many values under one name, in order. You build a shopping list and learn to read and change any item in it.

By the end of today you can

Create an array and understand its order
Read a value by its index, remembering indexes start at 0
Change a value and read how many items a list has
Build a shopping list

A variable holds one value. But most real information comes in lists: items in a cart, students in a class, messages in a chat. An array is a single name that holds many values, kept in order.

1. What an Array Is

Definition

An array is an ordered list of values, written in square brackets and separated by commas. The whole list lives under one variable name.

What this code doesOne variable, three values, in order. The square brackets make it an array.

app.js

1
2

const fruits = ["apple", "banana", "mango"];
console.log(fruits);

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 'apple', 'banana', 'mango' ]

2. Index: reading one value

Definition

Each item has a position called its index. Indexes start at 0, not 1. So the first item is index 0, the second is index 1, and so on. You read an item with its index in square brackets.

What this code doesfruits[0] is "apple", the first item. The index is one less than the position, because counting starts at 0. This trips up every beginner once, then never again.

app.js

const fruits = ["apple", "banana", "mango"];
console.log(fruits[0]); // first item
console.log(fruits[1]); // second item
console.log(fruits[2]); // third item

OUTPUT   TERMINAL

➜ webbo3 node app.js
apple
banana
mango

Indexes start at 0

The first item is index 0, so in a list of three items the last index is 2, not 3. Asking for fruits[3] in a three-item list gives undefined, because there is nothing there.

3. Changing values and counting them

You can replace an item by assigning to its index. And .length tells you how many items are in the array.

What this code doesfruits[1] = "orange" swaps "banana" for "orange". fruits.length is 3: the count of items. Note length is a count, so it is one more than the last index.

app.js

const fruits = ["apple", "banana", "mango"];

fruits[1] = "orange"; // replace the second item
console.log(fruits);
console.log("Items: " + fruits.length);

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 'apple', 'orange', 'mango' ]
Items: 3

Today’s Mini Project

🛒 Shopping List

Create a shopping list as an array, print the whole list, print the first and last items, and show how many things are on it.

What this code doesshopping[shopping.length - 1] is the clean way to get the last item: the last index is always one less than the length, whatever the size.

app.js

const shopping = ["rice", "beans", "oil", "salt"];

console.log("My list: " + shopping);
console.log("First item: " + shopping[0]);
// the last index is always length - 1
console.log("Last item: " + shopping[shopping.length - 1]);
console.log("Total items: " + shopping.length);

OUTPUT   TERMINAL

➜ webbo3 node app.js
My list: rice,beans,oil,salt
First item: rice
Last item: salt
Total items: 4

Challenge (15 minutes)

Replace "salt" with "pepper", add a new item by setting shopping[4] = "yam", then print the list and its new length. Expected: a five-item list ending in yam.

Try This

Make an array of three countries you would like to visit, then print the second one.

Expected: the country at index 1. Remember, index 1 is the second item.

Picture This

A list is everywhere in software: a feed, a cart, a playlist, a leaderboard. You can now hold one under a single name and reach any item by its position. Tomorrow you learn the tools that make lists grow and shrink.

Checkpoint

What index is the first item of an array?

Index 0. Indexes start at 0, so the first item is 0, the second is 1, and the last is length minus 1.

How do you find out how many items an array has?

With .length, for example fruits.length. It is a count, so it is always one more than the last index.

How do you get the last item of any array?

With array[array.length - 1]. The last index is always the length minus one, whatever the size of the array.

Tick Before You Move On

☐ I can create an array and print it
☐ I can read an item by its index, counting from 0
☐ I can change an item and read the length
☐ I built the Shopping List

Quick Recap

An array holds many ordered values under one name. Each item has an index, and indexes start at 0. You read or change an item with its index in square brackets. .length is the count of items, always one more than the last index.

Next: Day 11. Setting items by index is fine, but real lists grow and shrink. Tomorrow you meet array methods that add and remove items for you.

Arrays

1. What an Array Is

Definition

2. Index: reading one value

Definition

3. Changing values and counting them

Today’s Mini Project

Checkpoint

Learn this with a real instructor