1,728 words, 9 minutes read time.
TypeScript, the superset of JavaScript, enhances the development experience with type safety and robust tooling. One of its core features is its rich set of array methods, which allow developers to manipulate arrays efficiently and expressively. In this guide, we’ll dive deep into all 33 array methods available in TypeScript, providing you with detailed explanations, examples, and best practices to master array manipulation in your TypeScript projects.
1. concat()
The concat() method merges two or more arrays into a single array without modifying the original arrays. It’s particularly useful for combining array data without altering the source arrays.
const fruits = ['apple', 'banana']; const vegetables = ['carrot', 'broccoli']; const combined = fruits.concat(vegetables); console.log(combined); // Output: ['apple', 'banana', 'carrot', 'broccoli']
2. copyWithin()
The copyWithin() method copies a part of an array to another location within the same array. This method modifies the original array, making it useful for in-place transformations.
const numbers = [1, 2, 3, 4, 5]; numbers.copyWithin(0, 3, 5); console.log(numbers); // Output: [4, 5, 3, 4, 5]
3. entries()
The entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array. It’s useful for iterating over array elements along with their indices.
const colors = ['red', 'green', 'blue'];
for (const [index, color] of colors.entries()) {
console.log(index, color);
}
// Output:
// 0 'red'
// 1 'green'
// 2 'blue'
4. every()
The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns true if all elements pass the test, otherwise false.
const numbers = [1, 2, 3, 4]; const isEveryNumberGreaterThanZero = numbers.every(num => num > 0); console.log(isEveryNumberGreaterThanZero); // Output: true
5. fill()
The fill() method fills all the elements in an array from a start index to an end index with a static value. This method modifies the original array.
const array = [1, 2, 3, 4, 5]; array.fill(0, 2, 4); console.log(array); // Output: [1, 2, 0, 0, 5]
6. filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function. It’s useful for filtering array elements based on certain criteria.
const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // Output: [2, 4]
7. find()
The find() method returns the first element in the array that satisfies the provided testing function. If no elements satisfy the testing function, it returns undefined.
const numbers = [1, 2, 3, 4, 5]; const firstEven = numbers.find(num => num % 2 === 0); console.log(firstEven); // Output: 2
8. findIndex()
The findIndex() method returns the index of the first element that satisfies the provided testing function. If no elements satisfy the testing function, it returns -1.
const numbers = [1, 2, 3, 4, 5]; const indexOfFirstEven = numbers.findIndex(num => num % 2 === 0); console.log(indexOfFirstEven); // Output: 1
9. flat()
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. It’s useful for flattening nested arrays.
const nestedArray = [1, [2, [3, 4]]]; const flatArray = nestedArray.flat(2); console.log(flatArray); // Output: [1, 2, 3, 4]
10. flatMap()
The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It’s a combination of map() and flat() with a depth of 1.
const numbers = [1, 2, 3, 4]; const doubledAndFlattened = numbers.flatMap(num => [num, num * 2]); console.log(doubledAndFlattened); // Output: [1, 2, 2, 4, 3, 6, 4, 8]
11. forEach()
The forEach() method executes a provided function once for each array element. It does not return a new array, but it’s useful for performing side effects.
const fruits = ['apple', 'banana', 'cherry']; fruits.forEach(fruit => console.log(fruit)); // Output: // apple // banana // cherry
12. includes()
The includes() method checks if an array contains a certain element and returns true or false accordingly. It’s useful for checking the presence of an item.
const numbers = [1, 2, 3, 4, 5]; const hasThree = numbers.includes(3); console.log(hasThree); // Output: true
13. indexOf()
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
const numbers = [1, 2, 3, 4, 5]; const indexOfThree = numbers.indexOf(3); console.log(indexOfThree); // Output: 2
14. join()
The join() method joins all elements of an array into a single string, separated by a specified separator. It’s useful for creating a string representation of an array.
const elements = ['Fire', 'Air', 'Water'];
const joined = elements.join(', ');
console.log(joined); // Output: Fire, Air, Water
15. map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. It’s ideal for transforming array elements.
const numbers = [1, 2, 3, 4]; const squares = numbers.map(num => num * num); console.log(squares); // Output: [1, 4, 9, 16]
16. pop()
The pop() method removes the last element from an array and returns that element. This method modifies the length of the array.
const numbers = [1, 2, 3, 4]; const lastElement = numbers.pop(); console.log(lastElement); // Output: 4 console.log(numbers); // Output: [1, 2, 3]
17. push()
The push() method adds one or more elements to the end of an array and returns the new length of the array. It’s useful for appending elements.
const numbers = [1, 2, 3]; const newLength = numbers.push(4, 5); console.log(newLength); // Output: 5 console.log(numbers); // Output: [1, 2, 3, 4, 5]
18. reduce()
The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It’s often used for operations like summing values or accumulating results.
const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((acc, num) => acc + num, 0); console.log(sum); // Output: 10
19. reduceRight()
The reduceRight() method works like reduce(), but processes the array from right to left. It’s useful for situations where order of processing matters.
const numbers = [1, 2, 3, 4]; const sumRight = numbers.reduceRight((acc, num) => acc + num, 0); console.log(sumRight); // Output: 10
20. reverse()
The reverse() method reverses the elements of an array in place and returns the reference to the same array. It’s useful for reversing the order of elements.
const numbers = [1, 2, 3, 4]; numbers.reverse(); console.log(numbers); // Output: [4, 3, 2, 1]
21. shift()
The shift() method removes the first element from an array and returns that element. This method modifies the length of the array.
const numbers = [1, 2, 3, 4]; const firstElement = numbers.shift(); console.log(firstElement); // Output: 1 console.log(numbers); // Output: [2, 3, 4]
22. slice()
The slice() method returns a shallow copy of a portion of an array into a new array selected from start to end (end not included). It does not modify the original array.
const numbers = [1, 2, 3, 4]; const sliced = numbers.slice(1, 3); console.log(sliced); // Output: [2, 3]
23. some()
The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if any elements pass the test, otherwise false.
const numbers = [1, 2, 3, 4]; const hasEven = numbers.some(num => num % 2 === 0); console.log(hasEven); // Output: true
24. sort()
The sort() method sorts the elements of an array in place and returns the sorted array. By default, it sorts elements as strings. For numerical sorting, a comparison function is required.
const numbers = [4, 2, 3, 1]; numbers.sort((a, b) => a - b); console.log(numbers); // Output: [1, 2, 3, 4]
25. splice()
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. It’s highly versatile for array modifications.
const numbers = [1, 2, 3, 4]; numbers.splice(2, 1, 'a', 'b'); console.log(numbers); // Output: [1, 2, 'a', 'b', 4]
26. toLocaleString()
The toLocaleString() method returns a string representing the array elements, joined by a localized separator. It’s useful for formatting array data for different locales.
const numbers = [1, 2, 3]; const localeString = numbers.toLocaleString(); console.log(localeString); // Output: "1,2,3" (or localized equivalent)
27. toString()
The toString() method returns a string representing the array and its elements, joined by commas. It’s similar to join() but always uses commas as the separator.
const numbers = [1, 2, 3]; const stringRepresentation = numbers.toString(); console.log(stringRepresentation); // Output: "1,2,3"
28. unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. It’s useful for prepending elements.
const numbers = [2, 3, 4]; const newLength = numbers.unshift(1); console.log(newLength); // Output: 4 console.log(numbers); // Output: [1, 2, 3, 4]
29. values()
The values() method returns a new Array Iterator object that contains the values for each index in the array. It’s useful for iterating over array elements without their indices.
const numbers = [1, 2, 3];
for (const value of numbers.values()) {
console.log(value);
}
// Output:
// 1
// 2
// 3
30. with()
The with() method is no longer standard in modern JavaScript and TypeScript and is generally avoided. It was used to extend the scope chain of a block, which could lead to confusing and error-prone code. For completeness and historical reference, here’s a sample illustrating its usage:
// Example using `with()`
function exampleWith() {
const obj = {
name: 'John',
age: 30
};
// Extending scope with `with()`
with (obj) {
console.log(name); // Output: John
console.log(age); // Output: 30
}
}
exampleWith();
31. at()
The at() method returns the element at the specified position in the array. It supports negative indices to count from the end of the array. It’s useful for accessing elements relative to the end of the array.
const numbers = [1, 2, 3, 4]; const secondToLast = numbers.at(-2); console.log(secondToLast); // Output: 3
32. groupBy()
The groupBy() method is not a built-in JavaScript or TypeScript method but is commonly used in utility libraries like Lodash. It groups elements of an array into an object based on a given criterion. Here’s how you might implement a groupBy() function from scratch in TypeScript:
// TypeScript implementation of `groupBy()`
function groupBy<T>(array: T[], keyGetter: (item: T) => string): Record<string, T[]> {
return array.reduce((result, item) => {
// Get the key based on the item
const key = keyGetter(item);
// If the key doesn't exist in the result object, initialize it with an empty array
if (!result[key]) {
result[key] = [];
}
// Push the item into the array corresponding to the key
result[key].push(item);
return result;
}, {} as Record<string, T[]>);
}
// Example usage
interface Person {
name: string;
age: number;
}
const people: Person[] = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 25 },
{ name: 'David', age: 30 }
];
const groupedByAge = groupBy(people, person => person.age.toString());
console.log(groupedByAge);
33. findLast()
The findLast() method returns the last element in the array that satisfies the provided testing function. This method is useful when you need to find an element from the end of the array.
const numbers = [1, 2, 3, 4, 5]; const lastEven = numbers.findLast(num => num % 2 === 0); console.log(lastEven); // Output: 4
Mastering these array methods will elevate your TypeScript skills, making your code more efficient and expressive. Understanding when and how to use each method allows you to handle data manipulation tasks with greater precision and ease.
