📚 JavaScript Arrays & Loops

Store multiple values and process them efficiently!

📦 What are Arrays?

Arrays are special variables that can hold multiple values at once. Think of them as a list or a collection!

📝 Creating Arrays

// Create an array
var fruits = ["Apple", "Banana", "Orange"];
var numbers = [1, 2, 3, 4, 5];
var mixed = [1, "text", true, null];

// Empty array
var empty = [];

🔍 Accessing Array Items

var fruits = ["Apple", "Banana", "Orange"];

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

// Arrays start at index 0!
console.log(fruits.length);  // 3 (number of items)

✏️ Array Methods

➕ Adding Items

var fruits = ["Apple", "Banana"];

fruits.push("Orange");     // Add to end
// ["Apple", "Banana", "Orange"]

fruits.unshift("Mango");   // Add to beginning
// ["Mango", "Apple", "Banana", "Orange"]

➖ Removing Items

var fruits = ["Apple", "Banana", "Orange"];

fruits.pop();       // Remove last item
// ["Apple", "Banana"]

fruits.shift();     // Remove first item
// ["Banana"]

🔄 Loops

Loops let you repeat code multiple times - perfect for processing arrays!

🔁 For Loop

var fruits = ["Apple", "Banana", "Orange"];

for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: Apple, Banana, Orange

🔁 While Loop

var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
// Output: 0, 1, 2, 3, 4

🎨 forEach Method

var fruits = ["Apple", "Banana", "Orange"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});
// Output: Apple, Banana, Orange

🎯 Array Methods (Advanced)

🗺️ map() - Transform Array

var numbers = [1, 2, 3, 4];
var doubled = numbers.map(function(num) {
  return num * 2;
});
// doubled = [2, 4, 6, 8]

🔍 filter() - Filter Array

var numbers = [1, 2, 3, 4, 5, 6];
var evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
// evens = [2, 4, 6]

🎨 Shopping List App

✏️ Practice Exercise

Challenge: Master Arrays!

  1. Create an array of your favorite movies
  2. Use a for loop to display all movies
  3. Use push() to add a new movie
  4. Use filter() to find movies with more than 8 characters
  5. Build a simple to-do list with add/delete functions

🎯 Key Takeaways

📚 Class 8 - Advanced JavaScript • Process Data Like a Pro! 🚀