JavaScript Arrays 101: A Beginner’s Guide to Understanding Arrays

Arrays are one of the most important building blocks in JavaScript. If you’re just starting out, this guide will explain what arrays are, why we need them, how to use them (with clear code examples), and a small assignment you can try right away.

---

Start with something familiar — a relatable example

Imagine you have a list of fruits you like:

• Apple

• Banana

• Mango

• Grapes

• Orange

You could store each fruit in its own variable (fruit1, fruit2, ...), but that becomes messy fast. An array groups those values together in one place, in order — like items in a row. That ordering is important: the first fruit, the second fruit, etc.

---

What is an array and why do we need it?

Array (plain English): an ordered collection of values.

• Arrays collect multiple values into a single variable.

• Values keep their order — the first item stays first unless you change the array.

• You can store any type inside an array: numbers, strings, booleans, objects, even other arrays.

Why use arrays?

• Easier to manage lists (tasks, scores, names).

• You can loop over the list instead of handling each value manually.

• Cleaner code and fewer bugs vs. many separate variables.

---

How to create an array

Two very common ways:

1. Array literal (recommended)

const fruits = ["Apple", "Banana", "Mango", "Grapes", "Orange"];

1. Array constructor (less common)

const numbers = new Array(10, 20, 30);

Notes:

• Use const for the array reference if you don't plan to reassign the variable — you can still modify the array’s contents.

• Arrays in JS are dynamic (you can add/remove elements).

---

Indexing — accessing elements using an index

Arrays are ordered and indexing starts at 0. That means:

• fruits[0] → "Apple"

• fruits[1] → "Banana"

• ...

• fruits[4] → "Orange"

Example:

const fruits = ["Apple", "Banana", "Mango", "Grapes", "Orange"];

console.log(fruits[0]); // Apple
console.log(fruits[2]); // Mango

If you try to access an index out of range, you get undefined:

console.log(fruits[10]); // undefined

---

Updating elements

You can change any element by assigning to its index:

const fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Strawberry"; // replace Banana with Strawberry
console.log(fruits); // ["Apple", "Strawberry", "Mango"]

You can also add an element by assigning to an index equal to the current length:

const fruits = ["Apple", "Banana"];
fruits[fruits.length] = "Mango"; // add Mango at the end
// same as fruits.push("Mango") — (push is slightly more advanced; still useful to know)

---

length property

length tells how many elements the array currently has:

const arr = [1, 2, 3, 4];
console.log(arr.length); // 4

Important notes:

• length is one more than the last index (because indexes start at 0).

• Setting arr.length = 2 will truncate the array to the first two elements (advanced usage — be careful).

---

Basic looping over arrays

Looping lets you handle every element without repeating code.

1. Classic for loop (very explicit — great for beginners)

const fruits = ["Apple", "Banana", "Mango", "Grapes"];
for (let i = 0; i < fruits.length; i++) {
  console.log(`\({i}: \){fruits[i]}`);
}

1. for...of loop (cleaner when you don't need the index)

for (const fruit of fruits) {
  console.log(fruit);
}

1. forEach method (slightly more advanced; still common — shown for familiarity)

fruits.forEach(function(fruit, index) {
  console.log(index, fruit);
});

In this article we focused on classic for and for...of. Avoid using advanced array methods like map, filter, and reduce here — they’re great, but belong to an intermediate article.

---

Compare: separate variables vs. array

Storing separately:

const f1 = "Apple";
const f2 = "Banana";
const f3 = "Mango";
// What if you need to print them? You write lots of repeated code.

Using an array:

const fruits = ["Apple", "Banana", "Mango"];
// One loop prints everything. One container holds all values.

Arrays scale — lists of 5, 50, or 500 elements are handled the same way.

---

Visual / memory-style block diagram (ASCII)

Here’s how you can picture fruits in memory:

Index:   0       1        2        3        4
        -----------------------------------------
Array | "Apple" | "Banana" | "Mango" | "Grapes" | "Orange"
        -----------------------------------------
length = 5

Each box stores a value; the index is the offset you use to access the value (fruits[2] → "Mango").

---

Assignment idea (step-by-step solution included)

Assignment

1. Create an array of 5 favorite movies.

2. Print the first and last element.

3. Change one value and print updated array.

4. Loop through the array and print all elements.

Solution

// 1. create the array
const movies = [
  "The Shawshank Redemption",
  "Inception",
  "3 Idiots",
  "Interstellar",
  "The Dark Knight"
];

// 2. print first and last
console.log("First movie:", movies[0]);                 // The Shawshank Redemption
console.log("Last movie:", movies[movies.length - 1]);  // The Dark Knight

// 3. change one value
movies[2] = "Taare Zameen Par"; // replace "3 Idiots" with another favorite
console.log("Updated movies:", movies);

// 4. loop and print all elements
for (let i = 0; i < movies.length; i++) {
  console.log(`\({i + 1}. \){movies[i]}`);
}

---

Common beginner pitfalls & tips

• Off-by-one / indexing errors: Remember indexing starts at 0. The last index is array.length - 1.

• undefined when accessing out-of-range: If you see undefined, you likely used an index that doesn’t exist.

• const doesn't mean immutable contents: Declaring const arr = [...] prevents reassigning arr to a new array, but you can still change elements (arr[0] = 'x' works).

• Keep examples small: short arrays and short loops make demonstrations easier to follow.

---

Quick summary (cheat sheet)

• Arrays store ordered collections of values.

• Create with [] or new Array(...).

• Access with array[index] — indexing starts at 0.

• Update by assigning array[index] = newValue.

• array.length gives the number of elements.

• Loop with for or for...of.