JavaScript Arrays 101: Create, Access, Update, and Loop Through Arrays

Hey everyone, Aman here! 👋

Have you ever tried to hold ten different things in your hands at the exact same time? It's chaos. You drop things, you lose track of what you're holding, and it's just completely inefficient.

In programming, trying to store a list of related items feels exactly the same if you don't use the right tools. Today, we are going to look at one of the most important data structures in JavaScript: Arrays. Think of them as a single, organized backpack where you can neatly store as many items as you want.

Open up your browser's console (F12 or Right-Click -> Inspect -> Console) and let's start organizing our data!

---

📦 Why Do We Need Arrays?

Imagine you are building a simple to-do list app and you need to store your tasks for the day. Without arrays, you would have to create a separate variable for every single task:

let task1 = "Write code";
let task2 = "Review PRs";
let task3 = "Deploy to Railway";
let task4 = "Fix bugs";

This is a nightmare to manage. What if you have 100 tasks? What if you want to count them all?

Instead of dealing with individual variables, we can group them together into a single Array. An array is simply an ordered collection of values stored inside square brackets [].

let dailyTasks = ["Write code", "Review PRs", "Deploy to Railway", "Fix bugs"];
console.log(dailyTasks); 
// Output: ["Write code", "Review PRs", "Deploy to Railway", "Fix bugs"]

Now, all our related data is securely stored in one place!

---

🔍 Accessing Elements: The "Zero" Rule

Now that we have our array, how do we look at a specific item inside it?

Arrays are strictly ordered. Every item gets a numbered position called an index. But here is the most important rule to remember in JavaScript (and most programming languages): Counting starts at 0, not 1.

• The 1st item is at index 0.

• The 2nd item is at index 1.

• The 3rd item is at index 2.

To access an item, write the array name followed by square brackets containing the index number:

let techStack = ["Angular", "Spring Boot", "Node.js"];

console.log(techStack[0]); // Output: Angular (The first item)
console.log(techStack[2]); // Output: Node.js (The third item)

---

✏️ Updating Elements

Arrays are flexible. Just because you put something in the array doesn't mean it has to stay that way forever.

To update an element, you just access it via its index and assign a new value to it using the equals sign =, exactly like you would with a standard variable.

let scores = [85, 90, 78];
console.log("Before:", scores); // [85, 90, 78]

// Let's say we retook the third test and got a 95!
scores[2] = 95; 

console.log("After:", scores); // [85, 90, 95]

---

📏 The length Property

Often, you won't know exactly how many items are inside an array (like if a user is adding items to a shopping cart). JavaScript gives us a built-in property called length that tells us exactly how many elements are in the array.

let cart = ["Laptop", "Mouse", "Keyboard"];
console.log(cart.length); // Output: 3

Note: While index counting starts at 0, the length property counts normally, starting at 1.

---

🔄 Looping Through an Array

What if you want to print every single item in your array to the screen? You could console.log index 0, then index 1, then index 2... but that defeats the purpose of programming!

Instead, we use a standard for loop. We can use our loop counter (i) to represent the index, and we can use the .length property to tell the loop exactly when to stop.

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

// i starts at 0
// The loop keeps running as long as i is less than the total number of fruits (4)
// i increases by 1 each time
for (let i = 0; i < fruits.length; i++) {
  console.log("I love eating " + fruits[i]);
}

// Output:
// I love eating Apple
// I love eating Banana
// I love eating Mango
// I love eating Orange

---

👨‍💻 Your Turn: The Assignment!

Time to get some hands-on practice. Open your console and try to complete this mini-project:

1. Create an array containing 5 of your favorite movies as strings.

2. Print the very first movie and the very last movie to the console using their index numbers.

3. Update one of the movies in the middle of your array to a different movie, then print the entire updated array.

4. Write a for loop that iterates through your array and prints out each movie one by one.

Once you master creating, accessing, and looping through arrays, you've unlocked one of the most powerful tools in web development!