Lesson 5: Array Iterators (map, filter & reduce)

ES6 iterators replace verbose for-loops with clean, declarative operations:

map(fn): Returns a new array by applying fn to each element.

filter(fn): Returns a new array with all elements that pass the Boolean test.

reduce(fn, init): Accumulates array values into a single summary output.

⊞HTML5 Web Code (index.html)

<!DOCTYPE html>

<head>

<title>JS Map & Filter Studio</title>

</head>

<h2>Course Prices Filtered</h2>

const courses = [

{ name: "HTML5 Mastery", price: 0, level: "Beginner" },

{ name: "CSS Grid & Flex", price: 0, level: "Beginner" },

{ name: "Advanced React", price: 0, level: "Advanced" }

];

// Map into HTML pills

const pills = courses.map(c =>

`<span style="display:inline-block; padding:6px 12px; margin:4px; background:#1f2029; border:1px solid #04AA6D; border-radius:6px; color:#fff;">

${c.name} - ${c.price === 0 ? "FREE" : "$" + c.price}

</span>`

).join("");

document.getElementById("results").innerHTML = pills;

</script>

</body>

</html>