Creating Arrays in JavaScript

In the previous lesson, we learned how to pass functions as arguments using callbacks. Now let’s learn how to store many values together in a single place using arrays.

📦 What is an Array?

An array is an ordered list of values. Instead of creating a separate variable for every value, we keep them all together under one name. Each value in the array is called an item, and the items stay in the order we put them.

We create an array by writing the values between square brackets [], separated by commas.

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

console.log(fruits); // ["apple", "banana", "cherry"]

Here we made one variable called fruits that holds three values. The square brackets tell JavaScript that this is an array.

🎨 Arrays Can Hold Any Type

An array is not limited to one kind of value. It can hold strings, numbers, booleans, and even a mix of all of them.

const numbers = [10, 20, 30, 40];
const mixed = ["Alex", 25, true, "developer"];

console.log(numbers); // [10, 20, 30, 40]
console.log(mixed); // ["Alex", 25, true, "developer"]

The numbers array holds only numbers, while mixed holds a string, a number, and a boolean all at once.

🔢 Accessing Items by Index

Every item in an array has a position called an index. The index tells us where the item sits in the list. In JavaScript, the index starts at 0, not 1, so the first item is at index 0, the second is at index 1, and so on.

We read an item by writing the array name followed by the index in square brackets.

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

console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "cherry"

Let’s walk through how each line pulls out one item:

• fruits[0] reaches the first item, so it prints "apple".
• fruits[1] reaches the second item, so it prints "banana".
• fruits[2] reaches the third item, so it prints "cherry".

📏 The length Property

Every array knows how many items it holds. We find this out with the length property, which we write as the array name followed by .length.

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

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

Here fruits.length counts the items in the array. There are three items, so it prints 3.

Because the index starts at 0, the last item always sits at index length - 1. With three items, the last one is at index 2.

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

console.log(fruits[fruits.length - 1]); // "cherry"

Let’s read that last line from the inside out:

• fruits.length gives 3, the number of items.
• fruits.length - 1 works out to 2, the index of the last item.
• fruits[2] then reaches that item, so it prints "cherry".

✏️ Changing an Item

We can replace any item by assigning a new value to its index. The old value is thrown away and the new one takes its place.

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

fruits[1] = "mango";

console.log(fruits); // ["apple", "mango", "cherry"]

Here we changed the item at index 1 from "banana" to "mango". The rest of the array stayed the same.

🔒 const Arrays Can Still Be Modified

When we declare an array with const, we cannot reassign the variable to a brand new array. But we can still change the items inside it. The const keyword locks the variable to one array, not the contents of that array.

const scores = [85, 90, 78];

scores[0] = 100; // ✅ Correct: changing an item is allowed
console.log(scores); // [100, 90, 78]

scores = [1, 2, 3]; // ❌ Wrong: reassigning the whole array throws an error

Let’s compare what each line does to the const array:

• scores[0] = 100 changes the item at index 0, which is allowed, so the array becomes [100, 90, 78].
• scores = [1, 2, 3] tries to point the variable at a whole new array, which const forbids, so it throws an error.

🏆 A Practical Example

Let’s say Sam is tracking quiz scores. We can keep all the scores in one array, read any score by its index, find out how many quizzes there were, and update a score after a recheck.

const scores = [72, 88, 95, 64];

console.log(scores[2]); // 95  → the third score
console.log(scores.length); // 4  → four quizzes taken

scores[3] = 70; // a recheck bumped the last score up
console.log(scores); // [72, 88, 95, 70]

Let’s trace how each line uses the same array:

• scores[2] reads the item at index 2, the third score, which is 95.
• scores.length counts the items and reports 4 quizzes taken.
• scores[3] = 70 updates the last score after a recheck, leaving [72, 88, 95, 70].

One array holds the whole list, and each piece of information comes from a clear, simple line of code.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ An array is an ordered list of values created with square brackets []
• ✅ Arrays can hold any type, including strings, numbers, and booleans
• ✅ We access items by index, and the index starts at 0
• ✅ The length property tells us how many items an array holds
• ✅ We can change an item by assigning a new value to its index
• ✅ A const array can be mutated but not reassigned

🚀 What’s Next?

Now that we can create and read arrays, let’s learn the built-in tools that make working with them powerful. Let’s continue to Array Methods.