JavaScript Array Methods map, filter, reduce

JavaScript Array Model

JavaScript arrays are indexed objects whose length, sparse slots, mutation methods, copying methods, iteration semantics, and shallow references must be understood explicitly. They are best for ordered general values, not every keyed or binary data problem.

Reliable array code chooses operations from the intended result, publishes mutation ownership, bounds async concurrency, validates external elements, and tests empty, duplicate, sparse, sorted, and large inputs.

Arrays

An array is a special variable, which allow us to store multiple values together in a single variable of same or different data types. It can store any valid value, which include string, number, object, function, and even other array.

It can also be created using new keyword like below-

Javascript Arrays Worked Example

const fruits = ["Apple", "Mango", "Orange"];

Javascript Arrays Worked Example 2

const fruits = new Array("Apple", "Mango", "Orange");

Working with Array Elements

Every item inside an array has an index. JavaScript arrays use zero-based indexing, which means the first element is at index 0, the second element is at index 1, and so on. You can read, update, or add values by using square brackets.

The length property tells us how many elements are present in an array. This is useful when looping through an array or when we want to access the last item using arr[arr.length - 1].

Javascript Arrays Worked Example 3

const fruits = ["Apple", "Mango", "Orange"];

console.log(fruits[0]); // Apple
fruits[1] = "Banana";
fruits[3] = "Grapes";

console.log(fruits); // ["Apple", "Banana", "Orange", "Grapes"]
console.log(fruits.length); // 4

Important Array Methods

JavaScript provides convenient methods to add and remove elements from the beginning or end of an array. push() adds to the end, pop() removes from the end, unshift() adds to the beginning, and shift() removes from the beginning.

The slice() method returns a shallow copy of a part of an array as a new array object. It accepts a start index and an optional end index, where the end index is not included. The original array is not modified.

Unlike slice(), the splice() method changes the original array. It can remove elements, insert new elements, or replace existing elements starting at a given index. This makes it very useful when you want to edit the actual array data.

Arrays are often used with loops because we usually want to process each element one by one. A traditional for loop gives full control over indexes, while for...of is cleaner when you only need the values.

Modern JavaScript arrays include helper methods that make common operations much easier. map() transforms every element, filter() keeps only matching elements, and reduce() combines all elements into a single value such as a total or summary.

You can search arrays in different ways depending on what you need. includes() checks whether a value exists, indexOf() returns the position of a value, and find() returns the first element that matches a condition.

The spread operator makes array operations more readable. It can be used to copy an array, merge multiple arrays, or extract values through destructuring. Keep in mind that this creates a shallow copy, so nested objects are still copied by reference.

A JavaScript array is flexible and can store strings, numbers, booleans, objects, functions, and even nested arrays. While mixed arrays are allowed, it is usually better to keep similar kinds of data together so the code remains easier to understand and maintain.

Javascript Arrays Worked Example 4

const colors = ["Red", "Green"];

colors.push("Blue");     // ["Red", "Green", "Blue"]
colors.unshift("Black"); // ["Black", "Red", "Green", "Blue"]

colors.pop();            // removes "Blue"
colors.shift();          // removes "Black"

console.log(colors);     // ["Red", "Green"]

Javascript Arrays Worked Example 5

const fruits = ["Apple", "Mango", "Orange"];

console.log(fruits.slice(1));      // ["Mango", "Orange"]
console.log(fruits.slice(1, 2));   // ["Mango"]
console.log(fruits.slice(-2, -1)); // ["Mango"]

Javascript Arrays Worked Example 6

const numbers = [10, 20, 30, 40];

numbers.splice(1, 1);           // removes 20
numbers.splice(1, 0, 25);       // inserts 25 at index 1
numbers.splice(2, 1, 35);       // replaces 30 with 35

console.log(numbers);           // [10, 25, 35, 40]

Javascript Arrays Worked Example 7

const marks = [78, 85, 91];

for (let i = 0; i < marks.length; i++) {
    console.log("Index:", i, "Value:", marks[i]);
}

for (const mark of marks) {
    console.log("Mark:", mark);
}

Javascript Arrays Worked Example 8

const prices = [100, 200, 300];

const discounted = prices.map(price => price - 20);
const expensive = prices.filter(price => price >= 200);
const total = prices.reduce((sum, price) => sum + price, 0);

console.log(discounted); // [80, 180, 280]
console.log(expensive);  // [200, 300]
console.log(total);      // 600

Javascript Arrays Worked Example 9

const users = ["Amit", "Neha", "Ravi", "Priya"];

console.log(users.includes("Ravi"));           // true
console.log(users.indexOf("Neha"));            // 1
console.log(users.find(user => user[0] === "P")); // Priya

Javascript Arrays Worked Example 10

const frontend = ["HTML", "CSS"];
const backend = ["Node.js", "MongoDB"];

const stack = [...frontend, ...backend];
const copy = [...stack];
const [first, second, ...others] = stack;

console.log(stack);  // ["HTML", "CSS", "Node.js", "MongoDB"]
console.log(first);  // HTML
console.log(others); // ["Node.js", "MongoDB"]

Javascript Arrays Worked Example 11

