Transform, Select and Summarize

map builds an array of transformed values; filter selects values that pass a condition; reduce combines values into a result. A school report can express these separate intentions without mutating the original marks.

Before this topic, review Store an Ordered Class List if its terms are unfamiliar.

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

Arrays in JavaScript aren't just collections of elements — they're dynamic tools that come with powerful built-in methods. These methods can transform, search, add, remove, and iterate over data efficiently. In this guide, we'll walk through both the basics and advanced JavaScript array methods, using plenty of real-world examples to solidify your understanding.

The push() method adds one or more elements to the end of an array and returns the new length.

let fruits = ["apple", "banana"];
let newLength = fruits.push("orange");
console.log(fruits);
console.log(newLength);

["apple", "banana", "orange"]
3

Use pop() when you want to remove the last item from an array. It returns the removed element.

let items = ["pen", "pencil", "eraser"];
let removed = items.pop();
console.log(items);
console.log(removed);

["pen", "pencil"]
"eraser"

This method prepends items to the start of the array.

let numbers = [2, 3];
numbers.unshift(1);
console.log(numbers);

[1, 2, 3]

Just like pop() but for the start of the array.

let nums = [10, 20, 30];
let first = nums.shift();
console.log(nums);
console.log(first);

[20, 30]
10

forEach() executes a given function for each array element. It does not return anything.

let colors = ["red", "green", "blue"];
colors.forEach(function(color, index) {
  console.log(index + ": " + color);
});

0: red
1: green
2: blue

The map() method creates a new array with results of a function applied to every element.

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled);

[2, 4, 6]

Returns a new array with only the items that pass the provided test.

let scores = [85, 42, 77, 95];
let passed = scores.filter(score => score > 50);
console.log(passed);

[85, 77, 95]

reduce() applies a function against an accumulator and each element to reduce it to a single value.

let values = [10, 20, 30];
let total = values.reduce((sum, current) => sum + current, 0);
console.log(total);

60

Returns the first element that satisfies the condition.

let users = [{id: 1}, {id: 2}, {id: 3}];
let user = users.find(u => u.id === 2);
console.log(user);

{id: 2}

Returns true if the array contains the specified element.

let tags = ["js", "html", "css"];
console.log(tags.includes("html"));
console.log(tags.includes("php"));

true
false

Returns the first index at which a given element can be found, or -1 if not present.

let cities = ["Delhi", "Mumbai", "Chennai"];
console.log(cities.indexOf("Mumbai"));
console.log(cities.indexOf("Kolkata"));

1
-1

Returns a shallow copy of a portion of an array.

let letters = ["a", "b", "c", "d", "e"];
console.log(letters.slice(1, 4));

["b", "c", "d"]

Modifies an array by removing or replacing elements in place.

let nums = [1, 2, 3, 4, 5];
nums.splice(2, 1, 99);
console.log(nums);

[1, 2, 99, 4, 5]

Sorts the array elements. By default, sorts alphabetically as strings.

let data = [20, 5, 100, 1];
data.sort(); // Incorrect numeric sort
console.log(data);
data.sort((a, b) => a - b); // Correct numeric sort
console.log(data);

[1, 100, 20, 5]
[1, 5, 20, 100]

Combines two or more arrays and returns a new one.

let a = [1, 2];
let b = [3, 4];
let combined = a.concat(b);
console.log(combined);

[1, 2, 3, 4]

forEach does not return a transformed array. Give reduce an initial value when an empty input is possible.

When the next step is ordering a result, use numeric sorting with an intentional copy to avoid rearranging the original class list.

Your task: Replace >= 50 with >= 75. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Only 80 meets the new threshold, so both the list and its total change.

map builds an array of transformed values; filter selects values that pass a condition; reduce combines values into a result. A school report can express these separate intentions without mutating the original marks.

Check your variation against this explanation: Only 80 meets the new threshold, so both the list and its total change.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.