How to Split an Array of Strings into Chunks of Equal Length in TypeScript ?

In TypeScript, to split an array of strings into chunks of equal length we need to divide the array into the smaller subarrays, in which each contains the number of elements based on the chunk size.

These are the following approaches:

Using for Loop

In this approach, we use the for loop to iterate through the input array, by incrementing the index which is specified by the chunk size, and push the subarrays of the input array into the result array.

Syntax:

for (initialization; condition; increment/decrement) {
  // code
}

Example: The below example uses for loop to split an array of strings into chunks of equal length in TypeScript.

const approach1Fn = (arr: string[], size: number):
    string[][] => {
    const res: string[][] = [];
    for (let i = 0; i < arr.length; i += size) {
        res.push(arr.slice(i, i + size));
    }
    return res;
};
const arr = ["Geeks", "for", "Geeks", "is",
    "a", "computer", "science", "portal"];
const size = 2;
const result = approach1Fn(arr, size);
console.log(result);

Output:

[["Geeks", "for"], ["Geeks", "is"], ["a", "computer"], ["science", "portal"]]

Using Array.from() method

In this approach, we use Array.from() method to create the new array with the size which is determined by dividing the original array's length with the size specified as the chunk size. Then the mapping function slices the input into chunks based on the calculated indexes.

Syntax:

Array.from(iterable, mapFunction?)

Example: The below example uses the Array.from() method to split an array of strings into chunks of equal length in TypeScript.

const approach2Fn = (arr: string[], size: number):
    string[][] =>
    Array.from({ length: Math.ceil(arr.length / size) },
        (_, index) =>
            arr.slice(index * size, (index + 1) * size)
    );
const arr = ["Geeks", "for", "Geeks", "is",
    "a", "computer", "science", "portal"];
const size = 2;
const result = approach2Fn(arr, size);
console.log(result);

Output:

[["Geeks", "for"], ["Geeks", "is"], ["a", "computer"], ["science", "portal"]]

Using reduce() method

In this approach, we use the reduce() method to iterate over the input array. The accumulator is updated which is based on the current index and if the index is a multiple of the specified chunk size, then a new subarray is appended to the result by slicing the input array.

Syntax:

array.reduce(callback, initialValue?)

Example: The below example uses the reduce() method to split an array of strings into chunks of equal length in TypeScript.

const approach3Fn = (arr: string[], size: number):
    string[][] =>
    arr.reduce((result: string[][], _, index) =>
    (index % size === 0 ? [...result,
    arr.slice(index, index + size)] : result),
        []);
const arr = ["Geeks", "for", "Geeks",
    "is", "a", "computer", "science", "portal"];
const size = 2;
const result = approach3Fn(arr, size);
console.log(result);

Output:

[["Geeks", "for"], ["Geeks", "is"], ["a", "computer"], ["science", "portal"]]