Lesson 3: Arrays & loops

Learning goals

• Understand arrays, indexing, and the meaning of length.
• Use common array methods: push, pop, includes, indexOf, slice.
• Loop using for and for..of, and prefer declarative helpers like map and filter where appropriate.
• Avoid common loop mistakes (off-by-one, mutating during iteration).

What is an array?

An array is an ordered collection of values. You can access items by numeric index (starting at 0), and the array knows how many items it contains via the length property.

// create an array
const items = ['Home', 'About', 'Contact'];

// indexing
console.log(items[0]); // 'Home'
console.log(items[2]); // 'Contact'

// length
console.log(items.length); // 3

Indexing starts at 0. Accessing an index beyond the end returns undefined.

Common methods

Useful, small methods you'll use often:

• push(value) — add an item to the end.
• pop() — remove and return the last item.
• includes(value) — returns true if array contains value.
• indexOf(value) — returns first index or -1 if not found.
• slice(start, end) — returns a shallow copy of a portion (end not included).

const nums = [10, 20, 30];
nums.push(40); // [10,20,30,40]
const last = nums.pop(); // last === 40, nums === [10,20,30]

console.log(nums.includes(20)); // true
console.log(nums.indexOf(20)); // 1

const part = nums.slice(1, 3); // [20,30] (end index not included)

Looping — patterns

Two common loops:

for (index-based)

// classic for loop
const arr = ['a','b','c'];
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

for..of (value-based)

// for..of iterates values directly
for (const value of arr) {
  console.log(value);
}

Prefer for..of when you only need values. Use index-based loops when you need the index or plan to modify the array by position.

map & filter (declarative helpers)

map transforms each item; filter keeps items that match a condition. They return new arrays and do not mutate the original.

const prices = [5, 12, 8, 20];
const doubled = prices.map(p => p * 2); // [10,24,16,40]
const expensive = prices.filter(p => p > 10); // [12,20]

These methods are readable and expressive — good for transforming lists for rendering.

Frontend examples — building HTML lists

It's common to loop over arrays to build UI. Keep string-building simple and safe (escape or use DOM methods in real apps).

const nav = ['Home','Blog','Contact'];
let html = '';
for (const item of nav) {
  html += `<li class="nav-item">${item}</li>`; // template literal
}
// html now contains '<li class="nav-item">Home</li>...'

// Using map + join (more declarative)
const html2 = nav.map(i => `<li class="nav-item">${i}</li>`).join('');

For arrays of objects (products), map to markup with values:

const products = [
  {id:1, name:'Mug', price:8},
  {id:2, name:'T-shirt', price:20}
];

const list = products.map(p => `<div class="product"><h3>${p.name}</h3><p>$${p.price}</p></div>`).join('');

Practical mini examples

Sum numbers, find max, filter by price.

// sum numbers
const values = [1,2,3,4];
const sum = values.reduce((acc, v) => acc + v, 0); // 10

// find max
const max = Math.max(...values); // 4

// filter products above a price
const filtered = products.filter(p => p.price > 10);

Common loop mistakes

• Off-by-one: using <= length instead of <, which reads past the end.
• Wrong index: mixing up i vs i-1 for positions.
• Mutating while iterating: removing or adding items inside a loop can skip items or cause unexpected behavior — iterate over a copy or use functional helpers instead.

// problematic: removing inside a for loop
const a = [1,2,3,4];
for (let i = 0; i < a.length; i++) {
  if (a[i] % 2 === 0) a.splice(i, 1); // mutates array while iterating — indices shift
}
    // safer: filter to create a new array
const odds = a.filter(n => n % 2 !== 0);

Practice tasks

1. Write a function that sums an array of numbers (use reduce or a loop).
2. Find the maximum number in an array without using Math.max (use a loop).
3. Given products, return only items with price >= 10.

Common mistakes & fixes

• Accessing arr[arr.length] — returns undefined; last valid index is arr.length - 1.
• Using for..in on arrays — it iterates property names; prefer for..of or index loops.
• Mutating the array while iterating — use filter, map, or iterate a copy.

Summary checklist

• Can create and index arrays and read length.
• Can use push, pop, includes, indexOf, slice.
• Know when to use for, for..of, and when to prefer map/filter.
• Avoid mutating arrays while iterating; watch off-by-one errors.