JavaScript Arrays — Working with Lists of Data

What is an Array?

An array stores multiple values in a single variable, in order:

const skills = ["HTML", "CSS", "JavaScript", "React"];
const prices = [150, 200, 75, 420];
const mixed = ["Rahul", 25, true, null];  // can mix types

console.log(skills[0]);    // "HTML" (index starts at 0)
console.log(skills[2]);    // "JavaScript"
console.log(skills.length); // 4

Adding and Removing Items

const cart = ["iPhone", "AirPods"];

cart.push("MacBook");       // Add to END
console.log(cart);          // ["iPhone", "AirPods", "MacBook"]

cart.pop();                 // Remove from END
console.log(cart);          // ["iPhone", "AirPods"]

cart.unshift("Apple Watch"); // Add to BEGINNING
console.log(cart);          // ["Apple Watch", "iPhone", "AirPods"]

cart.shift();               // Remove from BEGINNING
console.log(cart);          // ["iPhone", "AirPods"]

Finding and Checking

const fruits = ["mango", "apple", "banana", "orange"];

console.log(fruits.includes("apple"));   // true
console.log(fruits.indexOf("banana"));   // 2 (index position)
console.log(fruits.indexOf("grape"));    // -1 (not found)

// find() — returns first matching element
const numbers = [4, 8, 15, 16, 23, 42];
const firstBig = numbers.find(n => n > 20);
console.log(firstBig);  // 23

// findIndex() — returns index of first match
const bigIndex = numbers.findIndex(n => n > 20);
console.log(bigIndex);  // 4

map() — Transform Every Element

const products = [
  { name: "Dal Makhani", price: 150 },
  { name: "Butter Chicken", price: 200 },
  { name: "Paneer Tikka", price: 180 }
];

// Get just the names
const names = products.map(p => p.name);
console.log(names);  // ["Dal Makhani", "Butter Chicken", "Paneer Tikka"]

// Add 10% GST to all prices
const pricesWithGST = products.map(p => ({
  ...p,
  priceWithGST: p.price * 1.10
}));

// Double all numbers
const doubled = [1, 2, 3, 4].map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8]

filter() — Keep Only Matching Items

const tutorials = [
  { title: "HTML Basics", level: "beginner" },
  { title: "React Hooks", level: "intermediate" },
  { title: "CSS Flexbox", level: "beginner" },
  { title: "Node.js APIs", level: "advanced" }
];

const beginnerTutorials = tutorials.filter(t => t.level === "beginner");
console.log(beginnerTutorials.length);  // 2

// Numbers > 100
const expensive = [50, 150, 75, 320, 90].filter(p => p > 100);
console.log(expensive);  // [150, 320]

reduce() — Calculate a Single Value from All Items

const orderItems = [
  { name: "Dal Makhani", price: 150, qty: 2 },
  { name: "Naan", price: 40, qty: 3 },
  { name: "Lassi", price: 60, qty: 2 }
];

const total = orderItems.reduce((sum, item) => sum + (item.price * item.qty), 0);
console.log("Order total: Rs." + total);  // Order total: Rs.540

Useful Array Methods

const nums = [3, 1, 4, 1, 5, 9, 2, 6];

// sort (mutates original!)
[...nums].sort((a, b) => a - b);  // ascending: [1, 1, 2, 3, 4, 5, 6, 9]
[...nums].sort((a, b) => b - a);  // descending: [9, 6, 5, 4, 3, 2, 1, 1]

// slice — copy part of array (does not mutate)
console.log(nums.slice(0, 3));  // [3, 1, 4]

// join — array to string
["HTML", "CSS", "JS"].join(", ");  // "HTML, CSS, JS"

// flat — flatten nested arrays
[[1, 2], [3, 4]].flat();  // [1, 2, 3, 4]

Try It Yourself

1. Create an array of 5 product prices, then use reduce() to find the total
2. Use filter() to get only products priced under Rs.200
3. Use map() to create a new array with "Rs." prefix on each price