const data = [
    "Tutorials Logic",
    2026,
    true,
    { category: "JavaScript" },
    ["arrays", "objects"]
];

console.log(data[3].category); // JavaScript

Array Model and Indexing

JavaScript arrays are special objects with indexed properties and a length relationship. Valid array indexes are specific non-negative integer property names within the supported range; other named properties do not contribute to length. `Array.isArray` is the dependable cross-realm test for ordinary arrays.

Length is one greater than the highest present index, not a count of populated elements. Assigning beyond the end creates empty slots, and reducing length deletes elements at or beyond the new boundary. Avoid sparse arrays unless the distinction between a hole and an explicit undefined value is intentional.

Negative bracket indexes are ordinary string properties, not positions from the end. Use `at(-1)` for relative access. Out-of-range access returns undefined, so narrow a lookup before reading a member and distinguish no element from an element whose value is undefined.

Arrays preserve insertion order for their indexed sequence, but mutating length and sparse slots creates method-specific behavior. Model domain collections as dense sequences and use Map or an object when keys, rather than positions, identify records.

Treat length as an index boundary, not populated count.
Avoid accidental sparse arrays and named array properties.
Use at for relative indexing.
Choose keyed collections when identity is not positional.

Mutation and Copying Methods

`push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `reverse`, `fill`, and `copyWithin` mutate the array. Mutation is appropriate under clear ownership, but surprising when aliases, cached state, or UI change detection expect a new reference. Document whether an API consumes, edits, or preserves its input.

`slice`, `concat`, spread, `map`, `filter`, `toSorted`, `toReversed`, `toSpliced`, and `with` produce new arrays, but copying is shallow. Nested objects remain shared unless they are copied under their own ownership rules. Do not call a shallow array copy a deep clone.

Default sort compares string representations, so numeric order needs a comparator. A comparator should be pure, stable in its result for the same inputs, and obey ordering consistency. Use `toSorted` when callers must retain the original order.

Spreading a very large array into function arguments can exceed argument limits. Use iteration or an array-accepting API. Repeated spreading inside a loop can also copy growing prefixes and turn linear work into quadratic allocation.

Publish whether collection APIs mutate their input.
Remember that common array copies are shallow.
Supply a correct comparator for numeric or domain sorting.
Avoid large argument spreads and repeated growing copies.

Iteration and Transformation

`map` creates transformed positions, `filter` selects values, `find` returns the first match or undefined, `some` and `every` short-circuit predicates, and `reduce` carries an accumulator. Choose the method that names the result; use a loop when control flow or state transitions are clearer that way.

Mutation during iteration can skip or newly include elements according to the method. Prefer a stable snapshot or a new result. Test consecutive removals and appended elements when in-place traversal is required, and know how the chosen method treats sparse slots.

`forEach` ignores callback return values and does not await async callbacks. Use `for...of` for sequential awaits, `Promise.all` for a bounded independent set, or a concurrency-limited pool. The limiter must control operation creation, not only collect already-started Promises.

Use `for...of` for iterable values. `for...in` enumerates enumerable string property keys, including inherited keys unless filtered, and is not an array-value loop. Array entries, keys, and values iterators make both position and value explicit where needed.

Select methods from the intended output contract.
Avoid mutating a collection during unspecified traversal.
Do not await work through forEach.
Use for-of for values and for-in for property keys.

Arrays in Production

Choose Set for unique membership, Map for keyed lookup, typed arrays for fixed binary numeric storage, and ordinary arrays for ordered general values. Repeated `find` inside a loop can become quadratic; build a Map or Set when many lookups use the same key.

Validate external arrays for root type, element type, maximum length, duplicates, ordering, and required fields before domain use. An empty array is usually a valid collection state and should remain distinct from a missing or malformed field.

Test empty, one item, duplicates, undefined values, holes where supported, first and last matches, no match, mutation ownership, sort ties, large inputs, and async completion order. Property-based tests can assert length, membership, ordering, and round-trip invariants across generated data.

Profile allocation and algorithmic complexity before replacing readable array methods with manual loops. For large UI collections, network and rendering cost may dominate transformation. Keep measurements tied to representative data and preserve correctness tests around optimization.

Match Array, Set, Map, and typed arrays to the data model.
Validate external collection shape and limits.
Cover empty, duplicate, sparse, sorted, and large cases.
Optimize from representative profiling evidence.

Destructuring and Serialization

Array destructuring follows iteration order and supports skipped positions, defaults, and a rest binding. A default applies when the extracted value is undefined, including an absent position, but not when it is null. Use destructuring for small known tuples; named object fields are clearer when positions carry different business meanings.

JSON serialization preserves array order but cannot preserve holes, undefined values, functions, symbols, prototypes, shared identity, or every numeric value as the original program understood it. Define a transport schema instead of treating JSON round trips as general array cloning.

When exposing an array from an API, decide whether callers may mutate it. Return a copy, frozen view, iterator, or domain operation according to ownership. A getter that exposes a private mutable array lets external code bypass validation even when the containing object appears encapsulated.

Use tuple destructuring only for stable positional contracts.
Do not treat JSON as a general deep clone.
Publish collection mutation ownership at API boundaries.
Protect internal arrays from uncontrolled external writes.

Before you move on