This guide details the use of core JavaScript aray methods.

Source Array

const sourceArray = [
    { name: "Person A", age: 18 },
    { name: "Person B", age: 19 },
    { name: "Person C", age: 20 },
    { name: "Person D", age: 21 },
    { name: "Person E", age: 22 }
];

filter()

Creates a new array containing all elements that pass a test.

const filtered = sourceArray.filter((currentItem, idx, originalArray) => {
    return currentItem.age >= 20;
});
console.log(filtered); // [{name: "Person C", age: 20}, {name: "Person D", age: 21}, {name: "Person E", age: 22}]

map()

Creates a new array with the results of calling a function on every element.

const mapped = sourceArray.map((currentItem, idx, originalArray) => {
    const newItem = { ...currentItem };
    newItem.yearOfBirth = 2024 - newItem.age;
    return newItem;
});
console.log(mapped);

forEach()

Executes a provided function once for each array element.

sourceArray.forEach((currentItem, idx, originalArray) => {
    console.log(`Index ${idx}:`, currentItem.name);
});

find()

Returns the value of the first element that satisfies a test.

const foundItem = sourceArray.find((currentItem) => {
    return currentItem.name === "Person C";
});
console.log(foundItem); // {name: "Person C", age: 20}

findIndex()

Returns the index of the first element that satisfies a test.

const foundIndex = sourceArray.findIndex((currentItem) => {
    return currentItem.age > 21;
});
console.log(foundIndex); // 4

reduce()

Executes a reducer function on each element, resulting in a single output value.

const totalAge = sourceArray.reduce((accumulator, currentItem) => {
    return accumulator + currentItem.age;
}, 0);
console.log(totalAge); // 100

pop() and shift()

pop() removes the last element. shift() removes the first element.

const poppedElement = sourceArray.pop();
console.log(poppedElement); // {name: "Person E", age: 22}
console.log(sourceArray.length); // 4

push() and unshift()

push() adds to the end. unshift() adds to the beginning.

const newLength = sourceArray.push({ name: "Person F", age: 23 });
console.log(newLength); // 5

slice()

Returns a shallow copy of a portion of an array.

const slicedArray = sourceArray.slice(1, 3);
console.log(slicedArray); // [{name: "Person B", age: 19}, {name: "Person C", age: 20}]

splice()

Changes the array by removing or replacing existing elements and/or adding new elements.

const removedElements = sourceArray.splice(2, 1, { name: "New Person", age: 25 });
console.log(removedElements); // [{name: "Person C", age: 20}]
console.log(sourceArray); // Array with "New Person" at index 2

fill()

Fills all or part of an array with a static value.

const numArray = new Array(3);
numArray.fill(0);
console.log(numArray); // [0, 0, 0]

sort()

Sorts the elements of an array in place.

const sortedArray = [...sourceArray].sort((a, b) => a.age - b.age);
console.log(sortedArray); // Sorted by age ascending

reverse()

Reverses the order of the elements in an array.

const reversedArray = [...sourceArray].reverse();
console.log(reversedArray);

concat()

Merges two or more arrays, returning a new array.

const extraArray = [{ name: "Person G", age: 30 }];
const combinedArray = sourceArray.concat(extraArray);
console.log(combinedArray);

some() and every()

some() tests if at least one element pases. every() tests if all elements pass.

const hasAdult = sourceArray.some((currentItem) => currentItem.age >= 18);
console.log(hasAdult); // true

const allAdults = sourceArray.every((currentItem) => currentItem.age >= 18);
console.log(allAdults); // true