Array Methods
Last Updated: August 26, 2024
JavaScript provide a variety of built-in array methods that allow you to manipulate and interact with arrays. Here are some of the most commonly used array methods:
Mutator Methods
These methods modify the array itself.
- push(): Adds one of more elements to the end of an array.
let iceCreamFlavors = ["vanilla", "chocolate", "strawberry"];
// Add one element to the end of the array
iceCreamFlavors.push("cookie dough");
// Add multiple elements to the end of the array
iceCreamFlavors.push("mint chip", "rocky road");
// Output: ["vanilla", "chocolate", "strawberry", "cookie dough","mint chip", "rocky road"]
console.log(iceCreamFlavors);
console.log(iceCreamFlavors.length); // Output: 6- pop(): Removes the last element from an array.
let iceCreamFlavors = [
"vanilla",
"chocolate",
"strawberry",
"mint chip",
"rocky road",
];
// Remove the last element from the array
let removedFlavor = iceCreamFlavors.pop();
// Output: ["vanilla", "chocolate", "strawberry", "mint chip", "rocky road"]
console.log(iceCreamFlavors);
// Output: "rocky road"
console.log(removedFlavor);- shift(): Removes the first element from an array.
let iceCreamFlavors = [
"vanilla",
"chocolate",
"strawberry",
"mint chip",
"rocky road",
];
// Remove the first element from the array
let removedFlavor = iceCreamFlavors.shift();
// Output: ["chocolate", "strawberry", "mint chip", "rocky road"]
console.log(iceCreamFlavors);
// Output: "vanilla"
console.log(removedFlavor);- unshift(): Adds one or more elements to the beginning of an array.
let iceCreamFlavors = [
"vanilla",
"chocolate",
"strawberry",
"mint chip",
"rocky road",
];
// Add one element to the beginning of the array
let newLength = iceCreamFlavors.unshift("cookie dough");
// Output: ["cookie dough", "vanilla", "chocolate", "strawberry", "mint chip", "rocky road"]
console.log(iceCreamFlavors);
// Output: 6
console.log(newLength);
// Add multiple elements to the beginning of the array
newLength = iceCreamFlavors.unshift("pistachio", "lemon");
// Output: ["pistachio", "lemon", "cookie dough", "vanilla", "chocolate", "strawberry", "mint chip", "rocky road"]
console.log(iceCreamFlavors);
// Output: 8
console.log(newLength);- splice(): Adds or removes elements from an array.
let iceCreamFlavors = [
"vanilla",
"chocolate",
"strawberry",
"mint chip",
"rocky road",
];
// Remove 2 elements starting from index 1
let removedFlavors = iceCreamFlavors.splice(1, 2);
// Output: ["vanilla", "mint chip", "rocky road"]
console.log(iceCreamFlavors);
// Output: ["chocolate", "strawberry"]
console.log(removedFlavors);
// Add 2 elements at index 2
iceCreamFlavors.splice(2, 0, "cookie dough", "pistachio");
// Output: ["vanilla", "mint chip", "cookie dough", "pistachio", "rocky road"]
console.log(iceCreamFlavors);
// Replace 1 element at index 1
iceCreamFlavors.splice(1, 1, "lemon");
// Output: ["vanilla", "lemon", "cookie dough", "pistachio", "rocky road"]
console.log(iceCreamFlavors);- sort(): Sorts the elements of an array. By default, the
sort()method sorts the elements as strings in ascending order. To sort the elements numerically or in a custom order, you can provide a compare function.
let iceCreamFlavors = [
"vanilla",
"chocolate",
"strawberry",
"mint chip",
"rocky road",
];
// Sort the array in alphabetical order
iceCreamFlavors.sort();
// Output: ["chocolate", "mint chip", "rocky road", "strawberry", "vanilla"]
console.log(iceCreamFlavors);
// Sort the array in reverse alphabetical order
iceCreamFlavors.sort((a, b) => b.localeCompare(a));
// Output: ["vanilla", "strawberry", "rocky road", "mint chip", "chocolate"]
console.log(iceCreamFlavors);
// Sort the array by length of the string
iceCreamFlavors.sort((a, b) => a.length - b.length);
// Output: ["vanilla", "chocolate", "strawberry", "rocky road", "mint chip"]
console.log(iceCreamFlavors);- reverse(): Reverses the order of the elements in an array.
let iceCreamFlavors = [
"vanilla",
"chocolate",
"strawberry",
"mint chip",
"rocky road",
];
// Reverse the array
iceCreamFlavors.reverse();
// Output: ["rocky road", "mint chip", "strawberry", "chocolate", "vanilla"]
console.log(iceCreamFlavors);- fill(): Fills all the elements of an array from a start index to an end index with a static value.
let numbers = [1, 2, 3, 4, 5];
// Fill all elements with 0
numbers.fill(0);
// Output: [0, 0, 0, 0, 0]
console.log(numbers);
// Fill elements from index 1 to 3 with 7
numbers.fill(7, 1, 3);
// Output: [0, 7, 7, 0, 0]
console.log(numbers);
// Fill elements from index 2 to the end with 9
numbers.fill(9, 2);
// Output: [0, 7, 9, 9, 9]
console.log(numbers);- copyWithin(): Copies a sequence of array elements within the array.
let numbers = [1, 2, 3, 4, 5];
// Copy elements from index 0 to index 2 (exclusive) to index 3
numbers.copyWithin(3, 0, 2);
// Output: [1, 2, 3, 1, 2]
console.log(numbers);
// Copy elements from index 2 to the end to index 0
numbers.copyWithin(0, 2);
// Output: [3, 1, 2, 1, 2]
console.log(numbers);Accessor Methods
These methods do not modify the array but return some representation of the array.
concat(): Merges two or more arrays.slice(): Returns a shallow copy of a portion of an array.includes(): Determine whether an array includes a certain value.indexOf(): Returns the first index at which a given element can be found.lastIndexOf(): Returns the last index at which a given element can be found.join(): Joins all elements of an array into a string.toString(): Returns a string representing the array.toLocalString(): Returns a localized string representing the array.
Iteration Methods
These methods are used to iterate over arrays.
forEach(): Executes a provided function once for each array element.map(): Creates a new array with the results of calling a provided funtion on every element.filter(): Creates a new array with all the elements that pass the test implemented by the provided function.reduce(): Applies a function against an accumulator and each element to reduce it to a single value.reduceRight(): Applies a function against an accumulator and each element (from right to left) to reduce it to a single value.some(): Tests whether all elements in the array pass the test implemented by the provided function.every(): Tests whether all elements in the array pass the test implemented by the provided function.find(): Returns the first element that satisfies the provided testing function.findIndex(): Returns the index of the first element that satisfies the provided testing function.entries(): Returns a new Array Iterator object that contains the keys for each index.keys(): Returns a new Array Iterator object that contains the keys for each index.values(): Returns a new Array Iterator object that contains the values for each index.
Other Methods
flat(): Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.flatMap(): Maps each element using a mapping function, then flattens the result into a new array.from(): Create a new, shallow-copied array instance from an array-like or iterable object.isArray(): Determines whether the passed value is an array.of(): Creates a new array instance with a variable number of arguments, regardless of number or type of the arguments.