Arrays & Iteration Methods

🟨 JavaScript Lesson 8 Intermediate

Arrays are ordered, dynamically-resizable collections. JavaScript arrays store elements of any type and feature powerful built-in functional iteration methods.

1 Core Iteration Helpers: map, filter, & reduce

Instead of using standard `for` loops, modern JavaScript processes arrays using functional iteration callbacks:

map(): Creates a new array by applying a modification function to every element of the original array.
filter(): Creates a new array containing only elements that pass a validation check.
reduce(): Condenses an entire array into a single accumulated value (like a sum or average).

2 Array Manipulations

Let's run a program declaring arrays, modifying elements, and processing values with functional helpers:

JavaScript — Arrays and Helpers ▶ Run Code

let fruits = ["Apple", "Banana"];
fruits.push("Mango"); // Add to end
console.log("Fruits list: ", fruits);

let numbers = [1, 2, 3, 4, 5];

// map: Double all values
let doubled = numbers.map(x => x * 2);
console.log("Doubled: ", doubled);

// filter: Get even values
let evens = numbers.filter(x => x % 2 === 0);
console.log("Evens: ", evens);

// reduce: Sum all values
let sum = numbers.reduce((accum, curr) => accum + curr, 0);
console.log("Sum: " + sum);

3 Code Challenge

Challenge: Write a program that filters an array of integers to retrieve only positive numbers, and then maps the filtered results to return their square values. Output the final array.