TypeScript Arrays: 25 Essential Functions and Examples
Introduction:
Arrays are a fundamental data structure in TypeScript, allowing us to store and manipulate collections of elements. TypeScript provides a rich set of array functions that simplify common tasks and enhance the functionality of arrays. In this article, we will explore 25 essential functions of TypeScript arrays and provide practical examples to help you harness their power in your projects.
1. push():
Adds one or more elements to the end of an array.
const numbers: number[] = [1, 2, 3];
numbers.push(4);
console.log(numbers); // Output: [1, 2, 3, 4]
2. pop():
Removes the last element from an array and returns it.
const numbers: number[] = [1, 2, 3];
const lastElement = numbers.pop();
console.log(lastElement); // Output: 3
3. concat():
Combines two or more arrays and returns a new array.
const arr1: number[] = [1, 2];
const arr2: number[] = [3, 4];
const combinedArray = arr1.concat(arr2);
console.log(combinedArray); // Output: [1, 2, 3, 4]
4. join():
Joins all elements of an array into a string using a specified separator.
const elements: string[] = ['Hello', 'World'];
const joinedString = elements.join(', ');
console.log(joinedString); // Output: "Hello, World"
5. reverse():
Reverses the order of the elements in an array.
const numbers: number[] = [1, 2, 3];
numbers.reverse();
console.log(numbers); // Output: [3, 2, 1]
6. shift():
Removes the first element from an array and returns it.
const numbers: number[] = [1, 2, 3];
const firstElement = numbers.shift();
console.log(firstElement); // Output: 1
7. unshift():
Adds one or more elements to the beginning of an array.
const numbers: number[] = [2, 3];
numbers.unshift(1);
console.log(numbers); // Output: [1, 2, 3]
8. slice():
Extracts a portion of an array into a new array.
const numbers: number[] = [1, 2, 3, 4, 5];
const slicedArray = numbers.slice(2, 4);
console.log(slicedArray); // Output: [3, 4]
9. splice():
Changes the contents of an array by removing or replacing existing elements.
const numbers: number[] = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 6);
console.log(numbers); // Output: [1, 2, 6, 4, 5]
10. sort():
Sorts the elements of an array in place.
const numbers: number[] = [3, 2, 1];
numbers.sort();
console.log(numbers); // Output: [1, 2, 3]
11. filter():
Creates a new array with all elements that pass a test.
const numbers: number[] = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
12. map():
Creates a new array by applying a function to each element of an array.
const numbers: number[] = [1, 2, 3];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6]
13. forEach():
Executes a provided function once for each array element.
const numbers: number[] = [1, 2, 3];
numbers.forEach((num) => console.log(num)); // Output: 1 2 3
14. find():
Returns the first element in an array that satisfies a provided test function.
const numbers: number[] = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((num) => num > 3);
console.log(foundNumber); // Output: 4
15. findIndex():
Returns the index of the first element in an array that satisfies a provided test function.
const numbers: number[] = [1, 2, 3, 4, 5];
const foundIndex = numbers.findIndex((num) => num > 3);
console.log(foundIndex); // Output: 3
16. every():
Checks if all elements in an array pass a test.
const numbers: number[] = [2, 4, 6];
const allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // Output: true
17. some():
Checks if at least one element in an array passes a test.
const numbers: number[] = [1, 2, 3];
const hasEvenNumber = numbers.some((num) => num % 2 === 0);
console.log(hasEvenNumber); // Output: true
18. includes():
Determines whether an array contains a specific element.
const numbers: number[] = [1, 2, 3];
const includesTwo = numbers.includes(2);
console.log(includesTwo); // Output: true
19. reduce():
Applies a function against an accumulator and each element in the array to reduce it to a single value.
const numbers: number[] = [1, 2, 3];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6
20. reduceRight():
Similar to reduce(), but applies the function from right to left.
const numbers: number[] = [1, 2, 3];
const reducedRight = numbers.reduceRight((acc, curr) => acc - curr);
console.log(reducedRight); // Output: 0 (1 - 2 - 3)
21. flat():
Creates a new array with all sub-array elements concatenated recursively.
const numbers: number[][] = [[1], [2, 3], [4]];
const flattenedArray = numbers.flat();
console.log(flattenedArray); // Output: [1, 2, 3, 4]
22. flatMap():
Maps each element to a new array and flattens the result.
const numbers: number[] = [1, 2, 3];
const mappedArray = numbers.flatMap((num) => [num, num * 2]);
console.log(mappedArray); // Output: [1, 2, 2, 4, 3, 6]
23. indexOf():
Returns the first index at which a given element can be found in
the array.
const numbers: number[] = [1, 2, 3, 2, 4];
const firstIndex = numbers.indexOf(2);
console.log(firstIndex); // Output: 1
24. lastIndexOf():
Returns the last index at which a given element can be found in the array.
const numbers: number[] = [1, 2, 3, 2, 4];
const lastIndex = numbers.lastIndexOf(2);
console.log(lastIndex); // Output: 3
25. fill():
Fills all the elements of an array with a static value.
const numbers: number[] = [1, 2, 3];
numbers.fill(0);
console.log(numbers); // Output: [0, 0, 0]
Conclusion:
Understanding the various functions available for TypeScript arrays empowers you to manipulate, transform, and extract data efficiently. By leveraging these functions, you can write cleaner and more expressive code, saving time and effort in your TypeScript projects. Experiment with these functions, combine them, and explore their versatility to take full advantage of TypeScript’s array capabilities. Happy coding!