JavaScript Arrays 101: Everything a Beginner Needs to Know

When you start learning JavaScript, you'll quickly run into a common problem: how do you manage a collection of related values without drowning in variables?

That's exactly where arrays come in.

In this article, you'll learn arrays from the ground up — what they are, how to create them, how to access and update values, and how to loop through them. By the end, you'll have a solid foundation to build on.

---

🤔 The Problem Arrays Solve

Say you want to store the names of five fruits. Without arrays, you might write:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";
let fruit5 = "Grapes";

This works for five fruits. But what about fifty? Or five hundred? Your code becomes impossible to manage.

Arrays solve this by storing multiple values inside a single variable:

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

Clean, organized, and scalable. ✅

---

📦 What Is an Array?

An array is an ordered collection of values stored in a single variable. Each value is called an element, and each element has a numbered index that determines its position.

Arrays are one of JavaScript's most used data structures — you'll find them everywhere.

---

🛠️ How to Create an Array

Use square brackets [] to create an array. Separate values with commas.

// Array of numbers
let scores = [95, 87, 74, 100];

// Array of strings
let colors = ["Red", "Blue", "Green"];

// Mixed types (valid, but not recommended)
let mixed = ["Jai", 24, true];

💡 Best practice: Keep arrays consistent — store the same type of data in each array for predictability and cleaner code.

---

🔢 Accessing Elements with Index

Every element in an array has an index — a number representing its position.

⚠️ Important: Array indexes start at 0, not 1.

let fruits = ["Apple", "Banana", "Mango"];

Index	Value
0	Apple
1	Banana
2	Mango

Access individual elements using bracket notation:

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

Trying to access an index that doesn't exist returns undefined:

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

Visualizing an Array in Memory

Index:  [0]      [1]       [2]      [3]
      +--------+---------+-------+--------+
      | Apple  | Banana  | Mango | Orange |
      +--------+---------+-------+--------+

Each block is a slot in memory holding one value.

---

✏️ Updating Array Elements

You can update any element by assigning a new value to its index:

let fruits = ["Apple", "Banana", "Mango"];

fruits[1] = "Pineapple";

console.log(fruits);
// Output: ["Apple", "Pineapple", "Mango"]

Notice how "Banana" at index 1 was replaced with "Pineapple".

---

📏 The length Property

Arrays come with a built-in length property that returns the total number of elements:

let fruits = ["Apple", "Banana", "Mango", "Orange"];

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

💡 Pro tip: Use fruits[fruits.length - 1] to always access the last element, regardless of how long the array is.

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

---

🔁 Looping Through Arrays

Loops let you process every element in an array automatically — no manual indexing required.

Using a for Loop

let fruits = ["Apple", "Banana", "Mango", "Orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// Output:
// Apple
// Banana
// Mango
// Orange

How it works:

• i starts at 0 (first index)
• The loop continues while i < fruits.length
• i++ increments the index on each iteration

Using for...of (Cleaner Syntax)

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

for...of is simpler when you don't need the index — just the values.

---

🎬 Putting It All Together: Assignment Example

Here's a complete, practical example using everything covered above:

// Step 1: Create an array of 5 favorite movies
let movies = ["Inception", "Interstellar", "Avengers", "Joker", "Titanic"];

// Step 2: Print the first and last movie
console.log("First movie:", movies[0]);
console.log("Last movie:", movies[movies.length - 1]);

// Step 3: Update one movie
movies[2] = "Spider-Man";
console.log("Updated array:", movies);

// Step 4: Loop through all movies
console.log("\n🎬 My Movie List:");
for (let i = 0; i < movies.length; i++) {
  console.log(`${i + 1}. ${movies[i]}`);
}

Output:

First movie: Inception
Last movie: Titanic
Updated array: ["Inception", "Interstellar", "Spider-Man", "Joker", "Titanic"]

🎬 My Movie List:
1. Inception
2. Interstellar
3. Spider-Man
4. Joker
5. Titanic

---

✅ Quick Reference Cheat Sheet

Concept	Syntax	Example
Create array	let arr = [val1, val2]	let nums = [1, 2, 3]
Access element	arr[index]	nums[0] → 1
Update element	arr[index] = newVal	nums[1] = 99
Array length	arr.length	nums.length → 3
Last element	arr[arr.length - 1]	nums[nums.length - 1] → 3
Loop (for)	for (let i = 0; i < arr.length; i++)	Iterate with index
Loop (for...of)	for (let item of arr)	Iterate values directly

---

🎯 Key Takeaways

• Arrays store multiple values in a single variable
• Elements are accessed using a zero-based index
• Use array[index] = value to update elements
• The length property tells you how many elements an array has
• Loops let you process every element efficiently

Arrays are foundational in JavaScript. Once you're comfortable with these basics, you'll be ready to explore powerful array methods like .map(), .filter(), .reduce(), and more.

---

📚 What's Next?

Now that you understand the basics, here's where to go next:

• Array Methods — .push(), .pop(), .shift(), .unshift()
• Higher-Order Functions — .map(), .filter(), .forEach()
• Nested Arrays — Arrays inside arrays (2D arrays)
• Array Destructuring — A clean ES6 syntax for extracting values

---

This article is part of the **Web Dev Cohort 2026* series. Follow along as we cover JavaScript fundamentals from the ground up.*

---

Did this article help you? Drop a ❤️, leave a comment with your questions, or share it with someone just getting started with JavaScript!