📋

JavaScript Arrays

Master lists, iteration, filtering, and sorting

⭐ Essential Skill

What are Arrays?

Arrays are ordered lists of values. Think of them as shopping lists, ingredient collections, or recipe steps - any time you need to store multiple related items in a specific order!

💡 Real-World Example:

Your shopping list: ["eggs", "milk", "flour", "sugar"] - each item has a position (index) starting from 0!

Common Array Operations

1. Creating and Accessing Arrays 

const ingredients = ["flour", "sugar", "eggs"];
console.log(ingredients[0]);     // "flour" (first item)
console.log(ingredients.length); // 3 (total items)

2. Adding and Removing Items 

const pantry = ["rice", "beans"];
pantry.push("pasta");      // Add to end: ["rice", "beans", "pasta"]
pantry.unshift("bread");   // Add to start: ["bread", "rice", "beans", "pasta"]
pantry.pop();              // Remove from end: ["bread", "rice", "beans"]
pantry.shift();            // Remove from start: ["rice", "beans"]

3. Filtering Arrays 

const calories = [100, 250, 50, 400, 150];
const lowCal = calories.filter(cal => cal < 200);
console.log(lowCal); // [100, 50, 150]

4. Mapping (Transforming) Arrays 

const prices = [10, 20, 30];
const withTax = prices.map(price => price * 1.1);
console.log(withTax); // [11, 22, 33]

5. Sorting Arrays 

const ratings = [4, 2, 5, 1, 3];
ratings.sort((a, b) => a - b);  // Ascending: [1, 2, 3, 4, 5]
ratings.sort((a, b) => b - a);  // Descending: [5, 4, 3, 2, 1]

🔀 Sorting

let nums = [3, 1, 4, 1, 5];
nums.sort();        // [1, 1, 3, 4, 5]

// Sort numbers properly
nums.sort((a, b) => a - b);

✂️ Slicing

let items = [1, 2, 3, 4, 5];
let part = items.slice(1, 4);
// [2, 3, 4]

🔄 Reversing

let arr = [1, 2, 3];
arr.reverse();
// [3, 2, 1]

➕ Concatenating 

let a = [1, 2];
let b = [3, 4];
let c = a.concat(b);
// [1, 2, 3, 4]

Learn More

📘 MDN Web Docs 📗 W3Schools

🚀 Try It Yourself

Output:

🥘

Game 1: Meal Prep Planner

Organize your weekly meals! Use filter, sort, and map methods to manage your meal plan efficiently.

📝 Meal Database

🎯 Filters & Actions

Stats:
🍔

Game 2: Order Queue Manager

Manage a restaurant order queue! Practice push, shift, and array manipulation to process orders efficiently.

📥 New Orders

📋 Order Queue (0)

⚙️ Actions

📊 Statistics:
Completed: 0
Cancelled: 0
💡 Array Methods Used: push() to add orders, shift() to process first order, pop() to cancel last order
🍽️

Challenge 1: Meal Prep Planner

📋 Your Mission:

Filter meals based on max calories and sort by preparation time:

  1. Filter meals with calories less than or equal to maxCalories
  2. Sort the filtered meals by prepTime (ascending)
  3. Return array of meal names only

Example meals:

[{name: "Salad", calories: 150, prepTime: 10}, ...]

With maxCalories=200:

→ ["Salad", "Soup"] (sorted by prepTime)

💡 Hints:

  • Use .filter() to select meals
  • Use .sort() with comparison function
  • Use .map() to extract names

Test Results:

📦

Challenge 2: Order Queue Manager

📋 Your Mission:

Manage a restaurant order queue:

  1. Add new orders to the end of the queue
  2. Serve (remove) the first order in the queue
  3. Return the updated queue

Example:

processQueue(["Order1", "Order2"], "Order3", true)

→ ["Order2", "Order3"] (served Order1, added Order3)

💡 Hints:

  • Use .push() to add to end
  • Use .shift() to remove from start
  • Make a copy of the array first with [...queue]

Test Results: